/* ── 소개 페이지 — v6 문법 위에 얹는 몇 가지 ── */

.ahero { padding: 8.5rem var(--pad) clamp(2.5rem, 6vh, 4rem); max-width: var(--wide); margin: 0 auto; }
.ahero h1 {
  margin-top: 1rem; font-weight: 400; color: var(--joy);
  font-size: clamp(1.75rem, 4.6vw, 3rem); line-height: 1.34; letter-spacing: 0.005em;
}
.ahero h1 b { font-weight: 700; }
.ahero__sub {
  margin-top: 1.4rem; max-width: 40rem; font-weight: 300;
  font-size: clamp(0.98rem, 2.2vw, 1.08rem); line-height: 2; color: var(--ink-soft);
}

/* 세 가지 표현의 언어 */
.langs { padding: clamp(3.5rem, 9vh, 5.5rem) var(--pad); max-width: var(--wide); margin: 0 auto; }
.langs__grid {
  margin-top: 2.2rem; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.2vw, 24px);
}
@media (max-width: 720px) { .langs__grid { grid-template-columns: 1fr; } }
.lang {
  background: var(--card); border-radius: 4px; box-shadow: var(--shadow);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.lang svg { width: 46px; height: 46px; display: block; }
.lang b { display: block; margin-top: 1rem; font-weight: 700; font-size: 1.12rem; }
.lang p { margin-top: 0.5rem; font-weight: 300; font-size: 0.94rem; line-height: 1.85; color: var(--ink-soft); }

/* 90분 안에서 일어나는 네 가지 — 이름표는 붙이지 않는다 */
.steps { background: var(--butter-soft); padding: clamp(3.6rem, 9vh, 5.8rem) var(--pad); }
.steps__in { max-width: calc(var(--wide) - 2 * var(--pad)); margin: 0 auto; }
.steps__grid {
  margin-top: 2.2rem; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 900px) { .steps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps__grid { grid-template-columns: 1fr; } }
.step { background: var(--card); border-radius: 4px; box-shadow: var(--shadow); padding: clamp(1.3rem, 2.6vw, 1.7rem); }
.step span { display: block; width: 34px; height: 34px; border-radius: 50%; }
.step b { display: block; margin-top: 0.9rem; font-weight: 700; font-size: 1.06rem; }
.step i { display: block; margin-top: 0.2rem; font-style: normal; font-weight: 400; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--ink-faint); }
.step p { margin-top: 0.7rem; font-weight: 300; font-size: 0.9rem; line-height: 1.85; color: var(--ink-soft); }
.steps__note { margin-top: 1.9rem; max-width: 44rem; font-weight: 300; font-size: 0.96rem; line-height: 2; color: var(--ink-soft); }
.steps__note b { font-weight: 400; color: var(--ink); }

/* 자주 묻는 질문 */
.faq { padding: clamp(3.5rem, 9vh, 5.5rem) var(--pad); max-width: var(--wide); margin: 0 auto; }
.faq__list { margin-top: 1.8rem; max-width: 46rem; }
.faq details { border-top: 1px solid rgba(43,42,38,0.12); }
.faq details:last-child { border-bottom: 1px solid rgba(43,42,38,0.12); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2rem 1.15rem 0; position: relative;
  font-weight: 400; font-size: clamp(0.98rem, 2.2vw, 1.06rem); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-weight: 300; font-size: 1.3rem; color: var(--ink-faint); transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 1.35rem; font-weight: 300; font-size: 0.96rem; line-height: 2; color: var(--ink-soft); }


