/* =============================================
   StudioSeiHa — pages.css  (redesign 2026)
   index sections  (kids/team/seihi page styles added next)
   ============================================= */

/* ── WHAT WE DO ── */
#genres .wwd-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:1.5rem}
.wwd{border-radius:var(--radius);padding:2.1rem;transition:transform .25s,border-color .25s}
.wwd:hover{transform:translateY(-3px)}
.wwd-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.wwd-head .mk{width:9px;height:9px;border-radius:50%}
.wwd-head .kk{font-family:'Space Grotesk';font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.wwd h3{font-family:'Space Grotesk';font-weight:700;font-size:1.7rem;letter-spacing:-.01em}
.wwd p{color:var(--t-body);font-size:.96rem;margin-top:.6rem}
.wwd-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
/* Kids = specialty (filled) */
.wwd-kids{background:var(--coral-soft);border:1px solid #F1DDD4}
.wwd-kids .mk{background:var(--coral)}.wwd-kids .kk{color:var(--coral)}.wwd-kids h3{color:#C84B2B}
.wwd-kids .badge-spec{display:inline-block;margin-top:1.4rem;font-family:'Space Grotesk';font-size:.68rem;font-weight:600;letter-spacing:.1em;padding:.3rem .7rem;border-radius:99px;background:var(--coral);color:#fff}
/* Game / Animation = available (outline) */
.wwd-game,.wwd-anim{background:var(--paper);border:1px solid var(--line)}
.wwd-game .mk{background:var(--navy)}.wwd-game .kk{color:var(--t-mute)}.wwd-game:hover{border-color:var(--navy)}
.wwd-anim .mk{background:var(--gold)}.wwd-anim .kk{color:var(--t-mute)}.wwd-anim:hover{border-color:var(--gold)}

/* ── FEATURED KIDS ── */
#kids-preview{background:var(--cream)}
.kids-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:center}
.kids-inner .stitle{font-family:'Space Grotesk';font-weight:700;font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;letter-spacing:-.02em;color:var(--coral)}
.kids-inner .sk{display:inline-block;font-family:'Space Grotesk';font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--t-mute);margin-bottom:1rem}
.kids-inner p{color:var(--t-body);margin:1.1rem 0;max-width:38ch}
.kids-stats{display:flex;gap:2.2rem;margin:1.6rem 0;padding-top:1.4rem;border-top:1px solid var(--line)}
.kids-stat .n{font-family:'Space Grotesk';font-weight:700;font-size:1.7rem;line-height:1}
.kids-stat .l{font-size:.8rem;color:var(--t-mute);margin-top:.3rem}
.track-list{display:flex;flex-direction:column;gap:.7rem}
.track-row{display:flex;align-items:center;gap:1.1rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.15rem 1.4rem;transition:border-color .2s,box-shadow .2s,transform .2s}
.track-row:hover{border-color:#E7C9BF;box-shadow:0 8px 22px rgba(232,101,78,.08);transform:translateY(-1px)}
.track-flag{width:48px;height:48px;border-radius:12px;background:var(--coral-soft);display:grid;place-items:center;font-size:1.45rem;flex:none}
.track-info{flex:1;min-width:0}
.track-cap{font-family:'Space Grotesk';font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t-mute)}
.track-title{font-weight:600;font-size:.98rem;margin:.05rem 0 .15rem}
.track-sub{font-size:.78rem;color:var(--t-mute)}

/* ── SERVICES ── */
.services-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.6rem}
.services-head p{max-width:30ch;color:var(--t-body);font-size:.95rem;text-align:right}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.service-item{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1.7rem;transition:border-color .25s,transform .25s}
.service-item:hover{transform:translateY(-3px);border-color:var(--coral)}
.service-name{font-family:'Space Grotesk';font-weight:700;font-size:1.15rem;margin-bottom:.4rem}
.service-desc{font-size:.9rem;color:var(--t-body)}

/* ── SEIHI PREVIEW (dark band) ── */
#seihi-preview{background:var(--ink);color:var(--t-light);position:relative;overflow:hidden}
#seihi-preview::before{content:"";position:absolute;inset:0;background:radial-gradient(75% 120% at 88% 50%,rgba(42,59,85,.55),transparent 60%),radial-gradient(55% 80% at 16% 28%,rgba(190,154,69,.14),transparent 60%);pointer-events:none}
.seihi-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr 1fr;gap:3.5rem;align-items:center}
.seihi-inner .sec-eyebrow{color:var(--gold)}
.seihi-inner .sec-title{margin:.8rem 0 1rem}
.seihi-inner .seihi-desc{color:var(--t-mute-d);max-width:42ch}
.seihi-badge{display:inline-flex;align-items:center;gap:.45rem;font-family:'Space Grotesk';font-size:.7rem;font-weight:600;letter-spacing:.12em;padding:.4rem .9rem;border:1px solid var(--gold);color:var(--gold);border-radius:99px;margin-bottom:1.2rem}
.seihi-dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.seihi-feats{display:flex;flex-direction:column;gap:.9rem;margin:1.6rem 0}
.seihi-feat{display:flex;gap:.8rem;align-items:flex-start}
.feat-mk{width:7px;height:7px;border-radius:50%;background:var(--coral);margin-top:.55rem;flex:none}
.feat-title{font-weight:600;font-size:.95rem;color:var(--t-light)}
.feat-desc{font-size:.85rem;color:var(--t-mute-d)}
.seihi-link{color:var(--gold);font-family:'Space Grotesk';font-weight:600;font-size:.85rem;display:inline-flex;gap:.35rem;transition:gap .2s}
.seihi-link:hover{gap:.65rem}
.seihi-mock{aspect-ratio:1;border-radius:var(--radius);background:linear-gradient(155deg,#22304A,#15202F);border:1px solid rgba(255,255,255,.09);display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:2.4rem;letter-spacing:.14em;color:var(--gold)}

/* ── TEAM PREVIEW ── */
.team-preview-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.6rem;flex-wrap:wrap;gap:1rem}
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.3rem}
.member{text-align:center}
.member .avatar{aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--cream);display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:1.7rem;color:var(--navy);border:1px solid var(--line)}
.member .avatar img{width:100%;height:100%;object-fit:cover}
.member .mname{font-weight:600;margin-top:.85rem;font-size:.96rem}
.member .mrole{font-size:.8rem;color:var(--t-mute);font-family:'Space Grotesk'}

