/* =====================================================================
   LONGEVITY SEOUL — Skin Guide (Before You Fly)
   Restyled to the "Seoul Skin Journey" system: warm pearl-ivory,
   rose-brick accent, plum-brown depth. Newsreader + Mulish.
   All class names preserved so script.js keeps working.
   ===================================================================== */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }

:root{
  --paper:#f7f2ea;
  --paper-2:#efe6d8;
  --card:#fffdf8;
  --ink:#2b2019;
  --ink-2:#6d5d4f;
  --ink-3:#9c8b78;
  --forest:#3a2a26;      /* warm dark brown — chips, table head, notes */
  --forest-d:#241713;    /* deeper brown — hero / result head */
  --sage:#b79f86;
  --serum:#a85a4c;       /* rose-brick — primary accent */
  --serum-d:#8f4436;
  --copper:#c1885b;
  --blush:#e8c6ab;
  --cream:#f7f2ea;
  --line:rgba(43,32,25,.15);
  --line-2:rgba(43,32,25,.07);
  --line-cream:rgba(247,242,233,.2);
  --warn-bg:#f6e7df;
  --warn-bd:rgba(168,90,76,.32);

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --kor:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Mulish',system-ui,-apple-system,sans-serif;
  --code:ui-monospace,'SFMono-Regular',Menlo,'Courier New',monospace;
  --mx:clamp(1.15rem,5vw,3.4rem);
}

body{
  font-family:var(--sans); background:var(--paper); color:var(--ink);
  line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 55% at 85% -10%,rgba(193,136,91,.13),transparent 60%),
             radial-gradient(90% 50% at 0% 108%,rgba(168,90,76,.07),transparent 55%);
}
.gnav,section,footer,.copied-toast{ position:relative; z-index:1; }
::selection{ background:var(--serum); color:#fff; }
img{ max-width:100%; }
:focus-visible{ outline:2px solid var(--serum); outline-offset:3px; }

/* ---------------- NAV ---------------- */
.gnav{
  position:sticky; top:0; z-index:100; display:flex; justify-content:space-between; align-items:center;
  padding:1.1rem var(--mx); background:rgba(247,242,234,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2);
}
.gnav .brand{ font-family:var(--serif); font-size:1.4rem; font-weight:400; letter-spacing:0; color:var(--ink); text-decoration:none; display:flex; flex-direction:column; line-height:1.1; }
.gnav .brand .mark{ font-family:var(--sans); font-size:.56rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); margin-top:.34rem; }
.gnav .home-link{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); text-decoration:none; border:1px solid var(--line); padding:.55rem 1rem; border-radius:30px; transition:.2s; white-space:nowrap; }
.gnav .home-link:hover{ border-color:var(--serum); color:var(--serum); }

/* ---------------- LAYOUT ---------------- */
.wrap{ max-width:1060px; margin:0 auto; padding:0 var(--mx); }
section{ padding:clamp(3.6rem,7vw,6rem) 0; position:relative; }
.sec-tag{
  display:inline-flex; align-items:center; gap:.7rem; font-family:var(--sans);
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--copper); font-weight:600; margin-bottom:1.4rem;
}
.sec-tag::before{ content:""; width:1.6rem; height:1px; background:var(--copper); opacity:.8; }
h2.sec-title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,4.6vw,2.6rem); line-height:1.14; letter-spacing:-.01em; color:var(--ink); margin-bottom:.7rem; text-wrap:balance; }
h2.sec-title .en{ display:block; font-family:var(--serif); font-style:italic; font-weight:400; font-size:.52em; color:var(--ink-3); margin-top:.5rem; letter-spacing:0; }
.sec-lead{ font-size:1rem; color:var(--ink-2); line-height:1.75; max-width:64ch; margin-top:.8rem; }
.alt-bg{ background:var(--paper-2); }

/* ---------------- HERO (warm plum-brown) ---------------- */
.hero{
  position:relative; overflow:hidden; padding:clamp(4rem,9vw,7rem) 0 clamp(3.4rem,7vw,5.5rem);
  background:
    radial-gradient(70% 80% at 88% 0%, rgba(193,136,91,.26) 0, transparent 55%),
    radial-gradient(60% 90% at 0% 100%, rgba(168,90,76,.18) 0, transparent 55%),
    var(--forest-d);
  color:var(--cream);
}
.hero::before{ content:""; position:absolute; right:-6%; top:10%; width:34vw; height:34vw; max-width:440px; max-height:440px; border:1px solid var(--line-cream); border-radius:50%; opacity:.6; }
.hero .wrap{ position:relative; z-index:1; }
.hero .eyebrow{ font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--blush); margin-bottom:1.8rem; display:inline-flex; align-items:center; gap:.7rem; }
.hero .eyebrow::before{ content:""; width:1.7rem; height:1px; background:var(--blush); }
.hero h1{ font-family:var(--serif); font-weight:300; font-size:clamp(2.1rem,6vw,3.7rem); line-height:1.1; letter-spacing:-.015em; color:var(--cream); margin-bottom:1.4rem; text-wrap:balance; max-width:20ch; }
.hero h1 .accent{ color:var(--blush); font-style:italic; }
.hero .sub{ font-size:1.05rem; color:rgba(247,242,233,.78); line-height:1.7; max-width:52ch; margin-bottom:1.6rem; }
.hero .key{
  border-left:2px solid var(--serum); padding:.2rem 0 .2rem 1.3rem; max-width:60ch; margin-bottom:2rem;
  font-size:1rem; color:rgba(247,242,233,.9); line-height:1.75;
}
.hero .key strong{ color:var(--blush); font-weight:600; }
.hero .key em{ display:block; margin-top:.6rem; font-family:var(--serif); font-style:italic; color:rgba(247,242,233,.6); font-size:.94em; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; text-decoration:none;
  font-family:var(--sans); font-size:.8rem; letter-spacing:.05em; text-transform:none; font-weight:600;
  padding:.9rem 1.5rem; border-radius:40px; border:1px solid transparent; transition:.25s;
}
.btn-primary{ background:var(--serum); color:#fff; border-color:var(--serum); box-shadow:0 12px 26px -14px rgba(168,90,76,.7); }
.btn-primary:hover{ background:var(--serum-d); border-color:var(--serum-d); transform:translateY(-2px); }
.btn-blue{ background:var(--serum); color:#fff; border-color:var(--serum); box-shadow:0 12px 26px -14px rgba(168,90,76,.7); }
.btn-blue:hover{ background:var(--serum-d); border-color:var(--serum-d); transform:translateY(-2px); }
.btn-line{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-line:hover{ border-color:var(--ink); }
.hero .btn-line{ color:var(--cream); border-color:var(--line-cream); }
.hero .btn-line:hover{ border-color:var(--cream); }

/* ---------------- CORE PRINCIPLE (editorial index) ---------------- */
.card-3{ display:grid; grid-template-columns:1fr; margin-top:2rem; border-top:1px solid var(--line); }
.pcard{ padding:1.6rem 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:3.4rem 1fr; gap:1rem; align-items:baseline; }
.pcard .num{ font-family:var(--serif); font-style:italic; font-size:1.9rem; color:var(--serum); background:none; width:auto; height:auto; }
.pcard h3{ font-family:var(--serif); font-size:1.35rem; font-weight:500; color:var(--ink); margin-bottom:.3rem; }
.pcard p{ font-size:.94rem; color:var(--ink-2); line-height:1.65; }

/* ---------------- LAYER STRATA ---------------- */
.layer{ display:grid; grid-template-columns:1fr; gap:0; margin-top:1.8rem; border-top:1px solid var(--line); }
.layer-card{ border-bottom:1px solid var(--line); padding:2rem 0; position:relative; }
.layer-head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; }
.layer-head .depth{ width:56px; height:56px; border-radius:14px; flex:none; display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-weight:700; font-size:.6rem; letter-spacing:.06em; color:var(--cream); text-align:center; line-height:1.2; }
.d1{ background:linear-gradient(150deg,#d9a98a,#c98a68); }
.d2{ background:linear-gradient(150deg,#b0725f,#8f4436); }
.d3{ background:linear-gradient(150deg,#7c5a54,#4a332f); }
.layer-head h3{ font-family:var(--serif); font-size:1.4rem; font-weight:500; color:var(--ink); }
.layer-head h3 small{ display:block; font-family:var(--sans); font-weight:600; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:.3rem; }
.layer-body .grp{ margin-bottom:1rem; }
.layer-body .grp h4{ font-family:var(--sans); font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--copper); margin-bottom:.6rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chip{ font-size:.8rem; color:var(--ink-2); border:1px solid var(--line); border-radius:30px; padding:.32rem .8rem; background:var(--card); }
.chip.tx{ background:var(--forest); color:var(--cream); border-color:var(--forest); }
.layer-note{ font-size:.9rem; color:var(--ink-2); line-height:1.7; margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--line); }

/* ---------------- TABLE ---------------- */
.table-scroll{ overflow-x:auto; margin-top:1.8rem; border:1px solid var(--line); border-radius:16px; }
table.cmp{ width:100%; border-collapse:collapse; min-width:640px; background:var(--card); }
table.cmp th,table.cmp td{ text-align:left; padding:1rem 1.1rem; font-size:.86rem; border-bottom:1px solid var(--line); vertical-align:top; }
table.cmp thead th{ background:var(--forest); color:var(--cream); font-family:var(--serif); font-weight:500; font-size:.98rem; border-bottom:none; }
table.cmp thead th small{ display:block; font-family:var(--sans); font-weight:400; font-size:.6rem; letter-spacing:.06em; color:rgba(247,242,233,.6); margin-top:.15rem; }
table.cmp thead th:first-child{ background:var(--ink); }
table.cmp tbody th{ font-family:var(--serif); font-weight:500; color:var(--ink); background:var(--paper-2); white-space:nowrap; }
table.cmp td{ color:var(--ink-2); line-height:1.55; }
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{ border-bottom:none; }

/* ---------------- WARN / NOTE ---------------- */
.warn{ background:var(--warn-bg); border:1px solid var(--warn-bd); border-left:3px solid var(--serum); border-radius:14px; padding:1.1rem 1.3rem; margin-top:1.3rem; font-size:.92rem; color:var(--ink-2); line-height:1.7; }
.warn strong{ color:var(--serum-d); font-weight:600; }
.warn .wt{ display:flex; align-items:center; gap:.5rem; font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--serum-d); margin-bottom:.5rem; }
.warn .wt::before{ content:"⚠"; }
.note-blue{ background:var(--card); border:1px solid var(--line); border-left:3px solid var(--copper); border-radius:14px; padding:1.1rem 1.3rem; margin-top:1.3rem; font-size:.92rem; color:var(--ink-2); line-height:1.7; }
.note-blue strong{ color:var(--serum-d); font-weight:600; }

/* ---------------- CHECKLIST (editorial index) ---------------- */
.clist{ display:grid; grid-template-columns:1fr; gap:0; margin-top:1.8rem; border-top:1px solid var(--line); }
.citem{ border-bottom:1px solid var(--line); }
.citem>summary{ list-style:none; cursor:pointer; padding:1.3rem 0; display:flex; align-items:baseline; gap:1.1rem; color:var(--ink); transition:.2s; }
.citem>summary::-webkit-details-marker{ display:none; }
.citem>summary:hover{ padding-left:.5rem; }
.citem>summary .qn{ flex:none; font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--serum); line-height:1; min-width:2.2rem; }
.citem>summary .qt{ flex:1; font-family:var(--serif); font-size:1.14rem; font-weight:500; line-height:1.4; }
.citem>summary .arw{ flex:none; color:var(--ink-3); font-family:var(--sans); transition:transform .25s; }
.citem[open]>summary .arw{ transform:rotate(90deg); color:var(--serum); }
.citem .cbody{ padding:0 0 1.5rem 3.3rem; font-size:.94rem; color:var(--ink-2); line-height:1.75; }
.citem .cbody p{ margin-bottom:.7rem; }
.citem .cbody b{ color:var(--ink); }

/* option grids / pills */
.opts{ display:grid; grid-template-columns:1fr; gap:.5rem; margin:.4rem 0; }
@media (min-width:560px){ .opts.two{ grid-template-columns:1fr 1fr; } }
.opt{ display:flex; align-items:center; gap:.6rem; cursor:pointer; border:1px solid var(--line); border-radius:12px; padding:.65rem .85rem; font-size:.9rem; color:var(--ink); transition:.15s; background:var(--card); }
.opt:hover{ border-color:var(--serum); }
.opt input{ accent-color:var(--serum); width:17px; height:17px; flex:none; }
.opt.checked-hi{ background:var(--forest); color:var(--cream); border-color:var(--forest); }
.pill-row{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.4rem; }
.pill-btn{ font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.03em; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:30px; padding:.46rem .95rem; cursor:pointer; transition:.15s; }
.pill-btn:hover,.pill-btn.on{ background:var(--serum); color:#fff; border-color:var(--serum); }
.stay-list{ list-style:none; }
.stay-list li{ padding:.55rem 0; border-bottom:1px dashed var(--line); font-size:.92rem; }
.stay-list li:last-child{ border-bottom:none; }
.stay-list b{ font-family:var(--sans); font-weight:700; font-size:.85rem; color:var(--serum); }
.qa-list{ list-style:none; }
.qa-list li{ position:relative; padding:.4rem 0 .4rem 1.4rem; font-size:.92rem; }
.qa-list li::before{ content:"—"; position:absolute; left:0; color:var(--serum); }

/* ---------------- DECISION TREE ---------------- */
.dt-card{ border:1px solid var(--line); border-radius:20px; padding:clamp(1.4rem,4vw,2.2rem); margin-top:1.8rem; background:var(--card); box-shadow:0 30px 60px -46px rgba(43,32,25,.5); }
.dt-q{ margin-bottom:1.8rem; }
.dt-q .qlab{ font-family:var(--serif); font-weight:500; color:var(--ink); margin-bottom:.8rem; font-size:1.1rem; display:flex; gap:.5rem; }
.dt-q .qlab .qi{ font-family:var(--serif); font-style:italic; color:var(--serum); }
.dt-opts{ display:grid; grid-template-columns:1fr; gap:.5rem; }
.dt-opt{ display:flex; align-items:center; gap:.65rem; cursor:pointer; border:1px solid var(--line); border-radius:12px; padding:.75rem .95rem; font-size:.92rem; color:var(--ink); background:var(--paper); transition:.15s; }
.dt-opt:hover{ border-color:var(--serum); }
.dt-opt input{ accent-color:var(--serum); width:17px; height:17px; flex:none; }
.dt-opt:has(input:checked){ background:var(--forest); color:var(--cream); border-color:var(--forest); }
.dt-actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.4rem; }
.dt-hint{ font-family:var(--sans); font-size:.72rem; letter-spacing:.02em; color:var(--ink-3); margin-top:1rem; }

.result{ margin-top:1.6rem; border:1px solid var(--line); border-radius:18px; overflow:hidden; display:none; }
.result.show{ display:block; animation:pop .4s ease; }
@keyframes pop{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
.result .rhead{ background:var(--forest-d); color:var(--cream); padding:1.5rem 1.6rem; }
.result .rhead .rtype{ font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blush); }
.result .rhead h3{ font-family:var(--serif); font-size:1.5rem; font-weight:400; margin-top:.35rem; }
.result .rbody{ background:var(--card); padding:1.5rem 1.6rem; }
.result .rbody h4{ font-family:var(--sans); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--copper); margin:.3rem 0 .6rem; }
.result .rbody .rchips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.1rem; }
.result .rbody .rchips .chip{ background:var(--forest); color:var(--cream); border-color:var(--forest); }
.result .rbody p{ font-size:.94rem; color:var(--ink-2); line-height:1.75; margin-bottom:.8rem; }

/* ---------------- SUMMARY GENERATOR ---------------- */
.form-card{ border:1px solid var(--line); border-radius:20px; padding:clamp(1.4rem,4vw,2.2rem); margin-top:1.8rem; background:var(--card); box-shadow:0 30px 60px -46px rgba(43,32,25,.5); }
.fieldset{ margin-bottom:1.8rem; padding-bottom:1.8rem; border-bottom:1px solid var(--line); }
.fieldset:last-of-type{ border-bottom:none; }
.fieldset>.fl{ font-family:var(--serif); font-weight:500; color:var(--ink); font-size:1.15rem; margin-bottom:.9rem; display:flex; align-items:center; gap:.6rem; }
.fieldset>.fl .fi{ font-family:var(--serif); font-style:italic; font-size:1.35rem; color:var(--serum); }
.grid-inputs{ display:grid; grid-template-columns:1fr; gap:.9rem; }
@media (min-width:560px){ .grid-inputs{ grid-template-columns:1fr 1fr; } }
.field label{ display:block; font-family:var(--sans); font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.35rem; }
.field input,.field select{ width:100%; padding:.55rem .1rem; border:none; border-bottom:1px solid var(--line); font-size:.94rem; font-family:inherit; color:var(--ink); background:transparent; transition:border-color .2s; }
.field input:focus,.field select:focus{ outline:none; border-bottom-color:var(--serum); }
.cbgrid{ display:grid; grid-template-columns:1fr; gap:.45rem; }
@media (min-width:480px){ .cbgrid{ grid-template-columns:1fr 1fr; } }
@media (min-width:720px){ .cbgrid.three{ grid-template-columns:1fr 1fr 1fr; } }
.gen-actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.4rem; }
.summary-out{ margin-top:1.4rem; display:none; }
.summary-out.show{ display:block; }
.summary-out .sbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; flex-wrap:wrap; gap:.5rem; }
.summary-out .sbar span{ font-family:var(--sans); font-size:.78rem; color:var(--ink-3); }
.summary-out textarea{ width:100%; min-height:340px; padding:1.2rem 1.3rem; border:1px solid var(--line); border-radius:14px; background:var(--paper-2); color:var(--ink); font-family:var(--code); font-size:.8rem; line-height:1.75; resize:vertical; }
.copied-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--forest-d); color:var(--cream); padding:.75rem 1.4rem; border-radius:30px; font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.04em; opacity:0; pointer-events:none; transition:.3s; z-index:200; }
.copied-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------------- RECORDS ---------------- */
.rec-grid{ display:grid; grid-template-columns:1fr; gap:0; margin-top:1.8rem; border-top:1px solid var(--line); }
@media (min-width:560px){ .rec-grid{ grid-template-columns:1fr 1fr; column-gap:2.4rem; } }
.rec-item{ display:flex; align-items:center; gap:.7rem; padding:.9rem 0; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink); }
.rec-item .ck{ width:18px; height:18px; flex:none; color:var(--serum); font-weight:700; display:flex; align-items:center; justify-content:center; }
.rec-item .ck::before{ content:"✦"; }

/* ---------------- EXOSOME ---------------- */
.qbox{ border:1px solid var(--line); border-left:3px solid var(--copper); border-radius:16px; padding:1.4rem 1.5rem; margin-top:1.6rem; background:var(--card); }
.qbox h4{ font-family:var(--sans); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--copper); margin-bottom:.8rem; }
.qbox ul{ list-style:none; }
.qbox li{ position:relative; padding:.55rem 0 .55rem 1.5rem; font-size:.92rem; color:var(--ink-2); border-bottom:1px dashed var(--line); line-height:1.6; }
.qbox li:last-child{ border-bottom:none; }
.qbox li::before{ content:"→"; position:absolute; left:0; color:var(--serum); }

/* ---------------- DISCLAIMER + FOOTER ---------------- */
.disclaimer{ background:var(--paper-2); border-top:1px solid var(--line); }
.disclaimer .box{ border-left:3px solid var(--serum); padding:.3rem 0 .3rem 1.4rem; font-size:.92rem; color:var(--ink-2); line-height:1.8; max-width:76ch; }
.disclaimer .box b{ color:var(--ink); }

.gfoot{ background:var(--paper-2); color:var(--ink-2); padding:clamp(2.6rem,5vw,3.6rem) var(--mx); border-top:1px solid var(--line); }
.gfoot .fwrap{ max-width:1060px; margin:0 auto; }
.gfoot .flogo{ font-family:var(--serif); font-size:1.7rem; font-weight:400; color:var(--ink); letter-spacing:0; }
.gfoot .flogo em{ font-style:italic; color:var(--serum); }
.gfoot .ftag{ font-family:var(--sans); font-size:.64rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:.4rem; }
.gfoot .fop{ font-size:.86rem; color:var(--ink-2); margin-top:1.3rem; padding-top:1.3rem; border-top:1px solid var(--line); line-height:1.75; }
.gfoot .fop a{ color:var(--serum); text-decoration:none; border-bottom:1px solid var(--line); }
.gfoot .fdis{ font-size:.74rem; color:var(--ink-3); margin-top:.9rem; line-height:1.7; max-width:80ch; }

@media (min-width:760px){
  .card-3 .pcard{ grid-template-columns:4rem 1fr; }
}

/* ============================================================
   K-SKIN PLANNER — tool components
   ============================================================ */
.gnav-r{ display:flex; align-items:center; gap:.7rem; }
.btn-sm{ padding:.62rem 1.1rem; font-size:.74rem; }
.hero .tool-note{
  display:inline-block; font-family:var(--sans); font-size:.82rem; color:rgba(247,242,233,.82);
  background:rgba(247,242,233,.08); border:1px solid var(--line-cream); border-radius:30px;
  padding:.5rem 1rem; margin:0 0 1.7rem;
}

/* tool entry choices — route-like */
.tool-entry{ display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1.8rem; }
@media (min-width:600px){ .tool-entry{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .tool-entry{ grid-template-columns:repeat(4,1fr); } }
.tool-choice{
  display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"n t a" "n d a";
  gap:.15rem .9rem; align-items:center; text-decoration:none; text-align:left; width:100%;
  font:inherit; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:1.3rem 1.4rem; transition:.24s; color:var(--ink);
}
.tool-choice--wa{ background:linear-gradient(160deg,rgba(168,90,76,.09),rgba(255,253,248,.4)); border-color:var(--serum); }
.tool-choice--wa .tc-n{ color:var(--serum); }
.tool-choice:hover{ border-color:var(--serum); transform:translateY(-3px); box-shadow:0 22px 42px -30px rgba(43,32,25,.55); }
.tool-choice .tc-n{ grid-area:n; font-family:var(--serif); font-style:italic; font-size:1.7rem; color:var(--serum); }
.tool-choice .tc-t{ grid-area:t; font-family:var(--serif); font-size:1.18rem; line-height:1.2; align-self:end; }
.tool-choice .tc-d{ grid-area:d; font-size:.84rem; color:var(--ink-2); line-height:1.4; }
.tool-choice .tc-arw{ grid-area:a; color:var(--serum); font-size:1.2rem; transition:transform .24s; }
.tool-choice:hover .tc-arw{ transform:translateX(4px); }

.qsub{ font-family:var(--sans); font-weight:500; font-size:.82em; color:var(--ink-3); }

/* mode tabs */
.mode-tabs{ display:inline-flex; gap:.3rem; background:var(--paper-2); border:1px solid var(--line); border-radius:40px; padding:.3rem; margin-top:1.6rem; }
.mode-btn{ font-family:var(--sans); font-weight:600; font-size:.8rem; color:var(--ink-2); background:transparent; border:0; border-radius:30px; padding:.55rem 1.1rem; cursor:pointer; transition:.2s; }
.mode-btn.on{ background:var(--serum); color:#fff; box-shadow:0 8px 18px -10px rgba(168,90,76,.7); }
.fopt{ font-family:var(--sans); font-weight:600; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line); border-radius:20px; padding:.15rem .5rem; }
.field textarea{ width:100%; padding:.7rem .8rem; border:1px solid var(--line); border-radius:12px; font-family:inherit; font-size:.92rem; color:var(--ink); background:var(--paper); resize:vertical; }
.field textarea:focus{ outline:none; border-color:var(--serum); }

/* result CTAs + layer line */
.result .rhead .rlayer{ font-family:var(--sans); font-size:.82rem; color:rgba(247,242,233,.7); margin-top:.4rem; }
.rcta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem; }

