/* ===================================================================
   deeproot — visual system adapted from Replicate's DESIGN.md
   (warm cream canvas, single orange "stamp" accent, oversized tight
   display type, fully-rounded interactive elements, dark code-well
   bands for narrative/process sections, black footer)
   =================================================================== */
:root{
  --canvas:#F9F7F3;
  --bone:#F3F0E8;
  --card:#FFFFFF;
  --dark:#202020;
  --deep:#000000;
  --ink:#202020;
  --body-c:#3A3A3A;
  --charcoal:#575757;
  --mute:#646464;
  --ash:#8D8D8D;
  --stone:#BBBBBB;
  --on-dark:#FCFCFC;
  --on-dark-mute:rgba(252,252,252,.72);
  --line: rgba(32,32,32,.12);
  --line-strong:#202020;
  --divider-dark: rgba(255,255,255,.2);
  --orange:#EA2804;
  --orange-deep:#C01F00;
  --orange-glow:#FF6A3D;
  --orange-pink:#F4A8A0;
  --success:#2B9A66;
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-full:9999px;
  --sp-lg:16px; --sp-xl:24px; --sp-xxl:32px; --sp-xxxl:48px; --sp-section:96px;
  --serif: "Times New Roman", "Nanum Myeongjo", serif;
  --sans: "Helvetica Neue", Arial, "Malgun Gothic", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --marquee-h:34px;
  --nav-h:60px;

  /* legacy aliases kept so main.js / title-anim.js need no changes */
  --forest:#202020;
  --cream:#F9F7F3;
  --cream-2:#F3F0E8;
  --clay:#EA2804;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--orange); color:#fff;}
ul{list-style:none;}

/* ---------- MARQUEE BANDS (ref: plazastyle.com/contents/plaza_60th/) ---------- */
.marquee{
  position:fixed; left:0; right:0; height:var(--marquee-h); z-index:90;
  overflow:hidden; display:flex; align-items:center; white-space:nowrap;
}
.marquee.top{ top:0; background:var(--orange); }
.marquee.bottom{ bottom:0; background:var(--dark); }
.marquee-track{ display:flex; align-items:center; flex-shrink:0; animation: marquee-left 18s linear infinite; }
.marquee.bottom .marquee-track{ animation-name: marquee-right; }
.marquee-track span{
  padding:0 18px; font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:#fff; display:flex; align-items:center; gap:18px; flex-shrink:0;
}
.marquee.bottom .marquee-track span{ color:var(--on-dark); }
@keyframes marquee-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes marquee-right{ from{transform:translateX(-50%);} to{transform:translateX(0);} }

/* ---------- LEFT SIDEBAR NAV (layout ref: tamura-ikuho.com, tokens: Replicate) ---------- */
.sidebar{
  position:fixed; top:var(--marquee-h); left:0; bottom:var(--marquee-h); width:222px; z-index:80;
  background:var(--canvas); border-right:1px solid var(--line);
  padding:28px 20px; display:flex; flex-direction:column; gap:26px; overflow-y:auto;
}
.sidebar .wordmark{
  font-weight:800; font-size:19px; letter-spacing:-.5px; color:var(--ink);
  display:flex; align-items:center; gap:8px; margin-bottom:2px;
}
.side-block{ display:flex; flex-direction:column; gap:8px; position:relative; }
.side-pill{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 14px; font-size:13px; font-weight:600; border-radius:var(--r-full);
  background:var(--card); border:1px solid var(--line); color:var(--ink); cursor:pointer; transition:.15s;
  width:fit-content; max-width:100%;
}
.side-pill.active, .side-pill:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.side-pill .spark{ opacity:0; }
.side-pill.active .spark{ opacity:1; }
.side-toggle{ margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:16px; position:relative; }

/* Floating stair-step nav mark (ref: tamura-ikuho.com/contact/) — a single
   ✳ that hops behind the current menu label as you move between items,
   moving in discrete jumps (steps() easing) rather than a smooth slide. */
.step-mark{
  position:absolute; top:0; left:0; z-index:1; pointer-events:none;
  color:var(--orange-deep); font-size:24px; line-height:1; font-weight:700;
  animation: spark-spin 3.2s linear infinite;
  transition: top .06s steps(2, end), left .06s steps(2, end);
}
.step-mark.hop{ animation: spark-spin 3.2s linear infinite, step-hop .07s ease-out; }
@keyframes step-hop{ 0%{ transform:translateY(0) scale(1); } 45%{ transform:translateY(-10px) scale(1.15); } 100%{ transform:translateY(0) scale(1); } }
.nav-toggle{ display:none; background:none; border:none; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; }

.page-wrap{
  margin-left:222px; width:calc(100% - 222px);
  min-height:100vh; background:var(--canvas); color:var(--ink);
}

/* ---------- SPINNING SPARK (decorative flourish, ref: tamura-ikuho.com active-state icon) ---------- */
.spark{
  display:inline-block; color:var(--orange); font-size:15px; line-height:1;
  animation: spark-spin 3.2s linear infinite;
}
.spark.deco{ opacity:.85; margin-left:8px; font-size:23px; }
.spark.deco-lg{ font-size:30px; }
@keyframes spark-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:15px; height:44px; padding:0 24px; border-radius:var(--r-full);
  cursor:pointer; border:none; white-space:nowrap; transition:.15s;
}
.btn-primary{ background:var(--orange); color:#fff; }
.btn-primary:hover{ background:var(--orange-deep); }
.btn-dark{ background:var(--dark); color:var(--on-dark); }
.btn-dark:hover{ background:#000; }
.btn-outline{ background:var(--card); color:var(--ink); border:1px solid var(--line-strong); }
.btn-outline:hover{ background:var(--canvas); }
.btn-ghost{ background:var(--canvas); color:var(--ink); height:36px; padding:0 16px; font-size:14px; }

/* ---------- HERO BAND (home only — ref: component.hero-band) ---------- */
.hero-band{
  padding:var(--sp-section) 32px; color:#fff; position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(ellipse at 85% 90%, var(--orange-pink), transparent 55%),
    radial-gradient(ellipse at 60% 40%, var(--orange-glow), transparent 60%),
    var(--orange);
}
.hero-band .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; opacity:.85; margin-bottom:20px; display:block; }
.hero-band h1{
  font-weight:800; font-size:clamp(44px,9vw,128px); line-height:1.0; letter-spacing:-3px; white-space:pre-wrap;
}
.hero-band p{ font-size:18px; font-weight:600; margin-top:22px; max-width:600px; opacity:.95; line-height:1.5; }
.hero-band .cta-row{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- PAGE HERO (sub-pages — cream, ref: display-xl section opener) ---------- */
.page-hero{ padding:64px 32px 20px; background:var(--canvas); }
.page-hero .eyebrow{ font-family:var(--mono); font-size:12px; color:var(--orange); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:12px; display:block; }
.page-hero h1{ font-weight:800; font-size:clamp(40px,7vw,84px); line-height:1.0; letter-spacing:-2px; }
.page-hero p{ margin-top:14px; color:var(--charcoal); max-width:560px; font-size:15px; }

/* ---------- SECTIONS ---------- */
.section-cream{ padding:var(--sp-section) 32px; background:var(--canvas); }
.section-bone{ padding:var(--sp-section) 32px; background:var(--bone); }
.section-dark{ padding:var(--sp-section) 32px; background:var(--dark); color:var(--on-dark); }
.section-title{ font-weight:700; font-size:clamp(30px,4.6vw,48px); line-height:1.05; letter-spacing:-1px; margin-bottom:12px; }
.section-sub{ font-size:15px; color:var(--charcoal); max-width:560px; }
.section-dark .section-sub{ color:var(--on-dark-mute); }
.section-head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:8px; }

/* ---------- SUB-NAV PILLS (filter — ref: component.sub-nav-pill) ---------- */
.subnav-row{ display:flex; gap:10px; flex-wrap:wrap; margin:28px 0 36px; }
.subnav-pill{
  background:var(--card); border:1px solid var(--line); color:var(--ink); font-size:14px; font-weight:600;
  padding:8px 16px; border-radius:var(--r-full); cursor:pointer; transition:.15s;
}
.subnav-pill.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.subnav-pill:hover{ border-color:var(--line-strong); }
.view-toggle{ display:flex; gap:8px; margin-left:auto; }

/* ---------- MODEL-CARD PROJECT GRID (ref: component.model-card) ---------- */
.model-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.model-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-lg);
  cursor:pointer; transition:.2s; display:block;
}
.model-card:hover{ box-shadow:0 8px 24px rgba(32,32,32,.08); transform:translateY(-2px); }
.model-card .thumb{ aspect-ratio:1/1; border-radius:var(--r-md); overflow:hidden; margin-bottom:12px; position:relative; }
.model-card .thumb .art{ position:absolute; inset:0; }
.model-card .m-title{ font-size:15px; font-weight:600; line-height:1.35; }
.model-card .m-owner{ font-size:12px; color:var(--charcoal); margin-top:3px; }
.model-card .m-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.badge-tag{ background:var(--canvas); border:1px solid var(--line); font-size:11px; padding:4px 10px; border-radius:var(--r-full); color:var(--ink); }
.badge-status{ background:var(--success); color:#fff; font-size:11px; padding:4px 10px; border-radius:var(--r-full); display:inline-block; margin-top:10px; }

@media (max-width:1200px){ .model-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:860px){ .model-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .model-grid{ grid-template-columns:1fr; } }

/* project thumbnail placeholder art (kept from earlier iteration) */
.art-1{background:linear-gradient(135deg,#EA2804,#FF6A3D 60%,#F4A8A0);}
.art-2{background:linear-gradient(135deg,#202020,#575757 55%,#EDE3C8);}
.art-3{background:linear-gradient(160deg,#3A3A3A,#8D8D8D 50%,#F3F0E8);}
.art-4{background:linear-gradient(120deg,#C01F00,#EA2804 60%,#F9F7F3);}
.art-5{background:linear-gradient(140deg,#575757,#BBBBBB 50%,#F3F0E8);}
.art-6{background:linear-gradient(150deg,#202020,#EA2804 60%,#3A3A3A);}
.art-7{background:linear-gradient(130deg,#000000,#575757 55%,#EA2804);}
.art-8{background:linear-gradient(145deg,#3A3A3A,#8D8D8D 50%,#F9F7F3);}
.art-9{background:linear-gradient(155deg,#202020,#646464 55%,#FF6A3D);}
.art-10{background:linear-gradient(125deg,#575757,#BBBBBB 60%,#F9F7F3);}
.art-11{background:linear-gradient(135deg,#000000,#3A3A3A 55%,#8D8D8D);}

/* ---------- INDEX (text list) view — Contents-style grouped list ---------- */
.index-list{ display:none; }
body.mode-index .model-grid{ display:none; }
body.mode-index .index-list{ display:block; }
.index-group{ margin-bottom:36px; }
.index-group-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:4px; }
.index-group-head .kr{ font-size:14px; font-weight:700; letter-spacing:.5px; }
.index-group-head .en{ font-size:10px; opacity:.5; letter-spacing:1px; font-family:var(--mono); }
.index-subgroup{ margin:16px 0 16px 4px; }
.index-subgroup-head{ font-size:11px; color:var(--orange); letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; font-weight:700; }
.index-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:12px 0; border-top:1px solid var(--line); cursor:pointer; transition:.15s;
}
.index-subgroup .index-row:last-child{ border-bottom:1px solid var(--line); }
.index-row:hover{ padding-left:10px; color:var(--orange); }
.index-row .idx-num{ opacity:.4; font-size:12px; min-width:22px; display:inline-block; font-family:var(--mono); }
.index-row .idx-title{ font-size:15px; font-weight:600; }
.index-row .idx-tags{ font-size:12px; opacity:.55; }
.index-row .idx-year{ font-size:12px; opacity:.4; min-width:40px; text-align:right; font-family:var(--mono); }
.index-row-inner{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }

/* ---------- ABOUT PAGE ---------- */
.about-lead{ font-weight:700; font-size:clamp(22px,3vw,32px); line-height:1.4; letter-spacing:-.5px; max-width:720px; }
.about-lead .accent{ color:var(--orange); font-style:italic; font-weight:800; }
.tags-flat{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.tags-flat span{ background:var(--card); border:1px solid var(--line); padding:7px 14px; border-radius:var(--r-full); font-size:13px; font-weight:600; }
.social-row{ display:flex; gap:16px; margin-top:30px; }
.social-row a{ font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; border-bottom:1px solid var(--line-strong); padding-bottom:3px; }
.social-row a:hover{ color:var(--orange); border-color:var(--orange); }

.section-block{ padding:40px 0; border-top:1px solid var(--line); }
.section-block h2{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--orange); margin-bottom:22px; font-weight:700; font-family:var(--mono); }

.process{ display:flex; flex-direction:column; }
.process-step{ display:flex; gap:20px; padding:16px 0; border-top:1px solid var(--line); }
.process-step:last-child{ border-bottom:1px solid var(--line); }
.process-step .step-no{ font-family:var(--mono); font-size:16px; color:var(--orange); min-width:26px; font-weight:700; }
.process-step .step-name{ font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase; min-width:110px; }
.process-step .step-desc{ font-size:14px; color:var(--body-c); }
.section-dark .process-step{ border-color:var(--divider-dark); }
.section-dark .process-step .step-desc{ color:var(--on-dark-mute); }

.plain-list{ display:flex; flex-direction:column; }
.plain-list li{ padding:12px 0; border-top:1px solid var(--line); font-size:14px; display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap; }
.plain-list li:last-child{ border-bottom:1px solid var(--line); }
.plain-list li .yr{ opacity:.5; font-size:12px; min-width:44px; font-family:var(--mono); }
.plain-list li a:hover{ color:var(--orange); }
.placeholder-flag{ font-size:12px; opacity:.5; font-style:italic; margin-top:10px; }

/* ---------- WRITINGS ---------- */
.writing-row{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 24px; margin-bottom:14px; transition:.15s;
}
.writing-row:hover{ box-shadow:0 8px 24px rgba(32,32,32,.06); }
.writing-row .w-title{ font-size:18px; font-weight:700; transition:.15s; }
.writing-row:hover .w-title{ color:var(--orange); }
.writing-row .w-date{ font-size:12px; color:var(--charcoal); font-family:var(--mono); margin-top:4px; display:block; }
.writing-row .w-desc{ font-size:13px; color:var(--body-c); margin-top:10px; }

/* ---------- CONTACT ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:20px; }
.contact-info a.email{
  font-weight:800; font-size:clamp(22px,3.2vw,34px); border-bottom:2px solid var(--orange); color:var(--orange);
  display:inline-block; padding-bottom:6px; letter-spacing:-.5px;
}
.contact-info .fields{ margin-top:30px; font-size:13px; color:var(--charcoal); display:flex; flex-direction:column; gap:8px; }
form.contact-form{ display:flex; flex-direction:column; gap:16px; }
form.contact-form input, form.contact-form textarea{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  color:var(--ink); font-size:14px; padding:14px 20px; font-family:var(--sans);
}
form.contact-form input{ border-radius:var(--r-full); height:44px; }
form.contact-form input::placeholder, form.contact-form textarea::placeholder{ color:var(--ash); }
form.contact-form textarea{ resize:none; min-height:110px; }

@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- PROJECT DETAIL (case-study bands alternate cream/bone/dark) ---------- */
.breadcrumb{
  display:flex; justify-content:space-between; align-items:center; padding:64px 32px 0; font-size:12px; font-weight:600; opacity:.6;
}
.breadcrumb a:hover{ color:var(--orange); }

.case-section{ padding:64px 32px; overflow:hidden; }
.case-kicker{ display:flex; align-items:baseline; gap:10px; margin-bottom:24px; }
.case-kicker .no{ font-family:var(--mono); color:var(--orange); font-size:13px; font-weight:700; }
.case-kicker h2{ font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:700; }
.case-kicker .en{ font-size:10px; opacity:.45; letter-spacing:1px; font-family:var(--mono); }

/* Cover */
.cover-hero{ position:relative; width:100%; aspect-ratio:16/9; margin-bottom:0; border-radius:var(--r-md); overflow:hidden; }
.cover-overlay{ position:absolute; left:0; bottom:0; right:0; padding:34px; background:linear-gradient(0deg, rgba(0,0,0,.65), transparent 70%); }
.cover-overlay .cover-tags{ font-size:11px; font-family:var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:#fff; opacity:.85; margin-bottom:10px; }
.cover-overlay .cover-title{ font-weight:800; font-size:clamp(26px,4vw,44px); color:#fff; max-width:760px; letter-spacing:-1px; }
.cover-meta{ display:flex; gap:26px; flex-wrap:wrap; padding:20px 32px 0; font-size:12px; color:var(--charcoal); }

/* Project Info (하단 정보 블록) */
.proj-info-wrap{ padding:40px 32px; }
.proj-info-title{ font-size:clamp(22px,3vw,36px); font-weight:800; letter-spacing:-0.5px; margin-bottom:28px; }
.proj-info-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:20px 32px; }
.proj-info-grid dt{ font-size:11px; font-family:var(--mono); letter-spacing:1.5px; text-transform:uppercase; opacity:.5; margin-bottom:4px; }
.proj-info-grid dd{ font-size:14px; font-weight:600; }

/* Insight */
.insight-line{ font-weight:700; font-size:clamp(20px,2.6vw,30px); line-height:1.5; max-width:760px; letter-spacing:-.5px; }
.insight-line .accent{ color:var(--orange); font-style:italic; }
.insight-text{ font-size:14px; line-height:1.9; color:var(--body-c); max-width:760px; margin-top:18px; }
.section-dark .insight-text{ color:var(--on-dark-mute); }

/* Writing article (writing-detail.html) */
.article-meta{ font-family:var(--mono); font-size:12px; color:var(--orange); letter-spacing:.5px; text-transform:uppercase; }
.article-body{ max-width:720px; }
.article-body p{ font-size:15px; line-height:1.95; color:var(--body-c); margin-top:20px; }
.article-body h3{ font-size:17px; font-weight:800; margin-top:36px; margin-bottom:4px; color:var(--ink); }
.section-dark .article-body p{ color:var(--on-dark-mute); }
.article-quote{
  font-weight:700; font-style:italic; font-size:clamp(20px,2.8vw,32px); line-height:1.5;
  max-width:760px; letter-spacing:-.5px; color:var(--orange-glow); border-left:3px solid var(--orange);
  padding-left:24px; margin:0;
}

/* Process diagram */
.process-diagram{ display:flex; gap:24px; flex-wrap:wrap; margin-top:8px; }
.process-stage{ flex:1; min-width:190px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:20px; }
.section-dark .process-stage{ background:rgba(255,255,255,.06); border-color:var(--divider-dark); }
.process-stage .stage-icon{ width:30px; height:30px; border-radius:var(--r-full); background:var(--orange); margin-bottom:14px; }
.process-stage .stage-collab{ font-size:10px; font-family:var(--mono); opacity:.55; border-bottom:1px dashed var(--line); padding-bottom:10px; margin-bottom:14px; }
.process-stage h4{ font-size:13px; letter-spacing:.5px; margin-bottom:10px; font-weight:700; }
.process-stage ul{ font-size:12px; color:var(--body-c); display:flex; flex-direction:column; gap:6px; }
.section-dark .process-stage ul{ color:var(--on-dark-mute); }
.process-note{ margin-top:34px; display:flex; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--body-c); max-width:760px; }
.process-note .q{ min-width:170px; font-weight:700; opacity:.9; }

/* Brand Core */
.core-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; margin-top:8px; align-items:center; }
.core-list .core-row{ display:flex; gap:16px; padding:14px 0; border-top:1px solid var(--line); }
.core-list .core-row:last-child{ border-bottom:1px solid var(--line); }
.core-row .core-label{ font-family:var(--mono); font-size:11px; color:var(--orange); min-width:56px; text-transform:uppercase; letter-spacing:1px; }
.core-row .core-text{ font-size:13px; color:var(--body-c); }
.venn{ position:relative; display:flex; flex-direction:column; align-items:center; }
.venn-circle{ width:170px; height:170px; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center; text-align:center; font-size:12px; padding:20px; line-height:1.5; font-weight:600; }
.venn-circle.a{ background:rgba(234,40,4,.15); color:var(--orange-deep); margin-bottom:-44px; border:1px solid rgba(234,40,4,.3); }
.venn-circle.b{ background:var(--dark); color:var(--on-dark); }

/* Brand Essence */
.essence-row{ display:flex; gap:40px; flex-wrap:wrap; margin-bottom:34px; }
.essence-col{ flex:1; min-width:220px; }
.essence-col .label{ font-size:11px; opacity:.55; margin-bottom:8px; letter-spacing:1px; text-transform:uppercase; font-family:var(--mono); }
.essence-col .big{ font-weight:800; font-size:28px; letter-spacing:-1px; }
.palette{ display:flex; gap:16px; margin-top:6px; flex-wrap:wrap; }
.swatch{ width:100px; }
.swatch .chip{ height:54px; margin-bottom:8px; border-radius:var(--r-sm); }
.swatch .hex{ font-size:11px; font-family:var(--mono); }
.swatch .code{ font-size:10px; opacity:.5; }

/* Mockup grid — 4:3 고정 비율 균등 3열 */
.app-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
.app-grid .app-item{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-md); background:var(--surface); }
.app-grid .art-tile{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; transition:opacity .18s; }
.app-grid .art-tile:hover{ opacity:.82; }
@media (max-width:900px){ .app-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .app-grid{ grid-template-columns:1fr; } }

/* Application(디자인 원본) grid — 균등 3열 */
.design-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; columns:unset; }
.design-grid .app-item{ break-inside:unset; margin-bottom:0; }
@media (max-width:900px){ .design-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .design-grid{ grid-template-columns:1fr; } }

/* Exhibition grid (별도 유지) */
.exhibit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
.exhibit-grid .art-tile{ aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; }

.app-caption{ font-size:12px; color:var(--charcoal); margin-top:8px; }

/* Lightbox */
.lb-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.93); z-index:9000; align-items:center; justify-content:center; }
.lb-overlay.active{ display:flex; }
.lb-overlay img{ max-width:90vw; max-height:90vh; object-fit:contain; border-radius:4px; user-select:none; }
.lb-close{ position:fixed; top:20px; right:24px; color:#fff; font-size:32px; line-height:1; cursor:pointer; opacity:.6; z-index:9001; }
.lb-close:hover{ opacity:1; }
.lb-prev, .lb-next{ position:fixed; top:50%; transform:translateY(-50%); color:#fff; font-size:40px; line-height:1; cursor:pointer; opacity:.5; z-index:9001; padding:12px 20px; }
.lb-prev{ left:8px; }
.lb-next{ right:8px; }
.lb-prev:hover, .lb-next:hover{ opacity:1; }

/* Exhibition 다크 모드 텍스트 */
.exhibit-block[data-dark] .case-kicker .no{ color:var(--orange-glow); }
.exhibit-block[data-dark] .case-kicker h2,
.exhibit-block[data-dark] .case-kicker .en{ color:var(--on-dark); }
.exhibit-block[data-dark] .app-caption{ color:var(--on-dark-mute); }
.exhibit-block[data-dark] .exhibit-text{ color:var(--on-dark-mute); }

/* ---------- 확장 블록 타입 공용 컴포넌트 ---------- */
.block-subsection{ margin-top:28px; }
.block-subhead{ font-size:11px; text-transform:uppercase; letter-spacing:1px; opacity:.55; font-family:var(--mono); margin-bottom:10px; }
.block-note{ font-size:13px; color:var(--body-c); line-height:1.8; margin-top:18px; max-width:700px; }

/* Editorial spread (book/magazine page pairs) */
.spread-stack{ display:flex; flex-direction:column; gap:26px; margin-top:8px; }
.spread-pair{ display:flex; gap:8px; }
.spread-pair .spread-page{ flex:1; aspect-ratio:3/4; border-radius:var(--r-md); overflow:hidden; }
.spread-caption{ font-size:12px; color:var(--body-c); margin-top:8px; flex-basis:100%; }

/* Before/after, day/night compare pairs (spatial-plan, site-context) */
.compare-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px; }
.compare-item{ position:relative; }
.compare-badge{ position:absolute; top:8px; left:8px; z-index:1; background:rgba(255,255,255,.92); }

/* Dieline & spec sheet (package design) */
.dieline-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px; }
.dieline-grid .art-tile{ aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; }
.spec-sheet{ margin-top:20px; }

/* Poster series wall */
.poster-wall{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:8px; }
.poster-frame .art-tile{ aspect-ratio:3/4; border-radius:var(--r-md); overflow:hidden; }
.poster-caption{ font-size:12px; color:var(--body-c); margin-top:8px; }
@media (max-width:900px){ .poster-wall{ grid-template-columns:repeat(2,1fr); } }

/* Type specimen */
.specimen-display{ margin-bottom:8px; }
.specimen-big{ font-weight:800; font-size:40px; letter-spacing:-1px; }
.weight-glyph{ font-size:16px; margin:0 10px; }

/* Flow diagram (UX screen sequence) */
.flow-screens{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
.flow-screen-item .art-tile{ aspect-ratio:9/16; border-radius:var(--r-md); overflow:hidden; }
@media (max-width:900px){ .flow-screens{ grid-template-columns:1fr 1fr; } }

/* Device showcase (responsive screen mockups) */
.device-row{ display:flex; gap:24px; align-items:flex-end; flex-wrap:wrap; margin-top:8px; }
.device-frame{ background:var(--ink); border-radius:14px; padding:8px; }
.device-frame-desktop{ width:100%; }
.device-frame-tablet{ width:46%; }
.device-frame-mobile{ width:26%; }
.device-chrome{ display:flex; gap:5px; padding:4px 8px 8px; }
.chrome-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25); display:inline-block; }
.device-screen{ aspect-ratio:16/10; border-radius:6px; overflow:hidden; background:var(--card); }
.device-screen img{ width:100%; height:100%; object-fit:cover; }
.device-frame .app-caption{ color:#fff; opacity:.7; padding:6px 4px 2px; }
@media (max-width:900px){ .device-frame-tablet, .device-frame-mobile{ width:100%; } }

.related{ padding:64px 32px; }
.related-grid{ margin-top:20px; }

@media (max-width:760px){
  .core-grid, .essence-row{ grid-template-columns:1fr; display:flex; flex-direction:column; }
  .app-grid, .exhibit-grid{ grid-template-columns:1fr; }
}

/* ---------- FOOTER (ref: component.footer — surface-deep, multi-column) ---------- */
footer{
  /* top/bottom padding pulled from the site's spacing scale (--sp-xxl / the
     64px rhythm shared by .case-section/.related/.page-hero) so the footer
     doesn't feel like an off-scale afterthought; bottom is extra generous
     since the fixed bottom marquee (34px) otherwise crowds the last line. */
  position:relative; padding:var(--sp-xxl) 32px 64px; background:var(--deep); color:var(--on-dark);
}
footer .foot-credits{ display:flex; gap:20px; flex-wrap:wrap; font-size:13px; padding-bottom:16px; border-bottom:1px solid var(--divider-dark); margin-bottom:16px; }
footer .foot-policies{ display:flex; gap:18px; flex-wrap:wrap; font-size:12px; font-weight:700; margin-bottom:14px; }
footer .foot-policies a:hover{ color:var(--orange-glow); }
footer .foot-legal{
  display:flex; flex-wrap:wrap; font-family:var(--mono); font-size:11px;
  color:var(--on-dark); opacity:.5; line-height:2; letter-spacing:.2px; margin-bottom:18px;
}
footer .foot-legal span{ white-space:nowrap; }
footer .foot-legal span:not(:last-child)::after{ content:"·"; margin:0 9px; opacity:.6; }
footer .foot-legal a{ color:inherit; text-decoration:underline; text-decoration-color:rgba(255,255,255,.25); }
footer .foot-legal a:hover{ color:var(--orange-glow); text-decoration-color:var(--orange-glow); }
footer .foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; opacity:.6; }
footer .foot-admin-link{ font-size:11px; opacity:.4; color:inherit; text-decoration:none; letter-spacing:.05em; transition:opacity .2s; }
footer .foot-admin-link:hover{ opacity:1; color:var(--orange-glow); }
footer .foot-social{ display:flex; gap:14px; }
footer a:hover{ color:var(--orange-glow); }

/* Title scramble/glitch reveal — ref: tamura-ikuho.com/about/ */
.anim-title{ white-space:pre; }
.title-anim-wrap{ position:relative; overflow:visible; }
.title-glitch-chip{
  position:absolute; opacity:.9; pointer-events:none; z-index:5; border-radius:var(--r-xs);
  animation: title-chip-flicker .6s steps(2) forwards;
}
@keyframes title-chip-flicker{
  0%{opacity:1; transform:scale(1) rotate(0deg);}
  60%{opacity:.6; transform:scale(1.15) rotate(4deg);}
  100%{opacity:0; transform:scale(1.5) rotate(-4deg);}
}

@media (max-width:860px){
  .sidebar{ position:relative; width:100%; height:auto; flex-direction:row; flex-wrap:wrap; top:0; bottom:auto; }
  .page-wrap{ margin-left:0; width:100%; }
}

/* ---------- SHOP / PRICING (promotion, product, checkout) ---------- */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
.price-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 22px; display:flex; flex-direction:column; transition:.15s;
}
.price-card.featured{ border-color:var(--orange); box-shadow:0 0 0 1px var(--orange); }
.price-card:hover{ box-shadow:0 8px 24px rgba(32,32,32,.08); transform:translateY(-2px); }
.price-card .p-name{ font-size:17px; font-weight:800; }
.price-card .p-tagline{ font-size:12px; color:var(--charcoal); margin-top:4px; }
.price-card .p-price{ font-size:24px; font-weight:800; color:var(--orange); margin-top:18px; }
.price-card .p-price small{ font-size:12px; font-weight:600; color:var(--charcoal); }
.price-card .p-features{ margin-top:16px; display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--body-c); flex:1; }
.price-card .p-features li{ list-style:none; padding-left:16px; position:relative; }
.price-card .p-features li::before{ content:"·"; position:absolute; left:0; color:var(--orange); font-weight:800; }
.price-card .btn{ margin-top:20px; width:100%; }
@media (max-width:1000px){ .price-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .price-grid{ grid-template-columns:1fr; } }

/* Checkout */
.order-summary{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:24px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.order-summary .o-name{ font-weight:800; font-size:16px; }
.order-summary .o-desc{ font-size:12px; color:var(--charcoal); margin-top:4px; }
.order-summary .o-price{ font-size:22px; font-weight:800; color:var(--orange); white-space:nowrap; }
.pay-methods{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.pay-method{
  border:1px solid var(--line-strong); border-radius:var(--r-full); padding:10px 20px;
  font-size:13px; font-weight:600; cursor:pointer; background:var(--card); display:flex; align-items:center; gap:8px;
}
.pay-method input{ accent-color:var(--orange); }
.checkout-total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:18px; border-top:1px solid var(--line); margin-top:22px; font-weight:800; font-size:15px; }
.checkout-total .grand{ color:var(--orange); font-size:26px; }
.mock-note{ font-size:11px; color:var(--charcoal); font-family:var(--mono); margin-top:16px; line-height:1.7; }

/* Order complete */
.complete-box{ text-align:center; padding:100px 20px; }
.complete-box .ok-mark{ font-size:52px; color:var(--success); margin-bottom:22px; display:block; }
.complete-box .ok-sub{ font-size:14px; color:var(--body-c); margin-top:14px; max-width:440px; margin-left:auto; margin-right:auto; }
.complete-box .btn{ margin-top:32px; }

/* ---------- FLOATING CONTACT WIDGET (카카오 / 이메일 원클릭) ---------- */
.contact-widget{
  position:fixed; right:24px; bottom:calc(var(--marquee-h) + 22px); z-index:95;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.widget-btn{
  display:flex; align-items:center; gap:8px; padding:12px 18px; border-radius:var(--r-full);
  font-size:13px; font-weight:800; box-shadow:0 10px 24px rgba(32,32,32,.18); transition:.15s;
  white-space:nowrap;
}
.widget-btn .w-icon{ font-size:15px; line-height:1; }
.widget-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(32,32,32,.24); }
.widget-btn.kakao{ background:#FEE500; color:#3C1E1E; }
.widget-btn.mail{ background:var(--dark); color:#fff; }
.widget-btn.mail:hover{ background:var(--orange); }
.widget-btn.sound{ background:var(--canvas); color:var(--ink); border:1px solid var(--line); padding:10px 14px; font-size:16px; cursor:pointer; border-radius:var(--r-full); }
.widget-btn.sound:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.foot-admin-link{ font-size:11px; color:var(--charcoal); text-decoration:none; opacity:.45; margin-left:16px; }
.foot-admin-link:hover{ opacity:1; }
@media (max-width:860px){ .contact-widget{ right:14px; bottom:calc(var(--marquee-h) + 14px); } }

/* ---------- SPARK EASTER EGG (5회 연속 클릭 시 반응) ---------- */
.spark.deco{ cursor:pointer; }
.egg-particle{
  position:fixed; pointer-events:none; z-index:999; font-size:14px; line-height:1;
  transform:translate(-50%,-50%); animation:egg-fly .8s ease-out forwards;
}
@keyframes egg-fly{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  100%{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4); opacity:0; }
}
.egg-toast{
  position:fixed; top:calc(var(--marquee-h) + 16px); left:50%;
  background:var(--dark); color:#fff; padding:10px 22px; border-radius:var(--r-full);
  font-size:13px; font-weight:700; z-index:999; box-shadow:0 8px 20px rgba(0,0,0,.22);
  animation: egg-toast-inout 1.8s ease forwards;
}
@keyframes egg-toast-inout{
  0%{ opacity:0; transform:translate(-50%,-8px); }
  15%{ opacity:1; transform:translate(-50%,0); }
  85%{ opacity:1; transform:translate(-50%,0); }
  100%{ opacity:0; transform:translate(-50%,-8px); }
}

/* ---------- PROJECT PREV/NEXT NAV (case-study bottom) ---------- */
.proj-nav{ display:grid; grid-template-columns:1fr 1fr; }
.proj-nav a{
  position:relative; aspect-ratio:16/7; overflow:hidden; display:flex; align-items:flex-end;
  padding:28px; color:#fff;
}
.proj-nav a::before{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,.08)); z-index:1; }
.proj-nav a .art{ position:absolute; inset:0; }
.proj-nav .pn-label{ position:relative; z-index:2; }
.proj-nav .pn-dir{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:1.5px; opacity:.85; }
.proj-nav .pn-title{ font-size:20px; font-weight:800; margin-top:6px; max-width:320px; }
.proj-nav a.prev{ border-right:1px solid rgba(255,255,255,.15); }
.proj-nav a.next{ justify-content:flex-end; text-align:right; }
.proj-nav a.next .pn-label{ margin-left:auto; }
@media (max-width:760px){ .proj-nav{ grid-template-columns:1fr; } .proj-nav a.prev{ border-right:none; border-bottom:1px solid rgba(255,255,255,.15); } }

/* ---------- SCROLL-SYNCED PROGRESS MARK (project-detail / service-detail) ---------- */
.progress-nav{ display:flex; flex-wrap:wrap; gap:6px; position:relative; padding-top:28px; max-height:218px; overflow-y:auto; overflow-x:hidden; }
.prog-dot{
  width:30px; height:30px; border-radius:var(--r-full); border:1px solid var(--line);
  background:var(--card); font-family:var(--mono); font-size:11px; font-weight:700;
  color:var(--charcoal); cursor:pointer; transition:.15s;
}
.prog-dot:hover{ border-color:var(--ink); color:var(--ink); }
.prog-dot.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- LEGAL DOCUMENT PAGES (terms / privacy / refund-policy) ---------- */
.legal-doc{ max-width:760px; }
.legal-doc .doc-date{ font-family:var(--mono); font-size:12px; color:var(--charcoal); margin-bottom:28px; }
.legal-doc h2{ font-size:16px; font-weight:800; margin-top:36px; margin-bottom:12px; }
.legal-doc h2:first-child{ margin-top:0; }
.legal-doc h3{ font-size:14px; font-weight:800; margin-top:24px; margin-bottom:8px; color:var(--orange); }
.legal-doc p{ font-size:13.5px; line-height:1.9; color:var(--body-c); margin-top:8px; }
.legal-doc ol, .legal-doc ul{ margin-top:8px; padding-left:20px; }
.legal-doc ol{ list-style:decimal; }
.legal-doc ul{ list-style:disc; }
.legal-doc li{ font-size:13.5px; line-height:1.9; color:var(--body-c); margin-top:4px; }
.legal-doc table{ width:100%; border-collapse:collapse; margin-top:14px; font-size:12.5px; }
.legal-doc th, .legal-doc td{ border:1px solid var(--line); padding:10px 12px; text-align:left; color:var(--body-c); }
.legal-doc th{ background:var(--bone); font-weight:700; color:var(--ink); }
.legal-doc .doc-foot{ font-size:12px; color:var(--charcoal); margin-top:36px; padding-top:18px; border-top:1px solid var(--line); }

/* ---------- ICON SHAPE PLACEHOLDERS (실제 SVG 픽토그램 오기 전 자리 표시자) ---------- */
/* 도형만으로 아이콘 자리를 잡아둔다 — 나중에 <img class="icon-shape"> 로 바꿔 끼우면 그대로 대체됨 */
.icon-shape{ display:inline-flex; flex-shrink:0; background:var(--ink); }
.icon-shape.shape-circle{ border-radius:var(--r-full); }
.icon-shape.shape-ring{ background:none; border:3px solid var(--ink); border-radius:var(--r-full); }
.icon-shape.shape-square{ border-radius:var(--r-sm); }
.icon-shape.shape-diamond{ clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.icon-shape.shape-hex{ clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); }
.icon-shape.shape-blob{ border-radius:58% 42% 65% 35% / 45% 55% 45% 55%; }
.section-dark .icon-shape{ background:var(--on-dark); }
.section-dark .icon-shape.shape-ring{ background:none; border-color:var(--on-dark); }

/* ==========================================================================
   INFOGRAPHIC MODULE KIT (block-infographic.html + templates/module-*.html)
   PPT 인포그래픽처럼 모듈을 골라 한 블록 안에 자유롭게 쌓는 시스템.
   모듈 4종: node-chain / icon-grid / spec-table / text
   ========================================================================== */

/* ---- module: icon-grid — 카테고리 로우 / 고정 그리드 / 컬러 토큰을 layout 하나로 ---- */
.icon-category{ margin-top:var(--sp-xxl); }
.icon-category:first-child{ margin-top:8px; }
.icon-row{ display:flex; flex-wrap:wrap; gap:28px; margin-top:14px; }
.icon-item{ display:flex; flex-direction:column; align-items:center; gap:8px; width:64px; text-align:center; }
.icon-item .icon-shape{ width:40px; height:40px; }
.icon-caption{ font-size:11px; color:var(--charcoal); line-height:1.4; }
.icon-sub{ font-size:10px; color:var(--mute); font-family:var(--mono); }
.icon-row.icon-layout-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px 14px; }
.icon-row.icon-layout-grid .icon-item{ width:auto; }
.icon-row.icon-layout-grid .icon-item .icon-shape{ width:34px; height:34px; }
.icon-row.icon-layout-scatter .icon-item:nth-child(3n+1){ transform:translateY(-6px); }
.icon-row.icon-layout-scatter .icon-item:nth-child(3n+2){ transform:translateY(10px); }
.icon-row.icon-layout-scatter .icon-item:nth-child(4n){ transform:rotate(-4deg); }
.pictogram-kr{ font-size:12px; font-weight:700; color:var(--ink); }
.section-dark .pictogram-kr{ color:var(--on-dark); }
.pictogram-en{ font-size:10px; color:var(--mute); text-transform:lowercase; margin-top:-6px; }
.pictogram-featured{ display:flex; align-items:center; gap:20px; margin-top:var(--sp-xxl); padding-top:var(--sp-xxl); border-top:1px solid var(--line); }
.pictogram-featured .icon-shape{ width:96px; height:96px; }
.pictogram-featured .pictogram-kr{ font-size:16px; }
.pictogram-featured .pictogram-en{ font-size:12px; }
@media (max-width:640px){ .icon-row.icon-layout-grid{ grid-template-columns:repeat(3,1fr); } }

/* ---- module: node-chain — 도형/블롭/글리프/사진/알약 노드를 점선으로 연결 ---- */
.relation-map{ display:flex; flex-direction:column; gap:36px; margin-top:8px; }
.relation-chain{ display:flex; align-items:flex-start; flex-wrap:wrap; }
.relation-node{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; flex:1 1 160px; max-width:220px; padding:0 12px; }
.relation-icon{ display:flex; align-items:center; justify-content:center; min-height:40px; margin-bottom:10px; position:relative; z-index:1; }
.relation-node:not(:last-child)::after{
  content:""; position:absolute; top:20px; left:50%; width:100%; z-index:0;
  border-top:2px dotted var(--line-strong);
}
.relation-label{ font-size:13px; font-weight:700; color:var(--ink); }
.relation-sub{ font-size:11px; color:var(--mute); margin-top:1px; }
.relation-caption{ font-size:11px; color:var(--charcoal); margin-top:4px; line-height:1.6; }
.section-dark .relation-node:not(:last-child)::after{ border-top-color:var(--divider-dark); }
.section-dark .relation-label{ color:var(--on-dark); }
.section-dark .relation-sub, .section-dark .relation-caption{ color:var(--on-dark-mute); }
.relation-photo{ width:40px; height:40px; border-radius:var(--r-full); flex-shrink:0; overflow:hidden; }
.relation-node.relation-node-pill{
  flex-direction:row; align-items:center; text-align:left; flex:0 0 auto; max-width:320px; min-width:230px;
  gap:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-full); padding:8px 22px 8px 8px;
}
.relation-node.relation-node-pill .relation-icon{ margin-bottom:0; }
.relation-node.relation-node-pill .relation-label{ font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; }
.section-dark .relation-node.relation-node-pill{ background:rgba(255,255,255,.06); border-color:var(--divider-dark); }
/* 블롭(process 단계) 노드 */
.capsule-dot{ width:34px; height:34px; border-radius:58% 42% 65% 35% / 45% 55% 45% 55%; flex-shrink:0; }
/* 미니 글리프(추상 원 클러스터) 노드 */
.mini-glyph{ position:relative; width:56px; height:40px; display:inline-block; }
.mini-glyph span{ position:absolute; border-radius:var(--r-full); background:var(--stone); display:none; }
.mini-glyph.glyph-solo span:nth-child(1){ display:block; width:34px; height:34px; left:11px; top:3px; background:var(--charcoal); }
.mini-glyph.glyph-pair span:nth-child(1){ display:block; width:26px; height:26px; left:0; top:7px; background:var(--charcoal); }
.mini-glyph.glyph-pair span:nth-child(2){ display:block; width:26px; height:26px; left:20px; top:7px; background:var(--stone); opacity:.75; }
.mini-glyph.glyph-triad span:nth-child(1){ display:block; width:22px; height:22px; left:17px; top:0; background:var(--charcoal); }
.mini-glyph.glyph-triad span:nth-child(2){ display:block; width:22px; height:22px; left:6px; top:18px; background:var(--stone); }
.mini-glyph.glyph-triad span:nth-child(3){ display:block; width:22px; height:22px; left:28px; top:18px; background:var(--ash); }
.mini-glyph.glyph-grid4 span{ width:18px; height:18px; }
.mini-glyph.glyph-grid4 span:nth-child(1){ display:block; left:9px; top:0; background:var(--charcoal); }
.mini-glyph.glyph-grid4 span:nth-child(2){ display:block; left:31px; top:0; background:var(--stone); }
.mini-glyph.glyph-grid4 span:nth-child(3){ display:block; left:9px; top:20px; background:var(--ash); }
.mini-glyph.glyph-grid4 span:nth-child(4){ display:block; left:31px; top:20px; background:var(--charcoal); opacity:.75; }
.mini-glyph.glyph-large span:nth-child(1){ display:block; width:40px; height:40px; left:8px; top:0; background:var(--ink); }
/* 블롭/글리프 뒤에 붙는 불릿 목록 + 대시 키워드 캡슐 (process 스타일 노드용) */
.capsule-items{ list-style:none; padding:0; margin:10px 0 0; text-align:left; }
.capsule-items li{ font-size:12.5px; color:var(--body-c); line-height:1.7; padding-left:12px; position:relative; }
.capsule-items li::before{ content:"·"; position:absolute; left:0; }
.capsule-keywords{ border:1px dashed var(--line-strong); border-radius:var(--r-full); padding:14px 18px; display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; margin-top:12px; }
.capsule-kw{ font-size:12px; color:var(--charcoal); }
.section-dark .capsule-items li{ color:var(--on-dark-mute); }
.section-dark .capsule-keywords{ border-color:var(--divider-dark); }
.section-dark .capsule-kw{ color:var(--on-dark-mute); }
@media (max-width:640px){
  .relation-chain{ flex-direction:column; gap:20px; }
  .relation-node{ max-width:none; }
  .relation-node:not(:last-child)::after{ display:none; }
}

/* ---- module: spec-table — .core-list 재사용 (block-brand-core.html과 동일 구조) ---- */
/* ---- module: text — .insight-text 재사용 (block-insight.html과 동일 구조) ---- */

/* ── Slide Deck (block-slide-deck) ── */
.slide-deck{ margin-top:8px; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.slide-stage{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; border-radius:var(--r-md); overflow:hidden; background:#1a1a1a; outline:none; }
.slide-stage:focus-visible{ box-shadow:0 0 0 3px var(--orange); }
.slide-img{ display:block; width:100%; height:auto; max-height:85vh; object-fit:contain; pointer-events:none; }
.slide-img[hidden]{ display:none; }
.slide-btn:disabled{ opacity:.25; cursor:default; }
.slide-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:10; background:rgba(0,0,0,.45); color:#fff; border:none; border-radius:var(--r-sm); width:44px; height:60px; font-size:1.9rem; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.slide-btn:hover{ background:rgba(0,0,0,.8); }
.slide-prev{ left:10px; }
.slide-next{ right:10px; }
.slide-counter-badge{ position:absolute; bottom:10px; right:12px; background:rgba(0,0,0,.55); color:#fff; font-size:12px; padding:3px 10px; border-radius:var(--r-full); }
.slide-thumbs-wrap{ overflow-x:auto; padding:10px 4px 4px; scrollbar-width:thin; }
.slide-thumbs{ display:flex; gap:6px; }
.slide-thumb{ flex-shrink:0; padding:0; border:0; background:none; border-radius:var(--r-sm); cursor:pointer; opacity:.45; transition:opacity .2s; outline:2px solid transparent; outline-offset:2px; }
.slide-thumb img{ display:block; height:56px; width:auto; border-radius:var(--r-sm); pointer-events:none; }
.slide-thumb.active{ opacity:1; outline-color:var(--orange); }
.slide-thumb:hover, .slide-thumb:focus-visible{ opacity:.8; }
@media(max-width:600px){ .slide-btn{ width:36px; height:48px; font-size:1.5rem; } .slide-thumb img{ height:40px; } }

/* ── Video (block-video, YouTube 임베드) ── */
.video-list{ display:grid; gap:28px; margin-top:8px; }
.video-item{ margin:0; }
.video-frame{ position:relative; aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden; background:#1a1a1a; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }