@font-face { font-family: "Pretendard"; src: url("/portfolio/assets/font.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }

:root {
      color-scheme: light;
      --ink: #272422;
      --body: #68615c;
      --accent: #c64a30;
      --accent-hover: #ad3e27;
      --accent-light: #ffdfcf;
      --note-bg: #fff9f5;
      --note-border: #f3e6dd;
      font-family: "Pretendard", -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Noto Sans CJK KR", "Malgun Gothic", sans-serif;
      color: var(--ink);
      background: #fff;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    *, *::before, *::after { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      min-height: 100svh;
      display: grid;
      place-items: center;
      padding: 64px 24px;
    }
    .intro {
      width: 100%;
      max-width: 900px;
      text-align: center;
      word-break: keep-all;
      overflow-wrap: break-word;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 0 0 25px;
      color: #8b6858;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.5;
      letter-spacing: .18em;
    }
    .eyebrow::before, .eyebrow::after {
      content: "";
      width: 19px;
      height: 1px;
      background: #dfb8a4;
    }

    h1 {
      margin: 0;
      font-size: clamp(35px, 4.35vw, 60px);
      font-weight: 780;
      line-height: 1.32;
      letter-spacing: -.055em;
    }
    .headline-line { display: block; }
    .headline-line:first-child {
      margin-bottom: 1px;
      font-size: .85em;
      font-weight: 650;
      letter-spacing: -.05em;
    }
    .highlight {
      position: relative;
      display: inline-block;
      isolation: isolate;
      color: var(--accent);
    }
    .highlight::after {
      position: absolute;
      z-index: -1;
      content: "";
      left: -.035em;
      right: -.035em;
      bottom: .10em;
      height: .16em;
      background: var(--accent-light);
      border-radius: 60% 38% 52% 30%;
      transform: rotate(-3deg);
    }

    .description {
      margin: 24px 0 0;
      color: var(--body);
      font-size: 20px;
      font-weight: 400;
      line-height: 1.85;
      letter-spacing: -.03em;
    }
    .description-line { display: block; }
    .description em {
      color: #38322e;
      font-style: normal;
      font-weight: 600;
    }

    .action { margin-top: 32px; }
    .enter {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 23px;
      min-height: 62px;
      padding: 12px 17px 12px 29px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 6px 16px -8px rgb(163 64 38 / 40%);
      color: #fff;
      font-size: 18px;
      font-weight: 650;
      line-height: 1.4;
      letter-spacing: -.025em;
      text-decoration: none;
      touch-action: manipulation;
      transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    }
    .enter-arrow {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgb(255 255 255 / 15%);
    }
    .enter-arrow svg {
      width: 19px;
      height: 19px;
      transition: transform .2s ease;
    }
    @media (hover: hover) {
      .enter:hover {
        background: var(--accent-hover);
        box-shadow: 0 9px 22px -9px rgb(163 64 38 / 44%);
        transform: translateY(-2px);
      }
      .enter:hover svg { transform: translateX(2px); }
    }
    .enter:active { transform: translateY(0); }
    .enter:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 5px;
    }

    /* 로그인 안내는 진입 버튼 다음에 배치합니다. */
    .guide {
      width: fit-content;
      max-width: 100%;
      margin: 29px auto 0;
      padding: 21px 32px 22px;
      border: 1px solid var(--note-border);
      border-radius: 18px;
      background: var(--note-bg);
      color: #655b53;
      font-size: 19px;
      line-height: 1.8;
      letter-spacing: -.03em;
    }
    .guide p { margin: 0; }
    .guide .guide-main {
      margin-bottom: 5px;
      color: #453b34;
      font-size: 20px;
      font-weight: 500;
    }
    /* 안내문 속 버튼 이름만 강조합니다. 실제 이동은 위의 체험하기 링크입니다. */
    .login-label {
      display: inline-flex;
      vertical-align: baseline;
      align-items: center;
      gap: 6px;
      margin: 0 3px;
      padding: 2px 10px;
      border: 1px solid #edb299;
      border-radius: 7px;
      background: #ffe3d6;
      color: #ad3e27;
      font-size: 1.08em;
      font-weight: 800;
      line-height: 1.5;
      white-space: nowrap;
    }
    .login-label svg { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 2.1; }
    .guide-detail strong { color: #4a4039; font-weight: 650; }
    .keep { white-space: nowrap; }

    @keyframes appear {
      from { opacity: 0; transform: translateY(9px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: no-preference) {
      .eyebrow { animation: appear .55s .02s both; }
      h1 { animation: appear .55s .09s both; }
      .description { animation: appear .55s .16s both; }
      .action { animation: appear .55s .23s both; }
      .guide { animation: appear .55s .30s both; }
    }

    @media (max-width: 600px) {
      body { padding: 48px 22px; }
      .eyebrow { margin-bottom: 22px; font-size: 11px; }
      h1 { font-size: clamp(31px, 8.75vw, 48px); line-height: 1.38; }
      .headline-line:first-child { font-size: .88em; margin-bottom: 3px; }
      .description { margin-top: 24px; font-size: 17px; line-height: 1.85; }
      .action { margin-top: 28px; }
      .enter { min-height: 58px; font-size: 17px; padding-left: 25px; gap: 18px; }
      .enter-arrow { width: 31px; height: 31px; }
      .guide { width: 100%; margin-top: 27px; padding: 19px 16px 20px; font-size: 17px; line-height: 1.8; border-radius: 15px; }
      .guide .guide-main { font-size: 17px; margin-bottom: 8px; }
      .login-label { gap: 4px; padding: 2px 7px; margin-inline: 2px; font-size: 1.06em; }
      .login-label svg { width: 14px; height: 14px; }
    }
    @media (max-width: 360px) {
      body { padding: 40px 16px; }
      h1 { font-size: 31px; }
      .description { font-size: 16px; }
      .guide { padding-inline: 12px; }
      .guide .guide-main { font-size: 17px; }
    }
    @media (forced-colors: active) {
      .enter, .guide, .login-label { border: 1px solid CanvasText; }
    }

/* Catalog shortcuts retain the existing portfolio entrance. */
.collection-shortcuts { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 24px; margin:24px auto 0; }
.collection-shortcuts a { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:5px 0; color:#24364a; font-size:15px; font-weight:600; text-decoration:none; border-bottom:1px solid #b8c5d2; }
.collection-shortcuts a:hover { color:#275fcd; border-color:currentColor; }
.collection-shortcuts a:focus-visible { outline:3px solid #275fcd; outline-offset:5px; border-radius:3px; }
@media(max-width:600px) { .collection-shortcuts { gap:8px 20px; margin-top:18px; } .collection-shortcuts a { font-size:14px; } }