/* summary output as a clean note */
.sum-note{ background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 24px 50px -38px rgba(43,32,25,.5); }
.sn-head{ background:var(--forest-d); color:var(--cream); padding:1.2rem 1.4rem; }
.sn-badge{ display:block; font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blush); }
.sn-sub{ display:block; font-family:var(--serif); font-size:1.05rem; margin-top:.25rem; }
.sn-row{ display:grid; grid-template-columns:1fr; gap:.3rem; padding:.95rem 1.4rem; border-bottom:1px solid var(--line); }
@media (min-width:620px){ .sn-row{ grid-template-columns:11rem 1fr; gap:1rem; } }
.sn-row:last-child{ border-bottom:0; }
.sn-l{ font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--copper); padding-top:.2rem; }
.sn-v{ display:flex; flex-wrap:wrap; gap:.4rem; }
.sn-v p{ font-size:.92rem; color:var(--ink-2); line-height:1.55; margin:0; width:100%; }
.sn-chip{ font-size:.8rem; color:var(--ink); background:var(--paper-2); border:1px solid var(--line); border-radius:30px; padding:.28rem .75rem; }
.sn-dash{ color:var(--ink-3); }
.sn-qs{ margin:0; padding-left:1.1rem; }
.sn-qs li{ font-size:.9rem; color:var(--ink-2); line-height:1.5; margin-bottom:.3rem; }
.sum-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.1rem; }