/* ── CONTACT ── */
#contact{background:var(--cream)}
.contact-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:3.5rem}
.contact-inner .sec-title{margin-top:.7rem}
.contact-info-items{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.6rem}
.contact-info-item{display:flex;gap:.8rem;align-items:flex-start}
.c-label{font-family:'Space Grotesk';font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-mute)}
.c-val{font-size:1rem;font-weight:500}
.contact-form{display:flex;flex-direction:column;gap:.85rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.form-label{font-family:'Space Grotesk';font-size:.74rem;font-weight:600;letter-spacing:.06em;color:var(--t-mute);margin-bottom:.35rem;display:block}
.form-input,.form-select,.form-textarea{font-family:inherit;font-size:.95rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--t-dark);width:100%;transition:border-color .2s}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--coral)}
.form-textarea{resize:vertical;min-height:120px}
.form-notice{font-size:.78rem;color:var(--t-mute)}
.form-submit{align-self:flex-start;font-family:'Space Grotesk';font-weight:600;font-size:.9rem;padding:.82rem 1.7rem;border-radius:99px;border:0;background:var(--coral);color:#fff;cursor:pointer;transition:transform .15s,background .2s}
.form-submit:hover{transform:translateY(-2px);background:#ef7660}
.form-submit:disabled{opacity:.6;cursor:default;transform:none}
.form-success{display:none;color:var(--navy);font-weight:600;font-size:.95rem;margin-top:.3rem}

@media(max-width:880px){
  #genres .wwd-grid,.services-grid{grid-template-columns:1fr}
  .kids-inner,.seihi-inner,.contact-inner{grid-template-columns:1fr;gap:2.4rem}
  .seihi-mock{max-width:260px}
  .team-grid{grid-template-columns:repeat(3,1fr);gap:1rem}
  .services-head p{text-align:left}
  .form-row{grid-template-columns:1fr}
}
@media(max-width:520px){.team-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== cohesion pass — hero와 같은 언어로 (gold/navy accent, image slots, 적은 텍스트) ===== */
:root{ --gold-ink:#9A7B2E; }

/* gold/navy structural accents on light sections */
.sec-eyebrow{ color:var(--gold-ink); }
.sec-bar{ background:var(--gold); }
.section-link{ color:var(--gold-ink); }
#seihi-preview .sec-eyebrow{ color:var(--gold); } /* keep bright gold on dark band */

/* section background rhythm */
#intro{ background:var(--paper); }
#genres{ background:var(--cream); }
#kids-preview{ background:var(--paper); }
#services{ background:var(--cream); }
#team-preview{ background:var(--paper); }

/* ── IMAGE SLOT (원하는 곳에 이미지 삽입) ──
   사용법: <span class="ph">…</span> 를 지우고  <img src="경로" alt="">  를 넣으면 됩니다. */
.imgslot{ position:relative; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(135deg,var(--cream),#ECE3D2); border:1px solid var(--line);
  display:grid; place-items:center; min-height:260px; }
.imgslot img{ width:100%; height:100%; object-fit:cover; display:block; }
.imgslot .ph{ font-family:'Space Grotesk'; font-size:.76rem; letter-spacing:.05em; color:var(--t-mute);
  border:1px dashed #CDBFA6; border-radius:99px; padding:.45rem .95rem; background:rgba(255,255,255,.45); }
.imgslot-wide{ min-height:clamp(220px,40vh,440px); }

/* ── INTRO statement band ── */
.intro-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; }
.intro-inner h2{ font-family:'Space Grotesk'; font-weight:700; font-size:clamp(1.9rem,4.4vw,3rem);
  line-height:1.12; letter-spacing:-.015em; margin:.7rem 0 1rem; }
.intro-inner p{ color:var(--t-body); max-width:38ch; }

/* ── KIDS editorial (image + short copy) ── */
.kids-editorial{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; margin-bottom:3.2rem; }
.kids-editorial .stitle{ font-family:'Space Grotesk'; font-weight:700; font-size:clamp(2.2rem,5vw,3.2rem);
  line-height:1; letter-spacing:-.02em; color:var(--coral); }
.kids-editorial .sk{ display:inline-block; font-family:'Space Grotesk'; font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:1rem; }
.kids-editorial p{ color:var(--t-body); margin:1.1rem 0; max-width:38ch; }
.kt-head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.2rem; }
.kt-note{ font-family:'Space Grotesk'; font-size:.8rem; color:var(--t-mute); }

/* service hover -> gold (was coral) */
.service-item:hover{ border-color:var(--gold); }

@media(max-width:880px){
  .intro-inner,.kids-editorial{ grid-template-columns:1fr; gap:2rem; }
}

/* ── CAMPAIGN / 아동극 섹션 ── */
#campaign{ background:var(--cream); }
.campaign-editorial{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.campaign-editorial .sk{ display:inline-block; font-family:'Space Grotesk'; font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:1rem; }
.campaign-editorial .stitle{ font-family:'Space Grotesk'; font-weight:700; font-size:clamp(2rem,4.6vw,3rem);
  line-height:1.05; letter-spacing:-.02em; color:var(--navy); }
.campaign-editorial p{ color:var(--t-body); margin:1.1rem 0; max-width:40ch; }
.campaign-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
@media(max-width:880px){ .campaign-editorial{ grid-template-columns:1fr; gap:2rem; } }

/* ============================================================
   DETAIL PAGES (shared) — kids / seihi / team
   ============================================================ */
.page-hero{ position:relative; background:var(--ink); color:var(--t-light); padding:9rem 0 4.5rem; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(90% 70% at 76% 18%,rgba(190,154,69,.16),transparent 60%),
             radial-gradient(80% 70% at 14% 92%,rgba(42,59,85,.46),transparent 62%); pointer-events:none; }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero .breadcrumb, .page-hero .breadcrumb a{ color:var(--t-mute-d); }
.page-hero .breadcrumb a:hover{ color:var(--gold); }
.ph-eyebrow{ font-family:'Space Grotesk'; font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.page-hero h1{ font-family:'Space Grotesk'; font-weight:700; font-size:clamp(2.6rem,7vw,5rem); line-height:.98; letter-spacing:-.025em; }
.page-hero .ph-sub{ margin-top:1.2rem; color:var(--t-mute-d); max-width:50ch; }
.ph-stats{ display:flex; gap:2.8rem; margin-top:2.4rem; flex-wrap:wrap; }
.ph-stat .n{ font-family:'Space Grotesk'; font-weight:700; font-size:2rem; line-height:1; color:var(--t-light); }
.ph-stat .l{ font-size:.8rem; color:var(--t-mute-d); margin-top:.4rem; }

/* projects */
#kproj .proj-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.proj-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:2.2rem; display:flex; flex-direction:column; gap:.9rem; }
.proj-card .pc-label{ font-family:'Space Grotesk'; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); }
.proj-card h3{ font-family:'Space Grotesk'; font-weight:700; font-size:1.7rem; letter-spacing:-.01em; }
.proj-card .pc-sub{ font-size:.9rem; color:var(--t-mute); margin-top:-.3rem; }
.proj-card p{ color:var(--t-body); font-size:.96rem; }
.pill-row{ display:flex; flex-wrap:wrap; gap:.4rem; }
.pc-meta{ display:flex; gap:1.8rem; border-top:1px solid var(--line); padding-top:1.1rem; margin-top:auto; }
.pc-meta .mi .k{ font-family:'Space Grotesk'; font-size:.66rem; color:var(--t-mute); text-transform:uppercase; letter-spacing:.1em; }
.pc-meta .mi .v{ font-weight:600; font-size:.95rem; }

/* process */
#kproc{ background:var(--cream); }
.proc-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.proc-step{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:1.5rem 1.3rem; }
.proc-step .pn{ font-family:'Space Grotesk'; font-weight:700; color:var(--gold); font-size:.85rem; letter-spacing:.05em; }
.proc-step .pt{ font-family:'Space Grotesk'; font-weight:600; font-size:1.05rem; margin:.55rem 0 .35rem; }
.proc-step .pd{ font-size:.84rem; color:var(--t-body); }

/* tracks reuse .track-list / .audio-ctrl */
#ktracks .kt-head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.4rem; }

/* trust */
#ktrust{ background:var(--cream); }
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.trust-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:2rem; }
.trust-card .tnum{ font-family:'Space Grotesk'; font-weight:700; color:var(--gold-ink); font-size:.8rem; letter-spacing:.1em; }
.trust-card h3{ font-family:'Space Grotesk'; font-weight:700; font-size:1.2rem; margin:.7rem 0 .5rem; }
.trust-card p{ color:var(--t-body); font-size:.92rem; }

/* testimonial */
.testimonial{ max-width:760px; margin:0 auto; text-align:center; }
.testimonial .q{ font-family:'Space Grotesk'; font-weight:600; font-size:clamp(1.3rem,2.6vw,1.85rem); line-height:1.45; letter-spacing:-.01em; }
.testimonial .q::before{ content:"“"; color:var(--gold); }
.testimonial .q::after{ content:"”"; color:var(--gold); }
.testimonial .who{ margin-top:1.3rem; color:var(--t-mute); font-size:.9rem; }

/* page CTA */
.page-cta{ background:var(--ink); color:var(--t-light); text-align:center; }
.page-cta h2{ font-family:'Space Grotesk'; font-weight:700; font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:-.015em; }
.page-cta p{ color:var(--t-mute-d); margin:.8rem 0 1.7rem; }
.page-cta .cta-btns{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

@media(max-width:880px){
  .page-hero{ padding:7.5rem 0 3.5rem; }
  #kproj .proj-grid{ grid-template-columns:1fr; }
  .proc-grid{ grid-template-columns:repeat(2,1fr); }
  .trust-grid{ grid-template-columns:1fr; }
  .ph-stats{ gap:1.8rem; }
}

/* ── KIDS detail: bright / playful hero variant ── */
.page-hero.light{ background:var(--paper); color:var(--t-dark); }
.page-hero.light::before{
  background:
    repeating-linear-gradient(135deg, rgba(27,21,18,.022) 0 1px, transparent 1px 15px),
    radial-gradient(55% 60% at 94% 6%, var(--coral-soft), transparent 62%),
    radial-gradient(42% 50% at 3% 96%, #FBF1D8, transparent 60%);
}
.page-hero.light .breadcrumb, .page-hero.light .breadcrumb a{ color:var(--t-mute); }
.page-hero.light .breadcrumb a:hover{ color:var(--coral); }
.ph-pill{ display:inline-flex; align-items:center; gap:.5rem; background:var(--coral-soft); color:#C84B2B;
  font-family:'Space Grotesk'; font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:.5rem 1.05rem; border-radius:99px; margin-bottom:1.5rem; }
.page-hero.light h1{ color:var(--t-dark); font-size:clamp(3rem,9.5vw,6.6rem); line-height:.9; }
.page-hero.light h1 .accent{ color:var(--coral); }
.page-hero.light .ph-sub{ color:var(--t-body); }
.partner-badge{ display:inline-flex; align-items:center; gap:1rem; margin-top:1.9rem;
  background:rgba(42,59,85,.05); border:1px solid rgba(42,59,85,.14); border-radius:12px; padding:.85rem 1.25rem; }
.partner-badge .co{ font-family:'Space Grotesk'; font-weight:700; color:var(--navy); letter-spacing:.02em; }
.partner-badge .bar{ width:1px; height:18px; background:rgba(42,59,85,.22); }
.partner-badge .role{ color:var(--t-mute); font-size:.9rem; }
.page-hero.light .ph-stats{ border-top:1px solid var(--line); padding-top:1.9rem; margin-top:2.6rem; }
.page-hero.light .ph-stat .n{ color:var(--navy); }
.page-hero.light .ph-stat .l{ color:var(--t-mute); }

/* kids CTA — solid coral band */
.page-cta.warm{ background:var(--coral); color:#fff; }
.page-cta.warm p{ color:rgba(255,255,255,.88); }
.page-cta.warm .btn-primary{ background:#fff; color:var(--coral); }
.page-cta.warm .btn-primary:hover{ background:#fff; filter:brightness(.96); }
.page-cta.warm .btn-ghost{ border-color:rgba(255,255,255,.6); color:#fff; }
.page-cta.warm .btn-ghost:hover{ background:#fff; color:var(--coral); border-color:#fff; }

/* featured tracks header + description line */
.tracks-head{ margin-bottom:1.5rem; font-family:'Space Grotesk'; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.tracks-head .te{ font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--t-mute); }
.tracks-head .td{ font-size:.74rem; letter-spacing:.03em; color:var(--t-mute); }
.track-desc{ font-size:.82rem; color:var(--t-mute); margin-top:.15rem; }
.track-row{ padding:1.15rem 1.35rem; }

/* ── KIDS detail page: warm coral accents ── */
body.kids .sec-eyebrow{ color:var(--coral); }
body.kids .sec-bar{ background:var(--coral); }

/* ── PROCESS timeline (circular emoji steps) ── */
.proc-timeline{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:3rem; }
.proc-timeline::before{ content:""; position:absolute; top:38px; left:10%; right:10%; height:2px; background:var(--line); z-index:1; }
.pstep{ position:relative; text-align:center; z-index:2; }
.pstep .pic{ width:76px; height:76px; border-radius:50%; background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; font-size:1.85rem; margin:0 auto; box-shadow:0 6px 16px rgba(27,21,18,.05); }
.pstep .pstepn{ font-family:'Space Grotesk'; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--t-mute); margin-top:1.1rem; }
.pstep .pname{ font-family:'Space Grotesk'; font-weight:700; font-size:1.05rem; margin:.45rem 0 .5rem; }
.pstep .pdesc{ font-size:.82rem; color:var(--t-body); max-width:21ch; margin:0 auto; line-height:1.55; }
@media(max-width:880px){ .proc-timeline{ grid-template-columns:repeat(2,1fr); gap:2.2rem 1rem; } .proc-timeline::before{ display:none; } }
@media(max-width:480px){ .proc-timeline{ grid-template-columns:1fr; } }

/* ── HERO mascot (StudioSeiHa character) ── */
.hero-mascot{ position:absolute; right:8%; top:54%; transform:translateY(-50%); z-index:2; width:min(280px,25vw); pointer-events:none; }
.hero-mascot .mascot-svg{ width:100%; height:auto; animation:bob 3.4s ease-in-out infinite; transform-origin:center bottom; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-13px) rotate(2deg); } }
.hero-mascot .note{ position:absolute; font-size:1.5rem; opacity:0; animation:floatNote 3.6s ease-in infinite; }
.hero-mascot .n1{ left:0%; top:34%; color:var(--gold); animation-delay:0s; }
.hero-mascot .n2{ left:80%; top:22%; color:var(--coral); animation-delay:1.3s; }
.hero-mascot .n3{ left:48%; top:4%; color:var(--navy); animation-delay:2.4s; }
@keyframes floatNote{ 0%{ opacity:0; transform:translateY(10px) scale(.7); } 25%{ opacity:.85; } 100%{ opacity:0; transform:translateY(-56px) scale(1.1); } }
@media(max-width:980px){ .hero-mascot{ display:none; } }
@media(prefers-reduced-motion:reduce){ .hero-mascot .mascot-svg{ animation:none; } .hero-mascot .note{ display:none; } }

/* ── REVIEWS (확장 가능한 후기 그리드) ── */
#kreviews{ background:var(--cream); }
.reviews-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.4rem; margin-top:2.6rem; }
.review-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2rem 2.1rem; display:flex; flex-direction:column; gap:1.1rem; }
.review-stars{ color:var(--gold); letter-spacing:3px; font-size:1.02rem; }
.review-text{ color:var(--t-body); font-size:1.02rem; line-height:1.72; flex:1; }
.review-text::before{ content:"“"; color:var(--coral); font-family:'Space Grotesk'; font-weight:700; margin-right:.1rem; }
.review-who .rn{ font-family:'Space Grotesk'; font-weight:700; }
.review-who .rp{ font-size:.85rem; color:var(--t-mute); margin-top:.15rem; }
.review-add{ border:1.6px dashed #D6C9B2; background:transparent; border-radius:var(--radius); padding:2rem; display:grid; place-items:center; text-align:center; gap:.7rem; cursor:pointer; transition:border-color .2s, background .2s; }
.review-add:hover{ border-color:var(--coral); background:var(--coral-soft); }
.review-add .ra-plus{ width:46px; height:46px; border-radius:50%; background:var(--coral); color:#fff; display:grid; place-items:center; font-size:1.5rem; font-weight:300; }
.review-add .ra-t{ font-family:'Space Grotesk'; font-weight:600; }
.review-add .ra-s{ font-size:.84rem; color:var(--t-mute); }

/* ── MODAL (popup) ── */
.modal-overlay{ position:fixed; inset:0; background:rgba(21,16,14,.55); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:500; padding:1.5rem; }
.modal-overlay.open{ display:flex; animation:mfade .2s ease; }
@keyframes mfade{ from{opacity:0} to{opacity:1} }
.modal{ background:var(--paper); border-radius:18px; width:min(520px,100%); max-height:90vh; overflow:auto; padding:2.3rem; position:relative; box-shadow:0 30px 80px rgba(21,16,14,.35); animation:mrise .25s cubic-bezier(.2,.7,.3,1); }
@keyframes mrise{ from{transform:translateY(18px);opacity:.6} to{transform:none;opacity:1} }
.modal-close{ position:absolute; top:1rem; right:1rem; width:34px; height:34px; border:none; border-radius:50%; background:var(--cream); color:var(--t-mute); font-size:1.2rem; cursor:pointer; display:grid; place-items:center; }
.modal-close:hover{ background:var(--line); color:var(--t-dark); }
.modal .m-eyebrow{ font-family:'Space Grotesk'; font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--coral); }
.modal h3{ font-family:'Space Grotesk'; font-weight:700; font-size:1.55rem; margin:.5rem 0 1.4rem; letter-spacing:-.01em; }
.modal .form-row{ margin-bottom:1rem; }
.modal label.form-label{ display:block; margin-bottom:.4rem; }
.modal .form-input, .modal .form-select, .modal .form-textarea{ margin-bottom:1rem; }
.modal .form-textarea{ min-height:120px; }
.rating-row{ display:flex; gap:.3rem; margin-bottom:1.2rem; font-size:1.7rem; color:var(--line); }
.rating-row .star{ cursor:pointer; transition:color .15s, transform .1s; }
.rating-row .star.on{ color:var(--gold); }
.rating-row .star:hover{ transform:scale(1.15); }
.modal .form-success{ margin-top:1rem; }
@media(max-width:880px){ .modal{ padding:1.8rem 1.5rem; } }

/* ── FEATURED PLAYER (dark focal player + playlist) ── */
.player{ display:grid; grid-template-columns:150px 1fr; gap:1.7rem; align-items:center;
  background:linear-gradient(135deg,#7E3B2B,#4A2018); color:#fff;
  border-radius:20px; padding:1.7rem; box-shadow:0 24px 60px rgba(27,21,18,.20); }
.player-cover{ width:150px; height:150px; border-radius:16px; background:linear-gradient(135deg,var(--coral),#F0925E);
  display:grid; place-items:center; position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.pc-emoji{ font-size:3.5rem; filter:drop-shadow(0 4px 10px rgba(0,0,0,.22)); }
.pc-eq{ position:absolute; bottom:14px; left:0; right:0; display:flex; gap:4px; justify-content:center; align-items:flex-end; height:22px; opacity:0; transition:opacity .3s; }
.pc-eq span{ width:4px; height:6px; background:rgba(255,255,255,.9); border-radius:2px; }
.player.playing .pc-eq{ opacity:1; }
.player.playing .pc-eq span{ animation:eq .9s ease-in-out infinite; }
.player.playing .pc-eq span:nth-child(2){ animation-delay:.15s; }
.player.playing .pc-eq span:nth-child(3){ animation-delay:.3s; }
.player.playing .pc-eq span:nth-child(4){ animation-delay:.45s; }
@keyframes eq{ 0%,100%{ height:6px; } 50%{ height:20px; } }
.player-meta .pm-cap{ font-family:'Space Grotesk'; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.player-meta .pm-title{ font-family:'Space Grotesk'; font-weight:700; font-size:1.6rem; margin-top:.3rem; letter-spacing:-.01em; }
.player-bar{ height:8px; background:rgba(255,255,255,.18); border-radius:99px; overflow:hidden; cursor:pointer; margin:1.4rem 0 1.05rem; }
.player-fill{ height:100%; width:0; background:linear-gradient(90deg,var(--coral),var(--gold)); border-radius:99px; transition:width .15s linear; }
.player-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.player-time{ font-family:'Space Grotesk'; font-size:.85rem; color:rgba(255,255,255,.78); font-variant-numeric:tabular-nums; min-width:88px; }
.player-ctrls{ display:flex; align-items:center; gap:.7rem; }
.pctrl{ border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; border-radius:50%; width:44px; height:44px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; line-height:1; transition:background .15s,transform .15s,border-color .15s; }
.pctrl:hover{ background:rgba(255,255,255,.12); }
.pctrl svg{ width:16px; height:16px; }
.pctrl .skip-n{ font-size:.5rem; font-weight:700; font-family:'Space Grotesk'; color:rgba(255,255,255,.8); }
.pctrl.pplay{ width:56px; height:56px; background:var(--coral); border-color:var(--coral); box-shadow:0 6px 18px rgba(232,101,78,.42); }
.pctrl.pplay:hover{ transform:scale(1.05); background:var(--coral); }
.pctrl.pplay svg{ width:20px; height:20px; }
.player-badge{ font-family:'Space Grotesk'; font-size:.62rem; font-weight:600; letter-spacing:.1em; color:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.22); border-radius:99px; padding:.32rem .72rem; }

/* playlist */
.playlist{ margin-top:1.5rem; display:flex; flex-direction:column; gap:.55rem; }
.pl-item{ display:flex; align-items:center; gap:1rem; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; padding:.9rem 1.15rem; cursor:pointer; font:inherit; transition:border-color .2s,background .2s,transform .15s; }
.pl-item:hover{ border-color:#E7C9BF; transform:translateX(2px); }
.pl-item.active{ border-color:var(--coral); background:var(--coral-soft); }
.pl-n{ font-family:'Space Grotesk'; font-size:.78rem; color:var(--t-mute); width:22px; flex:none; }
.pl-flag{ font-size:1.3rem; flex:none; }
.pl-info{ display:flex; flex-direction:column; flex:1; min-width:0; }
.pl-title{ font-weight:600; font-size:.95rem; }
.pl-cap{ font-size:.78rem; color:var(--t-mute); }
.pl-dur{ font-family:'Space Grotesk'; font-size:.76rem; color:var(--t-mute); flex:none; }
.pl-item.active .pl-n,.pl-item.active .pl-dur{ color:var(--coral); }

@media(max-width:680px){
  .player{ grid-template-columns:1fr; text-align:center; gap:1.3rem; }
  .player-cover{ width:118px; height:118px; margin:0 auto; }
  .player-cover .pc-emoji{ font-size:2.8rem; }
  .player-row{ justify-content:center; }
}

/* ============================================================
   AI MUSIC 페이지 (Navy + Gold 다크 테마)
   ============================================================ */
.ai-sec{ background:#141B29; color:#E7ECF4; }
.ai-sec--alt{ background:#0E131D; color:#E7ECF4; }
.ai-sec .sec-eyebrow{ color:var(--gold); }
.ai-sec .sec-title{ color:#fff; }
.ai-sec .sec-bar{ background:var(--gold); }
.ai-sec p{ color:#AEB8C8; }

/* ── TEAM PREVIEW: 다이나믹 멤버 카드 ── */
.tm-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.3rem; }
.tm-card{ display:block; text-align:center; color:inherit; }
.tm-photo{ position:relative; aspect-ratio:1; border-radius:var(--radius); overflow:hidden;
  background:var(--cream); border:1px solid var(--line); display:grid; place-items:center;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .35s; }
.tm-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.3,1); }
.tm-initial{ font-family:'Space Grotesk'; font-weight:700; font-size:1.9rem; color:var(--navy); transition:color .3s; }
.tm-photo::after{ content:""; position:absolute; inset:0; opacity:0;
  background:linear-gradient(to top, rgba(232,101,78,.45), transparent 55%); transition:opacity .35s; }
.tm-arrow{ position:absolute; right:.7rem; bottom:.7rem; z-index:2; width:34px; height:34px; border-radius:50%;
  background:var(--coral); color:#fff; display:grid; place-items:center; font-family:'Space Grotesk'; font-weight:700;
  opacity:0; transform:translateY(8px); transition:opacity .35s, transform .35s; }
.tm-name{ font-family:'Space Grotesk'; font-weight:700; margin-top:.9rem; font-size:1rem; transition:color .25s; }
.tm-role{ font-size:.8rem; color:var(--t-mute); font-family:'Space Grotesk'; margin-top:.15rem; }

.tm-card:hover .tm-photo{ transform:translateY(-8px); border-color:var(--coral); box-shadow:0 18px 36px rgba(232,101,78,.18); }
.tm-card:hover .tm-photo img{ transform:scale(1.08); }
.tm-card:hover .tm-photo::after{ opacity:1; }
.tm-card:hover .tm-arrow{ opacity:1; transform:translateY(0); }
.tm-card:hover .tm-name{ color:var(--coral); }
.tm-card:hover .tm-initial{ color:var(--coral); }

.rd5{ transition-delay:.48s; }

@media(max-width:880px){ .tm-grid{ grid-template-columns:repeat(3,1fr); gap:1rem; } }
@media(max-width:520px){ .tm-grid{ grid-template-columns:repeat(2,1fr); } }
@media(prefers-reduced-motion:reduce){
  .tm-card:hover .tm-photo,.tm-card:hover .tm-photo img,.tm-card:hover .tm-arrow{ transform:none; }
}

/* ── KIDS Listen: 트랙 카드 그리드 (풀폭 리스트 대체) ── */
.ktrack-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.ktrack-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.4rem 1.3rem;
  display:flex; flex-direction:column; gap:.45rem; transition:border-color .2s, box-shadow .2s, transform .2s; }
.ktrack-card:hover{ border-color:#E7C9BF; box-shadow:0 14px 30px rgba(232,101,78,.1); transform:translateY(-2px); }
.ktrack-head{ display:flex; align-items:center; justify-content:space-between; }
.ktrack-flag{ width:50px; height:50px; border-radius:14px; background:var(--coral-soft); display:grid; place-items:center; font-size:1.55rem; }
.ktrack-badge{ font-family:'Space Grotesk'; font-size:.6rem; font-weight:600; letter-spacing:.08em;
  color:var(--gold-ink); background:rgba(190,154,69,.12); border-radius:99px; padding:.25rem .55rem; }
.ktrack-cap{ font-family:'Space Grotesk'; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--t-mute); margin-top:.4rem; }
.ktrack-title{ font-family:'Space Grotesk'; font-weight:700; font-size:1.15rem; letter-spacing:-.01em; }

/* 카드 안에서 audio-ctrl 가로폭 채우기 */
.ktrack-card .audio-ctrl{ margin-top:.7rem; gap:.7rem; }
.ktrack-card .audio-ctrl .mini-bar{ flex:1; width:auto; }
.ktrack-card .audio-ctrl .track-time{ min-width:54px; }

@media(max-width:880px){ .ktrack-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .ktrack-grid{ grid-template-columns:1fr; } }
.ai-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.6rem; }
.ai-card{ background:rgba(255,255,255,.04); border:1px solid rgba(190,154,69,.28); border-radius:16px; padding:1.9rem; }
.ai-card .ic{ width:46px; height:46px; border-radius:12px; background:rgba(190,154,69,.14); display:grid; place-items:center; font-size:1.4rem; margin-bottom:1rem; }
.ai-card h3{ font-family:'Space Grotesk'; font-weight:700; font-size:1.2rem; color:#fff; margin-bottom:.5rem; }
.ai-card p{ font-size:.92rem; color:#AEB8C8; }
.ai-tools{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
.ai-tool{ font-family:'Space Grotesk'; font-size:.82rem; font-weight:500; color:#E7ECF4; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:99px; padding:.5rem 1rem; }
.ai-tool b{ color:var(--gold); font-weight:700; }

/* AI 예시 트랙 (다크) */
.ai-track-list{ display:flex; flex-direction:column; gap:.7rem; margin-top:2.4rem; }
.ai-track{ display:flex; align-items:center; gap:1.1rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:1.1rem 1.35rem; transition:border-color .2s; }
.ai-track:hover{ border-color:rgba(190,154,69,.4); }
.ai-track .track-flag{ width:46px;height:46px;border-radius:11px;background:rgba(190,154,69,.16);display:grid;place-items:center;font-size:1.35rem;flex:none; }
.ai-track .track-info{ flex:1; min-width:0; }
.ai-track .track-cap{ font-family:'Space Grotesk'; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:#8A93A3; }
.ai-track .track-title{ font-weight:600; font-size:.97rem; color:#fff; margin:.05rem 0 .15rem; }
.ai-track .track-desc{ font-size:.82rem; color:#8A93A3; }
.ai-sec .play-btn{ background:var(--gold); box-shadow:0 4px 12px rgba(190,154,69,.35); }
.ai-sec .play-btn:hover{ box-shadow:0 6px 16px rgba(190,154,69,.45); }
.ai-sec .mini-bar{ background:rgba(255,255,255,.16); }
.ai-sec .mini-fill{ background:linear-gradient(90deg,var(--gold),#E3C880); }
.ai-sec .track-time{ color:#8A93A3; }

/* 저작권 안내 카드 */
.lic-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:2.6rem; }
.lic-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-left:3px solid var(--gold); border-radius:14px; padding:1.9rem; }
.lic-card h3{ font-family:'Space Grotesk'; font-weight:700; font-size:1.25rem; color:#fff; margin-bottom:.4rem; }
.lic-card .lic-tag{ font-family:'Space Grotesk'; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.lic-card ul{ list-style:none; margin-top:1rem; display:flex; flex-direction:column; gap:.7rem; }
.lic-card li{ position:relative; padding-left:1.3rem; font-size:.92rem; color:#C2CAD8; line-height:1.6; }
.lic-card li::before{ content:"›"; position:absolute; left:0; color:var(--gold); font-weight:700; }
.lic-note{ margin-top:2rem; padding:1.1rem 1.3rem; background:rgba(190,154,69,.08); border:1px solid rgba(190,154,69,.25); border-radius:12px; font-size:.85rem; line-height:1.65; color:#C2CAD8; }
.lic-note b{ color:var(--gold); }
.ai-cta{ background:#0E131D; color:#fff; text-align:center; }
.ai-cta h2{ font-family:'Space Grotesk'; font-weight:700; font-size:clamp(1.8rem,4vw,2.6rem); }
.ai-cta p{ color:#AEB8C8; margin:.8rem 0 1.7rem; }
.ai-cta .btn-primary{ background:var(--gold); color:#1B2436; }
.ai-cta .btn-primary:hover{ filter:brightness(1.05); }
.ai-cta .btn-ghost{ border-color:rgba(255,255,255,.5); color:#fff; }
.ai-cta .btn-ghost:hover{ background:#fff; color:#1B2436; border-color:#fff; }
@media(max-width:880px){ .ai-grid{ grid-template-columns:1fr; } .lic-grid{ grid-template-columns:1fr; } }

/* ============================================================
   SEIHI 페이지 (로드맵 + 출시 알림)
   ============================================================ */
.roadmap{ position:relative; margin-top:3rem; padding-left:2rem; }
.roadmap::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--gold),var(--line)); }
.rm-item{ position:relative; padding:0 0 2.2rem 1.8rem; }
.rm-item:last-child{ padding-bottom:0; }
.rm-item::before{ content:""; position:absolute; left:-2rem; top:4px; width:16px; height:16px; border-radius:50%; background:var(--paper); border:3px solid var(--gold); }
.rm-item.done::before{ background:var(--gold); }
.rm-phase{ font-family:'Space Grotesk'; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); }
.rm-title{ font-family:'Space Grotesk'; font-weight:700; font-size:1.2rem; margin:.3rem 0 .4rem; }
.rm-desc{ color:var(--t-body); font-size:.95rem; max-width:52ch; }
.notify-band{ background:linear-gradient(135deg,#2A3B55,#1B2436); color:#fff; border-radius:22px; padding:3rem; text-align:center; margin-top:1rem; }
.notify-band .nb-eyebrow{ font-family:'Space Grotesk'; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.notify-band h2{ font-family:'Space Grotesk'; font-weight:700; font-size:clamp(1.6rem,3.6vw,2.3rem); margin:.6rem 0 .6rem; }
.notify-band p{ color:rgba(255,255,255,.8); margin-bottom:1.6rem; }
.notify-form{ display:flex; gap:.6rem; max-width:440px; margin:0 auto; flex-wrap:wrap; }
.notify-form input{ flex:1; min-width:200px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; border-radius:10px; padding:.85rem 1rem; font:inherit; }
.notify-form input::placeholder{ color:rgba(255,255,255,.5); }
.notify-form button{ border:0; background:var(--gold); color:#1B2436; font-family:'Space Grotesk'; font-weight:700; border-radius:10px; padding:.85rem 1.5rem; cursor:pointer; }
.notify-success{ display:none; margin-top:1rem; color:var(--gold); font-weight:600; }

/* ============================================================
   TEAM 페이지 (1차)
   ============================================================ */
.team-page-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:3rem; }
.tp-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:2rem; text-align:center; transition:transform .2s, box-shadow .2s; }
.tp-card:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(27,21,18,.08); }
.tp-avatar{ width:104px; height:104px; border-radius:50%; margin:0 auto 1.2rem; overflow:hidden; background:var(--cream); border:1px solid var(--line); display:grid; place-items:center; font-family:'Space Grotesk'; font-weight:700; font-size:2rem; color:var(--navy); }
.tp-avatar img{ width:100%; height:100%; object-fit:cover; }
.tp-name{ font-family:'Space Grotesk'; font-weight:700; font-size:1.2rem; }
.tp-role{ font-family:'Space Grotesk'; font-size:.82rem; color:var(--coral); margin:.3rem 0 .8rem; letter-spacing:.02em; }
.tp-bio{ font-size:.9rem; color:var(--t-body); line-height:1.6; }
@media(max-width:880px){ .team-page-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .team-page-grid{ grid-template-columns:1fr; } }

/* ── AI Music: 더 큰 제목 ── */
.page-hero.ai-hero h1{ font-size:clamp(3.4rem,11vw,7.2rem); letter-spacing:-.035em; }
.ai-sec .sec-eyebrow{ font-size:.8rem; }
.ai-sec .sec-title{ font-size:clamp(2.2rem,5.4vw,3.7rem); line-height:1.03; letter-spacing:-.02em; }

/* ── VS 비교 ── */
.vs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.8rem; position:relative; }
.vs-card{ border-radius:18px; padding:2.2rem; }
.vs-card--them{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); }
.vs-card--us{ background:linear-gradient(160deg,rgba(190,154,69,.18),rgba(190,154,69,.04)); border:1px solid rgba(190,154,69,.55); box-shadow:0 22px 55px rgba(190,154,69,.12); }
.vs-tag{ font-family:'Space Grotesk'; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.vs-card--them .vs-tag{ color:#8A93A3; }
.vs-card--us .vs-tag{ color:var(--gold); }
.vs-card h3{ font-family:'Space Grotesk'; font-weight:700; font-size:1.55rem; margin:.55rem 0 1.4rem; color:#fff; letter-spacing:-.01em; }
.vs-card ul{ list-style:none; display:flex; flex-direction:column; gap:.9rem; }
.vs-card li{ position:relative; padding-left:1.8rem; font-size:.95rem; line-height:1.55; }
.vs-card--them li{ color:#98A1B0; }
.vs-card--them li::before{ content:"✕"; position:absolute; left:0; top:1px; color:#6E7686; font-weight:700; }
.vs-card--us li{ color:#EDF1F7; }
.vs-card--us li::before{ content:"✓"; position:absolute; left:0; top:1px; color:var(--gold); font-weight:700; }
.vs-badge{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; width:56px; height:56px; border-radius:50%; background:#0E131D; border:1.5px solid var(--gold); color:var(--gold); font-family:'Space Grotesk'; font-weight:700; font-size:.95rem; display:grid; place-items:center; box-shadow:0 8px 20px rgba(0,0,0,.4); }
@media(max-width:880px){ .vs-grid{ grid-template-columns:1fr; } .vs-badge{ position:static; transform:none; margin:.2rem auto; } }

/* ── 대제목 가독성: 줄바꿈 균형 ── */
.sec-title{ text-wrap:balance; }

/* ── AI HERO: 풀스크린 + 캔버스 애니메이션 ── */
.ai-hero-full{ min-height:100svh; display:flex; align-items:center; padding:0; }
.ai-hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.ai-hero-full .wrap{ position:relative; z-index:2; }
.ai-hero-full .ph-eyebrow{ color:var(--gold); }
.ai-hero-full .ph-sub{ max-width:48ch; }
.ai-hero .hero-btns{ display:flex; gap:.8rem; margin-top:2.2rem; flex-wrap:wrap; }
.ai-hero .btn-primary{ background:var(--gold); color:#1B2436; }
.ai-hero .btn-primary:hover{ filter:brightness(1.06); }
.ai-hero .btn-ghost{ border-color:rgba(255,255,255,.5); color:#fff; }
.ai-hero .btn-ghost:hover{ background:#fff; color:#1B2436; border-color:#fff; }
.ai-scroll-cue{ position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%); z-index:2; font-family:'Space Grotesk'; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5); animation:cueBob 2s ease-in-out infinite; }
@keyframes cueBob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,7px); } }

/* ── 시연 영상(움짤) 자리 ── */
.vs-demo{ margin-top:2.4rem; }
.vs-demo-note{ color:#AEB8C8; font-size:.92rem; margin-bottom:1rem; }
.vs-demo-frame{ aspect-ratio:16/9; border-radius:18px; border:1.5px dashed rgba(190,154,69,.45); background:rgba(255,255,255,.03); display:grid; place-items:center; text-align:center; padding:1.5rem; }
.vs-demo-frame video, .vs-demo-frame img{ width:100%; height:100%; object-fit:cover; border-radius:16px; }
.vs-demo-label{ font-family:'Space Grotesk'; font-size:.95rem; color:#9AA3B2; max-width:32ch; line-height:1.6; }

/* ── AI 페이지 플레이어 색 보정(골드) ── */
.ai-sec .player{ background:linear-gradient(135deg,#1E2A40,#141D2B); border:1px solid rgba(190,154,69,.22); }
.ai-sec .player-cover{ background:linear-gradient(135deg,var(--gold),#E3C880); }
.ai-sec .pctrl.pplay{ background:var(--gold); border-color:var(--gold); box-shadow:0 6px 18px rgba(190,154,69,.42); }
.ai-sec .pctrl.pplay:hover{ background:var(--gold); }
.ai-sec .player-fill{ background:linear-gradient(90deg,var(--gold),#E3C880); }
.ai-sec .pl-item{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
.ai-sec .pl-item:hover{ border-color:rgba(190,154,69,.4); }
.ai-sec .pl-item.active{ background:rgba(190,154,69,.12); border-color:var(--gold); }
.ai-sec .pl-title{ color:#fff; }
.ai-sec .pl-cap, .ai-sec .pl-n, .ai-sec .pl-dur{ color:#8A93A3; }
.ai-sec .pl-item.active .pl-n, .ai-sec .pl-item.active .pl-dur{ color:var(--gold); }

/* VS 전문가 카드 강조 */
.vs-card--us li b{ color:var(--gold); font-weight:700; }

/* ── 사용 도구 스택 ── */
.ai-stack{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.1rem; margin-top:2.8rem; }
.stack-item{ text-align:center; }
.stack-logo{ width:74px; height:74px; border-radius:18px; margin:0 auto .75rem; display:grid; place-items:center;
  background:rgba(255,255,255,.04); border:1px solid rgba(190,154,69,.32); font-family:'Space Grotesk'; font-weight:700; font-size:1.35rem; color:var(--gold);
  transition:transform .2s, border-color .2s, background .2s; }
.stack-item:hover .stack-logo{ transform:translateY(-3px); border-color:var(--gold); background:rgba(190,154,69,.1); }
.stack-name{ font-family:'Space Grotesk'; font-size:.82rem; color:#AEB8C8; letter-spacing:.01em; }
@media(max-width:880px){ .ai-stack{ grid-template-columns:repeat(3,1fr); gap:1.6rem 1rem; } }
@media(max-width:420px){ .ai-stack{ grid-template-columns:repeat(2,1fr); } }

/* ── 가상 견적 버튼 (CTA 배경별 색 보정) ── */
.btn-estimate{ background:var(--gold); color:#241c18; }
.btn-estimate:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.page-cta.warm .btn-estimate{ background:var(--ink); color:#fff; }      /* Kids: 코랄 배경 → 잉크 */
.page-cta.warm .btn-estimate:hover{ background:#2a211c; filter:none; }
.ai-cta .btn-estimate{ background:var(--coral); color:#fff; }          /* AI: 네이비 배경 → 코랄 */
.ai-cta .btn-estimate:hover{ background:#2a211c; filter:none; }

/* ── KIDS Stack: 우리가 쓰는 도구 (라이트/웜) ── */
#kstack{ background:var(--paper); }
.kstack{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.1rem; margin-top:2.8rem; }
.kstack-item{ text-align:center; }
.kstack-logo{ width:74px; height:74px; border-radius:18px; margin:0 auto .75rem; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); font-family:'Space Grotesk'; font-weight:700; font-size:1.35rem; color:var(--navy);
  box-shadow:0 6px 16px rgba(27,21,18,.05); transition:transform .2s, border-color .2s, color .2s, box-shadow .2s; }
.kstack-item:hover .kstack-logo{ transform:translateY(-3px); border-color:var(--coral); color:var(--coral); box-shadow:0 12px 26px rgba(232,101,78,.14); }
.kstack-name{ font-family:'Space Grotesk'; font-size:.82rem; color:var(--t-body); letter-spacing:.01em; }
@media(max-width:880px){ .kstack{ grid-template-columns:repeat(3,1fr); gap:1.6rem 1rem; } }
@media(max-width:420px){ .kstack{ grid-template-columns:repeat(2,1fr); } }

/* ── AI 페이지 섹션 경계 자연스럽게 (공통 seam 색으로 그라데이션) ── */
.ai-sec{ background:linear-gradient(180deg,#111826 0%,#141B29 16%,#141B29 84%,#111826 100%); }
.ai-sec--alt{ background:linear-gradient(180deg,#111826 0%,#0E131D 16%,#0E131D 84%,#111826 100%); }
.ai-cta{ background:linear-gradient(180deg,#111826 0%,#0E131D 28%); }
.ai-hero-full::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:160px; z-index:1; pointer-events:none; background:linear-gradient(to bottom, transparent, #111826); }

/* ── 경계 정리: 히어로→비교만 그라데이션, 나머지는 옅은 경계선 ── */
.ai-sec{ background:#141B29; }
.ai-sec--alt{ background:#0E131D; }
.ai-cta{ background:#0E131D; }
.ai-sec, .ai-sec--alt, .ai-cta{ border-top:1px solid rgba(255,255,255,.07); }
.ai-blend{ background:linear-gradient(180deg,#111826 0%,#141B29 24%); border-top:none; }

/* ── 호버 마이크로 인터랙션 (카드류) ── */
.ai-card{ transition:transform .22s ease, border-color .22s ease, background .22s ease; }
.ai-card:hover{ transform:translateY(-4px); border-color:rgba(190,154,69,.55); background:rgba(190,154,69,.06); }
.ai-card .ic{ transition:transform .22s ease; }
.ai-card:hover .ic{ transform:scale(1.08) rotate(-3deg); }
.lic-card{ transition:transform .2s ease, border-color .2s ease; }
.lic-card:hover{ transform:translateY(-3px); border-color:rgba(190,154,69,.45); }
.vs-card{ transition:transform .2s ease, box-shadow .2s ease; }
.vs-card--them:hover{ transform:translateY(-3px); }
.vs-card--us:hover{ transform:translateY(-4px); box-shadow:0 28px 64px rgba(190,154,69,.18); }
@media(prefers-reduced-motion:reduce){
  .ai-card,.ai-card .ic,.lic-card,.vs-card{ transition:none; }
  .ai-card:hover,.lic-card:hover,.vs-card:hover,.ai-card:hover .ic{ transform:none; }
}

/* ── ESTIMATE PAGE (견적 페이지) ── */
#estimate-calc{ background:var(--paper); padding-bottom:7rem; }
.est-intro-note{ color:var(--t-body); max-width:62ch; margin-bottom:2.4rem; font-size:.95rem; line-height:1.7; }
.est-intro-note b{ color:var(--t-dark); }
.est-cats{ display:flex; flex-direction:column; gap:1.1rem; }
.est-cat{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.5rem 1.6rem; transition:border-color .2s, box-shadow .2s; }
.est-cat.active{ border-color:var(--coral); box-shadow:0 14px 34px rgba(232,101,78,.1); }
.est-cat-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.est-cat-name{ font-family:'Space Grotesk'; font-weight:700; font-size:1.25rem; }
.est-cat-desc{ font-size:.84rem; color:var(--t-mute); margin-top:.2rem; }
.est-cat-sub{ font-family:'Space Grotesk'; font-weight:700; font-size:1.2rem; color:var(--coral); white-space:nowrap; }
.est-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin-bottom:1.1rem; }
.est-tier{ border:1px solid var(--line); border-radius:12px; padding:.8rem .9rem; cursor:pointer; text-align:left; background:var(--paper); transition:border-color .15s, background .15s; }
.est-tier:hover{ border-color:var(--coral); }
.est-tier.on{ border-color:var(--coral); background:var(--coral-soft); }
.est-tier .ti-t{ font-family:'Space Grotesk'; font-weight:700; font-size:.92rem; }
.est-tier .ti-p{ font-size:.78rem; color:var(--t-mute); margin-top:.2rem; }
.est-tier.on .ti-p{ color:#C84B2B; }
.est-qtys{ display:flex; gap:1.8rem; flex-wrap:wrap; }
.est-qty{ display:flex; align-items:center; gap:.7rem; }
.est-qty .ql{ font-family:'Space Grotesk'; font-size:.84rem; color:var(--t-body); }
.stepper{ display:flex; align-items:center; gap:.25rem; }
.stepper button{ width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--paper); cursor:pointer; font-size:1.05rem; color:var(--t-dark); display:grid; place-items:center; transition:border-color .15s, color .15s; }
.stepper button:hover{ border-color:var(--coral); color:var(--coral); }
.stepper input{ width:48px; text-align:center; border:1px solid var(--line); border-radius:8px; padding:.35rem; font:inherit; font-family:'Space Grotesk'; font-weight:600; }

.est-total-bar{ position:sticky; bottom:0; z-index:50; background:rgba(252,249,243,.92); backdrop-filter:blur(10px); border-top:1px solid var(--line); }
.est-total-inner{ display:flex; justify-content:space-between; align-items:center; gap:1.2rem; padding-top:1.1rem; padding-bottom:1.1rem; flex-wrap:wrap; }
.ett-label{ font-family:'Space Grotesk'; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--t-mute); }
.ett-amount{ font-family:'Space Grotesk'; font-weight:700; font-size:1.8rem; color:var(--coral); letter-spacing:-.01em; }
.ett-btns{ display:flex; gap:.6rem; flex-wrap:wrap; }
.est-summary{ background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; font-family:'Space Grotesk'; font-size:.82rem; line-height:1.7; color:var(--t-dark); white-space:pre-wrap; margin-bottom:1.3rem; }
@media(max-width:680px){
  .est-tiers{ grid-template-columns:1fr; }
  .ett-btns{ width:100%; }
  .ett-btns .btn{ flex:1; justify-content:center; }
}
/* ── 견적: 작업 단계 공정 흐름 (타임라인) ── */
.est-cat{ position:relative; overflow:hidden; }
.est-cat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--coral);
  transform:scaleY(0); transform-origin:top; transition:transform .35s cubic-bezier(.2,.7,.3,1); }
.est-cat.active::before{ transform:scaleY(1); }

.est-stages-label{ font-family:'Space Grotesk'; font-size:.74rem; font-weight:600; letter-spacing:.04em; color:var(--t-mute); margin-bottom:.4rem; }
.est-stages-label span{ font-weight:400; }

.est-flow{ position:relative; margin-bottom:1.1rem; }
.est-flow::before{ content:""; position:absolute; left:13px; top:18px; bottom:18px; width:2px; background:var(--line); }
.est-srow{ display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:.9rem; padding:.55rem 0; cursor:pointer; position:relative; }
.est-dot{ width:14px; height:14px; border-radius:50%; border:2px solid #D9CEBC; background:#fff; margin-left:6px; z-index:1; transition:background .2s, border-color .2s, box-shadow .2s; }
.est-srow:hover .est-dot{ border-color:var(--coral); }
.est-srow.on .est-dot{ background:var(--coral); border-color:var(--coral); box-shadow:0 0 0 4px rgba(232,101,78,.14); }
.est-sname{ font-family:'Space Grotesk'; font-size:.92rem; font-weight:500; color:var(--t-mute); transition:color .2s; }
.est-srow.on .est-sname{ color:var(--t-dark); }
.est-sprice{ font-size:.85rem; color:var(--t-mute-d); font-variant-numeric:tabular-nums; transition:color .2s; }
.est-srow.on .est-sprice{ color:#C84B2B; font-weight:500; }

.ett-amount{ font-variant-numeric:tabular-nums; }

@media(prefers-reduced-motion:reduce){ .est-cat::before{ transition:none; } }

/* ============================================================
   TEAM 상세 — 크림 베이스 + 네이비·골드 포인트 (밝은 톤)
   ============================================================ */
#team{ background:var(--cream); }

.team-roster{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:1rem; }
.tmem{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:1.6rem;
  cursor:pointer; display:flex; flex-direction:column; gap:.7rem; min-height:200px;
  box-shadow:0 1px 2px rgba(27,21,18,.03);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  opacity:0; animation:tmemIn .55s cubic-bezier(.2,.7,.3,1) forwards; }
.tmem:hover{ transform:translateY(-4px); border-color:var(--gold); box-shadow:0 18px 38px rgba(42,59,85,.12); }
.tmem:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.tmem:nth-child(1){animation-delay:.05s}.tmem:nth-child(2){animation-delay:.12s}
.tmem:nth-child(3){animation-delay:.19s}.tmem:nth-child(4){animation-delay:.26s}
.tmem:nth-child(5){animation-delay:.33s}.tmem:nth-child(6){animation-delay:.40s}
@keyframes tmemIn{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

.tmem-top{ display:flex; align-items:center; gap:.9rem; }
.tmem-av{ width:62px; height:62px; border-radius:14px; overflow:hidden; flex:none; background:#1a0d0c; border:1px solid var(--line); }
.tmem-av img{ width:100%; height:100%; object-fit:cover; }
.tmem-name{ font-family:'Space Grotesk'; font-weight:700; font-size:1.12rem; color:var(--navy); }
.tmem-en{ font-size:.78rem; color:var(--t-mute); font-family:'Space Grotesk'; margin-top:.05rem; }
.tmem-tag{ align-self:flex-start; font-family:'Space Grotesk'; font-size:.62rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#1B2436; background:var(--gold); padding:.28rem .6rem; border-radius:99px; }
.tmem-bio{ font-size:.88rem; color:var(--t-body); line-height:1.6; }
.tmem-view{ margin-top:auto; font-family:'Space Grotesk'; font-size:.8rem; font-weight:600; color:var(--gold-ink);
  display:inline-flex; align-items:center; gap:.3rem; transition:gap .2s; }
.tmem:hover .tmem-view{ gap:.6rem; }

/* 프로필 팝업 — 크게 + 밝게 */
.tprof-modal{ background:var(--paper); color:var(--t-body); width:min(1040px,93vw); max-width:none; max-height:92vh; overflow:auto; padding:3rem 3.4rem; border:1px solid var(--line); }
.tprof-modal .modal-close{ width:42px; height:42px; font-size:1.5rem; background:var(--cream); color:var(--t-mute); }
.tprof-modal .modal-close:hover{ background:#EFE7D7; color:var(--navy); }
.tprof-head{ display:flex; align-items:center; gap:1.6rem; margin-bottom:2rem; padding-bottom:1.8rem; border-bottom:1px solid var(--line); }
.tprof-av{ width:104px; height:104px; border-radius:20px; overflow:hidden; background:#1a0d0c; border:1px solid var(--line); flex:none; }
.tprof-av img{ width:100%; height:100%; object-fit:cover; }
.tprof-name{ font-family:'Space Grotesk'; font-weight:700; font-size:2rem; color:var(--navy); }
.tprof-en{ font-size:1rem; color:var(--t-mute); margin-top:.15rem; }
.tprof-role{ display:inline-block; margin-top:.55rem; font-family:'Space Grotesk'; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#1B2436; background:var(--gold); padding:.34rem .75rem; border-radius:99px; }
.tprof-sec{ margin-top:2rem; }
.tprof-sec h4{ font-family:'Space Grotesk'; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:.7rem; }
.tprof-bio{ color:var(--t-body); font-size:1.06rem; line-height:1.85; }
.tprof-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }
.tprof-tag{ font-family:'Space Grotesk'; font-size:.8rem; color:var(--navy); background:rgba(42,59,85,.06); border:1px solid var(--line); border-radius:99px; padding:.38rem .85rem; }
.tprof-disc{ display:flex; flex-direction:column; gap:1.4rem; }
.tprof-disc-item{ border-left:3px solid var(--gold); padding-left:1.1rem; }
.tprof-disc-title{ font-family:'Space Grotesk'; font-weight:700; font-size:1.12rem; color:var(--navy); }
.tprof-disc-role{ font-size:.86rem; color:var(--t-mute); margin-top:.15rem; }
.tprof-disc-desc{ font-size:.98rem; color:var(--t-body); margin-top:.45rem; line-height:1.7; }
.tprof-links{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.8rem; }
.tprof-link{ display:inline-flex; align-items:center; gap:.5rem; font-family:'Space Grotesk'; font-size:.9rem; font-weight:600; color:var(--gold-ink); background:#fff; border:1px solid var(--line); border-radius:99px; padding:.55rem 1.05rem; transition:border-color .15s, background .15s, color .15s; }
.tprof-link:hover{ border-color:var(--gold); background:#FBF4E4; color:var(--navy); }
.tprof-link svg{ width:18px; height:18px; flex:none; }
.tprof-art{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.tprof-art-item .art-slot{ position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; }
.tprof-art-item .art-img{ position:absolute; inset:0; border-radius:14px; background:linear-gradient(135deg,#EDE3D2,#E3D6BF); display:grid; place-items:center; font-size:1.9rem; color:rgba(150,120,70,.45); border:1px solid var(--line); }
.tprof-art-item .art-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:14px; }
.tprof-art-cap{ font-size:.92rem; color:var(--navy); margin-top:.55rem; font-weight:600; }
.tprof-art-meta{ font-size:.78rem; color:var(--t-mute); margin-top:.18rem; line-height:1.5; }
.tprof-exh{ display:flex; flex-direction:column; gap:.7rem; }
.tprof-exh-row{ display:flex; gap:1.1rem; font-size:1rem; }
.tprof-exh-year{ font-family:'Space Grotesk'; font-weight:700; color:var(--gold-ink); flex:none; min-width:3.4em; }
.tprof-exh-name{ color:var(--t-body); }
.tprof-meta{ display:flex; flex-wrap:wrap; gap:2.4rem; margin-top:1.8rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.tprof-meta .mk{ font-family:'Space Grotesk'; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--t-mute); margin-bottom:.35rem; }
.tprof-meta .mv{ font-weight:600; font-size:1rem; color:var(--navy); }

@media(max-width:880px){ .team-roster{ grid-template-columns:1fr 1fr; } .tprof-modal{ padding:2rem 1.6rem; } }
@media(max-width:560px){ .team-roster{ grid-template-columns:1fr; } .tprof-art{ grid-template-columns:repeat(2,1fr); } }
@media(prefers-reduced-motion:reduce){ .tmem{ animation:none; opacity:1; } }