/* ── 걸어온 길 (요약) ── */
.path { padding: clamp(3.6rem, 9vh, 5.8rem) var(--pad); background: var(--card); }
.path__in { max-width: calc(var(--wide) - 2 * var(--pad)); margin: 0 auto; }
.path .eyebrow { color: var(--joy); }
.path .lead { margin-top: 1rem; max-width: 40rem; }
.path__brief { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 46rem; }
.path__brief li { display: grid; grid-template-columns: 6em 1fr; gap: 0.8rem; padding: 0.85rem 0; border-top: 1px solid rgba(43,42,38,0.12); }
.path__brief li:last-child { border-bottom: 1px solid rgba(43,42,38,0.12); }
.path__brief b { font-weight: 700; font-size: 0.9rem; }
.path__brief span { font-weight: 300; font-size: 0.94rem; line-height: 1.8; color: var(--ink-soft); word-break: keep-all; }
.path__more { margin-top: 1.6rem; }
#career { scroll-margin-top: 6.5rem; }
@media (max-width: 620px) { .path__brief li { grid-template-columns: 1fr; gap: 0.2rem; } #career { scroll-margin-top: 8.6rem; } }


/* ── 90분의 여정 — 길이 그려지고 점이 찍힌다 ── */
.j90 { margin-top: 2rem; }
.j90__svg { display: block; width: 100%; height: auto; overflow: visible; }
.j90__base { fill: none; stroke: rgba(43,42,38,0.16); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 10; }
.j90__ink { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1300; stroke-dashoffset: 1300; }
.j90__dot { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.j90__walker { opacity: 0; transform: translateY(6px); }
.j90.in .j90__ink { animation: j90draw 2.8s cubic-bezier(0.45, 0, 0.3, 1) 0.35s forwards; }
.j90.in .j90__dot { animation: j90pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.j90.in .j90__dot--1 { animation-delay: 0.55s; }
.j90.in .j90__dot--2 { animation-delay: 1.3s; }
.j90.in .j90__dot--3 { animation-delay: 2.05s; }
.j90.in .j90__dot--4 { animation-delay: 2.8s; }
.j90.in .j90__walker { animation: j90walker 0.6s ease-out 3.2s forwards; }
@keyframes j90draw { to { stroke-dashoffset: 0; } }
@keyframes j90pop { to { transform: scale(1); } }
@keyframes j90walker { to { opacity: 1; transform: translateY(0); } }

.j90__steps { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.j90__step { text-align: center; padding: 0 0.4rem; }
.j90__pin { display: none; }
.j90__step b { display: block; font-weight: 700; font-size: 1rem; }
.j90__step i { display: block; margin-top: 0.15rem; font-style: normal; font-weight: 400; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--ink-faint); }
.j90__step p { margin-top: 0.5rem; font-weight: 300; font-size: 0.8rem; line-height: 1.75; color: var(--ink-soft); word-break: keep-all; text-wrap: pretty; }
.j90.in .j90__step { opacity: 0; animation: j90fade 0.6s ease-out forwards; }
.j90.in .j90__step--1 { animation-delay: 0.7s; }
.j90.in .j90__step--2 { animation-delay: 1.45s; }
.j90.in .j90__step--3 { animation-delay: 2.2s; }
.j90.in .j90__step--4 { animation-delay: 2.95s; }
@keyframes j90fade { to { opacity: 1; } }

/* 좁은 화면 — 세로 길 위에 점이 차례로 찍힌다 */
@media (max-width: 640px) {
  .j90__svg { display: none; }
  .j90__steps { grid-template-columns: 1fr; gap: 0; position: relative; margin-top: 0.4rem; padding-left: 3.2rem; }
  .j90__steps::before { content: ""; position: absolute; left: 1.05rem; top: 0.6rem; bottom: 0.6rem; border-left: 3px dotted rgba(43,42,38,0.2); }
  .j90__step { position: relative; text-align: left; padding: 0.9rem 0 1.1rem; }
  .j90__pin { display: block; position: absolute; left: -3.2rem; top: 0.95rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; box-shadow: inset 0 0 0 0.45rem var(--c); background: #FFF8EC; transform: scale(0); }
  .j90__step--1 .j90__pin { --c: #E2603C; } .j90__step--2 .j90__pin { --c: #F2C94C; }
  .j90__step--3 .j90__pin { --c: #4E9084; } .j90__step--4 .j90__pin { --c: #0066B3; }
  .j90.in .j90__pin { animation: j90pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
  .j90.in .j90__step--1 .j90__pin { animation-delay: 0.3s; } .j90.in .j90__step--2 .j90__pin { animation-delay: 0.8s; }
  .j90.in .j90__step--3 .j90__pin { animation-delay: 1.3s; } .j90.in .j90__step--4 .j90__pin { animation-delay: 1.8s; }
  .j90.in .j90__step--1 { animation-delay: 0.35s; } .j90.in .j90__step--2 { animation-delay: 0.85s; }
  .j90.in .j90__step--3 { animation-delay: 1.35s; } .j90.in .j90__step--4 { animation-delay: 1.85s; }
}
@media (prefers-reduced-motion: reduce) {
  .j90__ink { stroke-dashoffset: 0; } .j90__dot, .j90__pin { transform: none; } .j90__walker { opacity: 1; transform: none; }
  .j90.in .j90__step, .j90.in .j90__ink, .j90.in .j90__dot, .j90.in .j90__walker, .j90.in .j90__pin { animation: none; opacity: 1; }
}


/* ── 어우러지는 표현 — 겹치는 원 ── */
.fuse { padding: clamp(3.5rem, 9vh, 5.5rem) var(--pad); max-width: var(--wide); margin: 0 auto; text-align: center; }
.fuse .lead { margin: 1rem auto 0; max-width: 40rem; }
.fuse__fig { margin: 1.6rem auto 0; max-width: 600px; }
.fuse__fig svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.fuse__c--art circle   { fill: #EE8466; fill-opacity: 0.55; }
.fuse__c--code circle  { fill: #5E9BD3; fill-opacity: 0.45; }
.fuse__c--block circle { fill: #F4C74E; fill-opacity: 0.6; }
.fuse__lb { font-size: 21px; font-weight: 700; fill: var(--ink); text-anchor: middle; letter-spacing: -0.01em; }
.fuse__mid text { font-size: 19px; font-weight: 700; fill: #6B4A1E; text-anchor: middle; }
.fuse__more circle { fill: #FFFDF6; stroke: rgba(43,42,38,0.3); stroke-width: 1.5; stroke-dasharray: 3 6; }
.fuse__more text { font-size: 15px; font-weight: 400; fill: var(--ink-soft); text-anchor: middle; }
.fuse__cap { margin-top: 1rem; font-weight: 300; font-size: 0.9rem; color: var(--ink-faint); word-break: keep-all; }
@media (max-width: 560px) {
  .fuse__lb { font-size: 26px; } .fuse__mid text { font-size: 23px; } .fuse__more text { font-size: 19px; }
}

/* 멀리 있던 원들이 가운데로 모여 겹치고, 가운데가 환해진다 */
.fuse__c, .fuse__more { transform-box: fill-box; transform-origin: center; }
.fuse__c--art   { transform: translate(-70px, -30px); opacity: 0; }
.fuse__c--code  { transform: translate(70px, -30px);  opacity: 0; }
.fuse__c--block { transform: translate(0, 70px);      opacity: 0; }
.fuse__lb, .fuse__core, .fuse__mid { opacity: 0; }
.fuse__more { opacity: 0; transform: scale(0.7); }
.fuse__fig.in .fuse__c { animation: fuseIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.fuse__fig.in .fuse__c--code  { animation-delay: 0.12s; }
.fuse__fig.in .fuse__c--block { animation-delay: 0.24s; }
.fuse__fig.in .fuse__lb { animation: fuseFade 0.6s ease-out 0.9s forwards; }
.fuse__fig.in .fuse__core { animation: fuseFade 0.9s ease-out 1.3s forwards; }
.fuse__fig.in .fuse__mid { animation: fuseFade 0.6s ease-out 1.6s forwards; }
.fuse__fig.in .fuse__more { animation: fuseIn 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; }
.fuse__fig.in .fuse__more--1 { animation-delay: 1.9s; }
.fuse__fig.in .fuse__more--2 { animation-delay: 2.02s; }
.fuse__fig.in .fuse__more--3 { animation-delay: 2.14s; }
.fuse__fig.in .fuse__more--4 { animation-delay: 2.26s; }
.fuse__fig.in .fuse__more--5 { animation-delay: 2.38s; }
.fuse__fig.in .fuse__more--6 { animation-delay: 2.5s; }
@keyframes fuseIn { to { transform: none; opacity: 1; } }
@keyframes fuseFade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fuse__c, .fuse__lb, .fuse__core, .fuse__mid, .fuse__more { transform: none; opacity: 1; animation: none !important; }
}

/* ── 서랍이 많은 이유 — 서랍장과 흩어진 재료 ── */
.drawer__fig { margin: 2rem auto 0.4rem; max-width: 620px; }
.drawer__fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.dr__floor { fill: rgba(43,42,38,0.06); }
.dr__body { fill: #E9D3B0; }
.dw rect { fill: #F6E7CD; stroke: #D4B78C; stroke-width: 1.5; }
.dw circle, .dr__knob { fill: #8A6A4A; }
.dr__box { fill: #D9B98E; }
.dr__front { fill: #F6E7CD; stroke: #D4B78C; stroke-width: 1.5; }
.dr__it, .dr__open { transform-box: fill-box; transform-origin: center; }
.dr__open { transform: translateX(-40px); }
.dr__it { opacity: 0; transform: translate(-60px, -20px) scale(0.6) rotate(-20deg); }
.drawer__fig.in .dr__open { animation: drOpen 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards; }
.drawer__fig.in .dr__it { animation: drSpill 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; }
.drawer__fig.in .dr__it--4 { animation-delay: 0.8s; }
.drawer__fig.in .dr__it--1 { animation-delay: 0.95s; }
.drawer__fig.in .dr__it--6 { animation-delay: 1.1s; }
.drawer__fig.in .dr__it--2 { animation-delay: 1.25s; }
.drawer__fig.in .dr__it--8 { animation-delay: 1.4s; }
.drawer__fig.in .dr__it--5 { animation-delay: 1.55s; }
.drawer__fig.in .dr__it--3 { animation-delay: 1.7s; }
.drawer__fig.in .dr__it--7 { animation-delay: 1.85s; }
@keyframes drOpen { to { transform: none; } }
@keyframes drSpill { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dr__open, .dr__it { transform: none; opacity: 1; animation: none !important; }
}
.j90__step i { color: rgba(43, 42, 38, 0.55); }

/* ── 맛있게 드세요 (행복맛집 서사) ── */
.enjoy { background: var(--butter-soft, #FBEFC8); padding: clamp(4rem, 11vh, 7rem) var(--pad); text-align: center; }
.enjoy .eyebrow { color: #C0501F; }
.enjoy h2 { margin-top: 0.9rem; font-weight: 400; font-size: clamp(1.35rem, 4vw, 2.3rem); line-height: 1.6; }
.enjoy h2 b { font-weight: 700; color: #C0501F; }
.enjoy__body { margin: 2rem auto 0; max-width: 34rem; }
.enjoy__body p { font-weight: 300; font-size: clamp(0.98rem, 2.4vw, 1.08rem); line-height: 2; color: var(--ink-soft); }
.enjoy__body p + p { margin-top: 1.2rem; }
.enjoy__tastes { color: var(--ink) !important; font-weight: 400 !important; }
.enjoy__sign { color: var(--ink) !important; font-weight: 700 !important; }
.enjoy .btn { margin-top: 2.2rem; }