/* sticky planner CTA */
.planner-cta{
  position:fixed; left:50%; bottom:14px; transform:translate(-50%,140%); z-index:150;
  display:flex; gap:.6rem; align-items:center;
  background:rgba(247,242,234,.92); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:40px; padding:.5rem .6rem;
  box-shadow:0 18px 40px -20px rgba(43,32,25,.6); transition:transform .3s ease;
}
.planner-cta.show{ transform:translate(-50%,0); }
@media (prefers-reduced-motion:reduce){ .planner-cta{ transition:none; } }

/* read-the-guides strip + next-step note */
.tool-readfirst{ margin-top:1.4rem; font-size:.9rem; color:var(--ink-2); line-height:1.6; max-width:70ch; }
.tool-readfirst a{ color:var(--serum); text-decoration:none; border-bottom:1px solid var(--line-2); }
.tool-readfirst a:hover{ border-color:var(--serum); }
.gnote{ border:1px solid var(--line); border-left:3px solid var(--copper); background:var(--paper-2); border-radius:12px; padding:1.1rem 1.3rem; font-size:.92rem; color:var(--ink-2); line-height:1.6; max-width:74ch; }
.gnote.safe{ border-left-color:var(--serum); }
.gnote b{ color:var(--ink); }
.gnote .gl{ display:block; font-weight:700; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--serum); margin-bottom:.45rem; }
.gnote a{ color:var(--serum); text-decoration:none; border-bottom:1px solid var(--line-2); }

/* language selector (planner) */
.lang-select{ display:inline-flex; align-items:center; gap:.1rem; font-family:var(--sans); font-size:.68rem; font-weight:600; }
.lang-select a{ text-decoration:none; color:var(--ink-3); padding:.3rem .45rem; border-radius:20px; white-space:nowrap; transition:.2s; }
.lang-select a:hover{ color:var(--serum); }
.lang-select a.active{ color:var(--ink); background:var(--paper-2); }
.lang-select .sep{ color:var(--line); }

/* Simplified-Chinese planner: CJK stack, no wide tracking/uppercasing */
html[lang="zh-CN"] body{ font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",var(--sans); }
html[lang="zh-CN"] .sec-tag,html[lang="zh-CN"] .btn,html[lang="zh-CN"] .eyebrow,
html[lang="zh-CN"] .hero .eyebrow,html[lang="zh-CN"] .tc-n,html[lang="zh-CN"] .mode-btn,
html[lang="zh-CN"] .slip-head,html[lang="zh-CN"] .sn-l,html[lang="zh-CN"] .sn-badge,
html[lang="zh-CN"] .fl,html[lang="zh-CN"] .field label,html[lang="zh-CN"] .gl,
html[lang="zh-CN"] .rtype,html[lang="zh-CN"] .wt,html[lang="zh-CN"] .gnav .brand .mark,
html[lang="zh-CN"] .gfoot .ftag,html[lang="zh-CN"] .dt-hint{ letter-spacing:0; text-transform:none; }
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2,html[lang="zh-CN"] h3,html[lang="zh-CN"] .hero h1{ letter-spacing:0; line-height:1.3; }

/* brand emblem (matches site nav mark) */
.gnav .brand{ display:grid; grid-template-columns:auto auto; column-gap:.55rem; align-items:center; white-space:nowrap; }
.gnav .brand::before{ content:""; grid-row:1 / span 2; grid-column:1; width:28px; height:28px; background:url('/assets/mark.svg') center/contain no-repeat; align-self:center; }

/* ---- DYPHI business information (issue #41) ---- */
.dyphi-biz{max-width:var(--maxw,1120px);margin:1.5rem auto 0;padding:1.3rem var(--edge,clamp(1.15rem,5vw,3.4rem)) 0;border-top:1px solid var(--line)}
.dyphi-biz .biz-op{margin:0;max-width:78ch;font-size:.82rem;line-height:1.65;color:var(--ink-2)}
.dyphi-biz .biz-disc{margin:.55rem 0 0;max-width:78ch;font-size:.75rem;line-height:1.55;color:var(--ink-3)}
.biz-info{margin-top:1rem}
.biz-info>summary{list-style:none;display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.5rem .15rem;cursor:pointer;font-size:.78rem;font-weight:700;letter-spacing:.05em;color:var(--rose,#a85a4c)}
.biz-info>summary::-webkit-details-marker{display:none}
.biz-info>summary::marker{content:""}
.biz-ind{display:inline-grid;place-items:center;width:1.25em;height:1.25em;border:1px solid currentColor;border-radius:5px;font-weight:400;line-height:1}
.biz-ind::before{content:"+"}
.biz-info[open]>summary .biz-ind::before{content:"\2212"}
.biz-info>summary:focus-visible{outline:2px solid var(--rose,#a85a4c);outline-offset:3px;border-radius:7px}
.biz-body{padding:.5rem 0 .3rem}
.biz-facts{margin:0;display:grid;gap:.6rem}
.biz-facts>div{display:grid;gap:.15rem}
.biz-facts dt{margin:0;font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--copper)}
.biz-facts dd{margin:0;font-size:.86rem;line-height:1.4;color:var(--ink-2)}
.biz-offices{margin-top:1.1rem;display:grid;gap:1.05rem}
.biz-offices address{font-style:normal;font-size:.82rem;line-height:1.55;color:var(--ink-2)}
.biz-off-k{display:block;font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--copper);margin-bottom:.25rem}
@media(min-width:640px){
  .biz-facts{grid-template-columns:1fr 1fr;gap:.75rem 1.8rem}
  .biz-offices{grid-template-columns:1fr 1fr;gap:1.8rem}
}