@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   younsubjung.com — Design System v9  (2026)
   ───────────────────────────────────────────────────────────────────
   v8 대비 바뀐 것
   · 상단 유틸바 제거 → 떠 있는 글래스 필 내비게이션
   · 1px 회색 선 → 표면 고도(elevation) + 반투명
   · 직각 모서리 → 14 / 22 / 32 / 44px 라운드 스케일
   · 균등 4단 그리드 → 벤토(비대칭) 타일
   · 표 → 라운드 리스트 카드
   · 정적 배경 → 애니메이션 그라디언트 메시
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   0. TOKENS
   ───────────────────────────────────────────── */
:root{
  /* 브랜드 */
  /* ── 브랜드 2색 (확정 2026.08) ────────────────────────────
     옐로는 비긴메이트에서 승계합니다. 다만 흰 배경에서 대비가 1.3:1 밖에
     안 나오므로 **라이트 모드에서는 글자색으로 쓰지 않습니다.**
       · 다크 배경  — 옐로를 글자색·선·강조에 씁니다 (13.5:1)
       · 라이트 배경 — 강조는 잉크(검정)가 맡고, 옐로는 '칠하는 면'으로만
                       (옐로 배경 + 잉크 글자 = 13.5:1, 안전)
     ──────────────────────────────────────────────────────── */
  --y:#FED11D;              /* SIGNAL YELLOW — 비긴메이트 승계 */
  --yt:#FED11D;             /* 옐로를 '글자색'으로 쓸 때. 라이트 모드에서는 골드로 내려갑니다 */
  --ink:#111114;            /* INK — 로고 기본색 · 라이트 모드 강조 · 옐로 위 글자 */
  /* 제목용 디스플레이 서체 — Wanted Sans (가변, 400~1000) */
  --display:"Wanted Sans Variable","Wanted Sans","Pretendard Variable",Pretendard,
            -apple-system,system-ui,sans-serif;
  --ink-2:#2A2A32;
  --y-2:#FFE066;
  --y-ink:#2A2100;          /* 옐로 위 텍스트 — 10.4:1 */

  /* 표면 — 선이 아니라 고도로 구분한다 */
  --bg:#08080A;
  --bg-2:#0D0D10;
  --s-1:rgba(255,255,255,.035);
  --s-2:rgba(255,255,255,.055);
  --s-3:rgba(255,255,255,.085);
  --hair:rgba(255,255,255,.07);   /* 꼭 필요한 곳에만 */

  /* 텍스트 */
  --w:#FBFBFD;
  --w70:rgba(251,251,253,.76);
  --w45:rgba(251,251,253,.56);
  --w25:rgba(251,251,253,.47);   /* 검은 배경에서 4.5:1 을 넘기는 최소선 */

  /* 라운드 스케일 */
  --r1:14px; --r2:22px; --r3:32px; --r4:44px; --rp:999px;

  /* 그림자 — 떠 있는 느낌 */
  --sh-1:0 2px 8px rgba(0,0,0,.30);
  --sh-2:0 12px 40px rgba(0,0,0,.45);
  --sh-3:0 32px 90px rgba(0,0,0,.60);
  --glow:0 0 0 1px rgba(254,209,29,.25), 0 18px 60px rgba(254,209,29,.10);

  /* 모션 */
  --sp:cubic-bezier(.22,1,.36,1);          /* spring-ish out */
  --sp2:cubic-bezier(.34,1.56,.64,1);      /* overshoot */
  --ez:cubic-bezier(.4,0,.2,1);

  /* 읽기 — 본문 한 줄 55자(공백 포함) 기준 */
  --read:min(53em, calc(100vw - 2 * var(--pad)));
  --read-size:clamp(16.5px,1.1vw + 4px,18px);
  --read-font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
              "Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;

  /* 레이아웃 */
  --pad:clamp(20px,5vw,84px);
  --max:1560px;
  --nav-h:70px;

  /* 폰트 */
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ─────────────────────────────────────────────
   1. RESET
   ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
html.lock,html.lock body{overflow:hidden}
body{
  font-family:var(--sans);
  background:transparent;   /* 배경은 html 이 담당 — .mesh/.grain(z-index:-1) 이 보이게 */
  color:var(--w);
  line-height:1.62;
  letter-spacing:-.011em;
  word-break:keep-all;
  overflow-wrap:break-word;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
::selection{background:var(--y);color:var(--y-ink)}
.cta,.cta:hover,.cta:visited{color:var(--y-ink)}
:focus-visible{outline:2px solid var(--y);outline-offset:3px;border-radius:6px}
.mo{font-family:var(--mono);letter-spacing:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ─────────────────────────────────────────────
   2. 배경 — 애니메이션 그라디언트 메시 + 그레인
   ───────────────────────────────────────────── */
.mesh{
  position:fixed;inset:-20vh -20vw;z-index:-2;pointer-events:none;
  filter:blur(90px) saturate(140%);opacity:.55;
}
.mesh i{position:absolute;border-radius:50%;display:block;will-change:transform}
.mesh i:nth-child(1){width:52vw;height:52vw;left:-6vw;top:-4vh;
  background:radial-gradient(circle,rgba(254,209,29,.20),transparent 68%);animation:m1 26s var(--ez) infinite alternate}
.mesh i:nth-child(2){width:44vw;height:44vw;right:-6vw;top:18vh;
  background:radial-gradient(circle,rgba(90,120,255,.16),transparent 68%);animation:m2 32s var(--ez) infinite alternate}
.mesh i:nth-child(3){width:40vw;height:40vw;left:26vw;bottom:-10vh;
  background:radial-gradient(circle,rgba(255,120,60,.13),transparent 68%);animation:m3 38s var(--ez) infinite alternate}
@keyframes m1{to{transform:translate3d(14vw,10vh,0) scale(1.25)}}
@keyframes m2{to{transform:translate3d(-12vw,-8vh,0) scale(1.18)}}
@keyframes m3{to{transform:translate3d(8vw,-12vh,0) scale(1.3)}}

.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.030;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 배경 레이어를 음수 z-index 로 깔았으므로 본문에는 손대지 않는다.
   (예전처럼 body>* 에 z-index 를 주면 .hd/.chat/.fab 의 position:fixed 가 덮어써진다) */

/* ─────────────────────────────────────────────
   3. 진입 로더
   ───────────────────────────────────────────── */
/* 진입 스플래시는 쓰지 않습니다. 명함 대신 보내는 링크에서는 순수 손해입니다. */
.load{display:none}
.load.done{opacity:0;visibility:hidden}
.load__n{font-size:clamp(24px,4vw,46px);font-weight:800;letter-spacing:-.04em;overflow:hidden}
.load__n span{display:block;animation:up .9s var(--sp) both}
.load__n i{font-style:normal;color:var(--yt)}
@keyframes up{from{transform:translateY(110%)}to{transform:none}}
.load__b{width:min(240px,50vw);height:2px;border-radius:2px;background:var(--s-2);margin:22px auto 0;overflow:hidden}
.load__b i{display:block;height:100%;width:0;background:var(--y);border-radius:2px;animation:bar 1.5s var(--ez) forwards}
@keyframes bar{to{width:100%}}

/* 스크롤 진행 */
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--y);z-index:8000;
  box-shadow:0 0 14px rgba(254,209,29,.6)}

/* 커서 */
.cur{position:fixed;top:0;left:0;width:32px;height:32px;border-radius:50%;z-index:8500;
  pointer-events:none;opacity:0;mix-blend-mode:difference;
  background:rgba(255,255,255,.9);
  transition:width .3s var(--sp2),height .3s var(--sp2),opacity .3s,margin .3s var(--sp2)}
.cur.on{opacity:.85}
.cur.big{width:74px;height:74px;margin:-21px 0 0 -21px;background:var(--y)}
@media (hover:none){.cur{display:none}}

/* ─────────────────────────────────────────────
   4. 떠 있는 글래스 필 내비게이션
   ───────────────────────────────────────────── */
.hd{
  position:fixed;top:14px;left:0;right:0;z-index:7000;
  padding-inline:var(--pad);
  transition:top .4s var(--sp),transform .45s var(--sp);
}
.hd.up{transform:translateY(-140%)}
.hd__in{
  max-width:var(--max);margin-inline:auto;
  height:var(--nav-h);
  display:flex;align-items:center;gap:clamp(10px,2vw,26px);
  padding:0 10px 0 22px;
  border-radius:var(--rp);
  background:rgba(14,14,18,.62);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),var(--sh-2);
  transition:background .4s var(--ez),box-shadow .4s var(--ez);
}
.hd.solid .hd__in{background:rgba(10,10,13,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),var(--sh-3)}

/* 헤더 로고 — 옐로 판 + 잉크 마크. 다크·라이트 양쪽에서 같은 모양입니다 */
.lg{display:flex;align-items:center;gap:11px;flex:none;--lg-bg:var(--y);--lg-fg:var(--ink)}
.lg__m{width:34px;height:34px;flex:none;border-radius:11px;background:var(--y);
  padding:0;box-shadow:0 6px 18px rgba(254,209,29,.26);transition:transform .45s var(--sp2)}
.lg__m rect{fill:var(--y)}
/* 새 YJ 마크는 획(stroke)으로 그려집니다 — 채우면 안 됩니다 */
.lg__m path{fill:none}
/* 워드마크 — 폰트로 조판하지 않고, CI 로 그린 아웃라인을 마스크로 씁니다.
   색은 currentColor 라 다크·라이트 모드에서 자동으로 뒤집힙니다. */
.lg__w{display:block;width:148px;height:auto;flex:none;color:var(--w)}
:root[data-theme="light"] .lg__w{color:var(--ink)}
.lg:hover .lg__m{transform:rotate(-6deg) scale(1.07)}
@media(max-width:1040px){.lg__w{width:126px;height:13.3px}}
@media(max-width:520px){.lg__w{display:none}}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{
  position:relative;padding:9px 15px;border-radius:var(--rp);
  font-size:14px;font-weight:600;color:var(--w70);
  transition:color .25s,background .25s
}
.nav a:hover{color:var(--w);background:var(--s-2)}
.nav a[aria-current]{color:var(--y-ink);background:var(--y)}

.lang{display:flex;align-items:center;gap:1px;padding:4px;border-radius:var(--rp);background:var(--s-1);flex:none}
.lang b,.lang a{font-family:var(--mono);font-size:11px;padding:5px 10px;border-radius:var(--rp);letter-spacing:.04em}
.lang b{background:var(--s-3);color:var(--w)}
.lang a{color:var(--w70)}
.lang a:hover{color:var(--w)}

.cta{
  --bg1:var(--y);
  position:relative;overflow:hidden;flex:none;
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:var(--rp);
  background:var(--bg1);color:var(--y-ink);
  font-size:14px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;
  box-shadow:0 8px 26px rgba(254,209,29,.22);
  transition:transform .4s var(--sp2),box-shadow .4s var(--ez)
}
.cta::after{content:"→";transition:transform .4s var(--sp)}
.cta:hover{box-shadow:0 14px 40px rgba(254,209,29,.34)}
.cta:hover::after{transform:translateX(4px)}
.cta--o{background:var(--s-2);color:var(--w);box-shadow:inset 0 0 0 1px var(--hair)}
.cta--o:hover{background:var(--s-3);box-shadow:inset 0 0 0 1px rgba(254,209,29,.4)}

.bgr{display:none;width:44px;height:44px;border-radius:var(--rp);background:var(--s-2);
  place-items:center;flex:none}
.bgr i{display:block;width:16px;height:1.6px;border-radius:2px;background:var(--w);
  transition:transform .4s var(--sp),opacity .3s}
.bgr i+i{margin-top:5px}
body.op .bgr i:first-child{transform:translateY(3.3px) rotate(45deg)}
body.op .bgr i:last-child{transform:translateY(-3.3px) rotate(-45deg)}

/* 모바일 시트 */
.sheet{
  position:fixed;inset:0;z-index:6900;background:rgba(8,8,10,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 var(--pad);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ez),visibility .45s
}
body.op .sheet{opacity:1;visibility:visible}
.sheet a{
  display:flex;align-items:baseline;gap:16px;padding:16px 22px;border-radius:var(--r2);
  font-size:clamp(26px,7vw,40px);font-weight:800;letter-spacing:-.04em;
  transform:translateY(24px);opacity:0;transition:transform .6s var(--sp),opacity .6s,background .3s
}
.sheet a:active{background:var(--s-2)}
body.op .sheet a{transform:none;opacity:1}
body.op .sheet a:nth-child(1){transition-delay:.05s}
body.op .sheet a:nth-child(2){transition-delay:.10s}
body.op .sheet a:nth-child(3){transition-delay:.15s}
body.op .sheet a:nth-child(4){transition-delay:.20s}
body.op .sheet a:nth-child(5){transition-delay:.25s}
.sheet em{font-family:var(--mono);font-style:normal;font-size:12px;color:var(--yt)}

/* ─────────────────────────────────────────────
   5. 리빌 / 모션 유틸
   ───────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ez),transform .9s var(--sp)}
.rv.on{opacity:1;transform:none}
.rv--1{transition-delay:.08s}.rv--2{transition-delay:.16s}.rv--3{transition-delay:.24s}

.fade{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ez) .25s,transform .8s var(--sp) .25s}
.on .fade,.rdy .fade{opacity:1;transform:none}
.fade--1{transition-delay:.4s}.fade--2{transition-delay:.55s}.fade--3{transition-delay:.7s}

/* 마스크 라인 리빌 */
.ln{display:block;overflow:hidden}
.ln>span{display:block;transform:translateY(105%);transition:transform 1s var(--sp) .2s}
.on .ln>span,.rdy .ln>span{transform:none}

/* 자석 버튼 래퍼 */
.mag{display:inline-block;will-change:transform}

/* ─────────────────────────────────────────────
   6. 섹션 · 헤더 조각
   ───────────────────────────────────────────── */
.sec{padding-block:clamp(64px,9vw,140px)}
.sec--t{position:relative}
.sec--t::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.028) 18%,rgba(255,255,255,.028) 82%,transparent);
}
.k{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--yt);
}
.k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--y);
  box-shadow:0 0 12px var(--y)}

.sbar{display:flex;align-items:flex-end;gap:clamp(16px,3vw,40px);margin-bottom:clamp(28px,4vw,54px);flex-wrap:wrap}
.sbar h2{font-size:clamp(30px,4.6vw,64px);margin-top:10px}
.sbar__g{
  font-family:var(--mono);font-size:clamp(40px,7vw,110px);line-height:.8;font-weight:400;
  color:rgba(255,255,255,.16);
  -webkit-text-stroke:1.5px rgba(255,255,255,.62);
  flex:none;
}
@supports not ((-webkit-text-stroke:1px #000)){
  .sbar__g{color:var(--w45);-webkit-text-stroke:0}
}
.more{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:var(--rp);background:var(--s-1);
  font-size:13.5px;font-weight:600;color:var(--w70);
  box-shadow:inset 0 0 0 1px var(--hair);
  transition:background .3s,color .3s,transform .4s var(--sp2)
}
.more:hover{background:var(--s-3);color:var(--w);transform:translateX(4px)}

/* ─────────────────────────────────────────────
   7. HERO — 인셋 라운드 풀블리드
   ───────────────────────────────────────────── */
.hero{
  position:relative;
  margin:calc(var(--nav-h) + 30px) var(--pad) 0;
  height:clamp(560px,88vh,940px);
  border-radius:var(--r4);
  overflow:hidden;
  box-shadow:var(--sh-3),inset 0 0 0 1px rgba(255,255,255,.07);
  isolation:isolate;
}
.sl{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.1s var(--ez),visibility 1.1s}
.sl.on{opacity:1;visibility:visible}
.sl__im{position:absolute;inset:0;z-index:0}
.sl__im img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);
  transition:transform 9s linear;filter:saturate(.92) contrast(1.02)}
.sl.on .sl__im img{transform:scale(1)}
.sl__im::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(6,6,8,.96) 0%,rgba(6,6,8,.86) 42%,rgba(6,6,8,.42) 76%,rgba(6,6,8,.22) 100%),
    linear-gradient(0deg,rgba(6,6,8,.86),rgba(6,6,8,.10) 58%),
    linear-gradient(180deg,rgba(6,6,8,.42),transparent 34%);
}
.sl__in{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(30px,5vw,84px);
  padding-bottom:clamp(96px,11vw,150px);
  max-width:min(980px,86%);
}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tags span{
  padding:7px 15px;border-radius:var(--rp);font-size:12px;font-weight:600;
  background:var(--s-2);backdrop-filter:blur(10px);color:var(--w70);
  box-shadow:inset 0 0 0 1px var(--hair)
}
.tags .k{background:var(--y);color:var(--y-ink);box-shadow:none;font-size:11px}
.tags .k::before{background:var(--y-ink);box-shadow:none}
.sl__t{font-size:clamp(34px,6.4vw,88px);letter-spacing:-.05em;line-height:1.03}
.sl__d{margin-top:22px;max-width:60ch;font-size:clamp(14.5px,1.35vw,18px);color:var(--w70);line-height:1.82}
.sl__a{
  margin-top:32px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:var(--rp);
  background:rgba(255,255,255,.09);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  font-size:14.5px;font-weight:700;
  transition:background .35s,transform .45s var(--sp2)
}
.sl__a:hover{background:var(--y);color:var(--y-ink);box-shadow:none;transform:translateY(-2px)}

.hui{
  position:absolute;left:clamp(30px,5vw,84px);right:clamp(30px,5vw,84px);
  bottom:clamp(26px,3.5vw,50px);z-index:3;
  display:flex;align-items:center;gap:20px
}
.hui__c{font-family:var(--mono);font-size:12px;color:var(--w45);flex:none}
.hui__c b{color:var(--w);font-size:17px;font-weight:500}
.hui__p{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.hui__p i{display:block;height:100%;width:0;background:var(--y);border-radius:2px}
.hui__n{display:flex;gap:8px;flex:none}
.hui__n button{
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.08);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  display:grid;place-items:center;font-size:15px;
  transition:background .3s,transform .4s var(--sp2)
}
.hui__n button:hover{background:var(--y);color:var(--y-ink);transform:scale(1.1)}

/* ─────────────────────────────────────────────
   8. 페이지 헤드 (하위 페이지)
   ───────────────────────────────────────────── */
.ph{
  position:relative;
  margin:calc(var(--nav-h) + 30px) var(--pad) 0;
  border-radius:var(--r4);overflow:hidden;
  padding:clamp(60px,9vw,130px) clamp(26px,4.5vw,72px) clamp(44px,6vw,86px);
  box-shadow:var(--sh-2),inset 0 0 0 1px rgba(255,255,255,.07);
  isolation:isolate;
}
.ph__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.ph__bg img{width:100%;height:100%;object-fit:cover;opacity:.30;transform:scale(1.12)}
.ph__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(8,8,10,.92),rgba(8,8,10,.55) 60%,rgba(8,8,10,.85))}
/* 사진이 없는 페이지 헤드 — 테두리 흰 선이 라이트 모드에서 뜨지 않게 */
:root[data-theme="light"] .ph:not(.ph--img){box-shadow:var(--sh-1),inset 0 0 0 1px var(--hair);
  background:rgba(255,255,255,.55)}
.ph:not(.ph--img){background:var(--s-1)}
.ph__row{display:grid;grid-template-columns:minmax(0,1.35fr) auto;gap:clamp(28px,4vw,64px);align-items:end}
.ph h1{font-size:clamp(38px,7vw,96px);letter-spacing:-.05em;margin:18px 0 20px}
.ph p{max-width:62ch;color:var(--w70);font-size:clamp(14.5px,1.3vw,17.5px);line-height:1.85}

.stat{display:flex;gap:10px;flex-wrap:wrap}
.stat>div{
  min-width:130px;padding:20px 22px;border-radius:var(--r2);
  background:var(--s-1);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px var(--hair)
}
.stat b{display:block;font-size:clamp(24px,2.8vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1}
.stat span{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--w45)}

/* ─────────────────────────────────────────────
   9. 마퀴
   ───────────────────────────────────────────── */
.mq{
  overflow:hidden;padding:clamp(26px,3.2vw,44px) 0;margin-top:clamp(40px,5vw,72px);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.mq__t{display:flex;width:max-content;animation:mq 42s linear infinite}
.mq:hover .mq__t{animation-play-state:paused}
.mq__t>div{display:flex;align-items:center;gap:clamp(20px,2.6vw,44px);padding-right:clamp(20px,2.6vw,44px)}
.mq__t span{font-size:clamp(24px,3.4vw,52px);font-weight:800;letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.50);white-space:nowrap;
  transition:color .4s,-webkit-text-stroke-color .4s}
.mq__t span:hover{color:var(--yt);-webkit-text-stroke-color:transparent}
.mq__t i{color:var(--yt);font-size:12px;font-style:normal;opacity:.7}
@keyframes mq{to{transform:translateX(-50%)}}
/* 휴대폰에서는 글자가 작아 테두리만으로는 안 보입니다. 속을 채웁니다 */
@media (max-width:720px){
  .mq{padding-block:22px;margin-top:clamp(30px,5vw,50px)}
  .mq__t span{font-size:21px;letter-spacing:-.03em;
    color:rgba(255,255,255,.52);-webkit-text-stroke-width:0}
  .mq__t i{font-size:10px}
}

/* ─────────────────────────────────────────────
   10. 카드
   ───────────────────────────────────────────── */
.card{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r3);
  background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair);
  transition:transform .55s var(--sp),box-shadow .55s var(--ez),background .4s;
  will-change:transform;
}
.card:hover{transform:translateY(-8px);background:var(--s-2);
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.30),var(--sh-2)}
.card.hide{display:none}

.card__i{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r3) var(--r3) 0 0}
.card__i--w{aspect-ratio:16/10}
.card__i img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  transition:transform 1.1s var(--sp),filter .6s;filter:saturate(.85)}
.card:hover .card__i img{transform:scale(1.14);filter:saturate(1.05)}
.card__i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,8,.10),rgba(6,6,8,.82))}
.card__n{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  padding:6px 12px;border-radius:var(--rp);
  background:rgba(10,10,13,.62);backdrop-filter:blur(10px);color:var(--w70);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)
}
.card__go{
  position:absolute;top:12px;right:12px;z-index:2;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.10);backdrop-filter:blur(10px);font-size:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  transform:scale(.8);opacity:0;transition:all .45s var(--sp2)
}
.card:hover .card__go{transform:none;opacity:1;background:var(--y);color:var(--y-ink);box-shadow:none}
.card__g{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px}
.card__f{display:none}
.card__w{font-size:clamp(24px,2.6vw,38px);font-weight:800;letter-spacing:-.045em;line-height:1.05}
.card__b{padding:clamp(20px,2.2vw,30px)}
.card__t{font-size:clamp(16px,1.5vw,21px);line-height:1.34;letter-spacing:-.03em;min-height:2.7em}
.card__d{margin-top:12px;font-size:14px;color:var(--w45);line-height:1.78;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__m{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.card__m span{
  padding:6px 12px;border-radius:var(--rp);background:var(--s-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--w70)
}
.card__m b{color:var(--yt);font-weight:600}
.card__cat{position:absolute;left:14px;bottom:14px;z-index:2;font-size:11.5px;font-weight:600;
  padding:6px 12px;border-radius:var(--rp);background:rgba(10,10,13,.7);backdrop-filter:blur(8px)}
.badge{position:absolute;top:12px;right:12px;z-index:2;font-size:11px;font-weight:700;
  padding:6px 12px;border-radius:var(--rp)}
.badge.ok{background:var(--y);color:var(--y-ink)}
.badge.warn{background:rgba(255,255,255,.16);backdrop-filter:blur(8px);color:var(--w)}
.badge.no{background:rgba(255,90,90,.22);color:#FFC2C2}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

/* ─────────────────────────────────────────────
   11. 벤토 그리드 — 비대칭 타일
   ───────────────────────────────────────────── */
.bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(12px,1.4vw,20px);
}
.bento>*{min-width:0}
.b-6{grid-column:span 6}.b-4{grid-column:span 4}.b-3{grid-column:span 3}
.b-2{grid-column:span 2}.b-r2{grid-row:span 2}

.tile{
  position:relative;overflow:hidden;border-radius:var(--r3);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);
  padding:clamp(24px,2.6vw,40px);
  display:flex;flex-direction:column;
  transition:transform .55s var(--sp),box-shadow .55s var(--ez),background .4s;
  will-change:transform;
}
a.tile:hover{transform:translateY(-6px);background:var(--s-2);
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.28),var(--sh-2)}
.tile--y{background:var(--y);color:var(--y-ink);box-shadow:0 18px 60px rgba(254,209,29,.18)}
.tile--y .tile__k{color:rgba(42,33,0,.74)}
.tile--y .tile__k::before{background:var(--y-ink);box-shadow:none}
.tile--y .tile__d{color:rgba(42,33,0,.78)}
.tile--img{padding:0;min-height:clamp(240px,26vw,400px)}
.tile__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.tile__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.8);
  transform:scale(1.06);transition:transform 1.2s var(--sp)}
a.tile:hover .tile__bg img{transform:scale(1.13)}
.tile__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,8,.18),rgba(6,6,8,.88))}
.tile__c{position:relative;z-index:1;margin-top:auto;padding:clamp(22px,2.4vw,34px)}
.tile__k{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--yt);margin-bottom:14px}
.tile__k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--y);box-shadow:0 0 10px var(--y)}
.tile__h{font-size:clamp(19px,2vw,29px);letter-spacing:-.035em;line-height:1.22}
.tile__d{margin-top:12px;font-size:14px;color:var(--w45);line-height:1.78}
.tile__big{font-size:clamp(44px,6vw,96px);font-weight:800;letter-spacing:-.055em;line-height:.94}
.tile__big em{font-style:normal;color:var(--yt)}
.tile--y .tile__big em{color:var(--y-ink);opacity:.5}
.tile__arr{
  position:absolute;top:clamp(18px,2vw,26px);right:clamp(18px,2vw,26px);z-index:2;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:15px;
  background:var(--s-2);box-shadow:inset 0 0 0 1px var(--hair);
  transition:all .45s var(--sp2)
}
a.tile:hover .tile__arr{background:var(--y);color:var(--y-ink);box-shadow:none;transform:rotate(45deg)}

/* ─────────────────────────────────────────────
   12. 가로 핀 스크롤
   ───────────────────────────────────────────── */
/* 스크롤을 가로채지 않습니다. 트랙패드·모션최소화·구형 브라우저에서 깨지고,
   헤드리스 렌더에서 빈 화면이 나옵니다. 네이티브 가로 스크롤로 바꿨습니다. */
.hz{position:relative;padding-block:clamp(48px,7vw,110px)}
.hz__pin{display:block}
.hz__hd{padding:0 var(--pad);max-width:var(--max);margin:0 auto clamp(24px,3vw,44px);width:100%}
.hz__hd h2{font-size:clamp(30px,4.6vw,64px);margin-top:10px}
.hz__hd .sbar{margin-bottom:0}
.hz__bar{display:none}
.hz__bar i{display:block;height:100%;width:0;background:var(--y);border-radius:2px}
.hz__track{
  display:flex;gap:clamp(14px,1.6vw,24px);padding-inline:var(--pad);padding-bottom:16px;
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--s-3) transparent;
}
.hz__track::-webkit-scrollbar{height:5px}
.hz__track::-webkit-scrollbar-thumb{background:var(--s-3);border-radius:5px}
.hz__track::-webkit-scrollbar-thumb:hover{background:var(--y)}
.hz__track>*{flex:0 0 clamp(280px,25vw,380px);scroll-snap-align:start}
.hz__track .rv{opacity:1;transform:none;transition:none}

/* ─────────────────────────────────────────────
   13. 콜아웃 (2단 · 이미지 + 텍스트)
   ───────────────────────────────────────────── */
.co{
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,3vw,54px);align-items:center;
  max-width:var(--max);margin-inline:auto;padding:clamp(60px,8vw,130px) var(--pad)
}
.co__i{position:relative;border-radius:var(--r3);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--sh-2)}
.co__i img{width:100%;height:100%;object-fit:cover}
.co__i .lb{
  position:absolute;left:16px;bottom:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  padding:7px 14px;border-radius:var(--rp);
  background:rgba(10,10,13,.66);backdrop-filter:blur(10px);color:var(--w70);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)
}
.co__r h3{font-size:clamp(28px,4.2vw,58px);letter-spacing:-.045em;margin:16px 0 22px}
.co__r p{color:var(--w70);font-size:clamp(14.5px,1.25vw,17px);line-height:1.9;max-width:56ch}
.co__st{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.co__st>div{padding:18px 24px;border-radius:var(--r2);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair);min-width:120px}
.co__st b{display:block;font-size:clamp(22px,2.4vw,34px);font-weight:800;letter-spacing:-.04em;line-height:1}
.co__st span{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--w45)}

/* ─────────────────────────────────────────────
   14. 현장 카드 (act)
   ───────────────────────────────────────────── */
.act{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px)}
.ai{
  position:relative;display:block;overflow:hidden;border-radius:var(--r3);
  aspect-ratio:3/4;box-shadow:inset 0 0 0 1px var(--hair);
  transition:transform .55s var(--sp),box-shadow .55s var(--ez);will-change:transform
}
.ai:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 1px rgba(254,209,29,.3),var(--sh-2)}
.ai img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.8);transform:scale(1.06);transition:transform 1.2s var(--sp),filter .6s}
.ai:hover img{transform:scale(1.14);filter:saturate(1.05)}
.ai::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,8,.1),rgba(6,6,8,.9))}
.ai__b{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(18px,2vw,26px)}
.ai__k{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;padding:5px 11px;border-radius:var(--rp);
  background:var(--y);color:var(--y-ink);margin-bottom:12px}
.ai__t{font-size:clamp(15px,1.4vw,19px);font-weight:700;letter-spacing:-.03em;line-height:1.34}
.ai__d{margin-top:8px;font-size:12.5px;color:var(--w45);line-height:1.6}

/* ─────────────────────────────────────────────
   15. 리스트 행 (표 대체)
   ───────────────────────────────────────────── */
.rows{display:flex;flex-direction:column;gap:8px}
.rows>a,.rows>div{
  position:relative;display:grid;
  grid-template-columns:120px 108px 1fr auto;
  align-items:center;gap:clamp(12px,2vw,26px);
  padding:clamp(18px,1.9vw,26px) clamp(18px,2.2vw,30px);
  border-radius:var(--r2);
  background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair);
  transition:background .35s,transform .45s var(--sp),box-shadow .35s
}
.rows>a:hover{background:var(--s-2);transform:translateX(6px);
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.28)}
.rows .d{font-family:var(--mono);font-size:11.5px;color:var(--w45);letter-spacing:.03em}
.rows .g{
  justify-self:start;padding:6px 13px;border-radius:var(--rp);
  font-size:11.5px;font-weight:700;background:var(--s-3);color:var(--w70);white-space:nowrap
}
.rows .g--y{background:var(--y);color:var(--y-ink)}
.rows .t{font-size:clamp(14.5px,1.35vw,17.5px);font-weight:700;letter-spacing:-.025em;line-height:1.45}
.rows .t em{display:block;margin-top:7px;font-style:normal;font-size:13.5px;font-weight:400;
  color:var(--w45);line-height:1.72;letter-spacing:0}
.rows .s{font-family:var(--mono);font-size:11.5px;color:var(--yt);white-space:nowrap}

/* 실적 리스트 — 연도 / 사업명 / 발주처 */
.recs{display:flex;flex-direction:column;gap:8px}
.recs>div{
  display:grid;grid-template-columns:104px 1fr minmax(0,320px);
  align-items:center;gap:clamp(12px,2vw,28px);
  padding:clamp(17px,1.8vw,24px) clamp(18px,2.2vw,30px);
  border-radius:var(--r2);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair);
  transition:background .35s,transform .45s var(--sp),box-shadow .35s
}
.recs>div:hover{background:var(--s-2);transform:translateX(6px);
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.26)}
.recs .yr{font-family:var(--mono);font-size:12.5px;color:var(--yt);letter-spacing:.02em}
.recs .nm{font-size:clamp(14.5px,1.3vw,17px);font-weight:700;letter-spacing:-.025em;line-height:1.45}
.recs .nm i{display:block;font-style:normal;font-weight:400;font-size:13px;color:var(--w45);margin-top:6px}
.recs .og{font-size:13.5px;color:var(--w45);line-height:1.6}

.banner{
  margin-top:clamp(24px,3vw,40px);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,26px);align-items:start;
  padding:clamp(22px,2.6vw,34px);border-radius:var(--r3);
  background:linear-gradient(120deg,rgba(254,209,29,.10),rgba(254,209,29,.02));
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.22)
}
.banner b{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--y-ink);background:var(--y);padding:6px 12px;border-radius:var(--rp);white-space:nowrap}
.banner p{font-size:14.5px;color:var(--w70);line-height:1.85}
.banner p b{background:none;color:var(--yt);padding:0;font-family:inherit;font-size:inherit;
  letter-spacing:inherit;text-transform:none;font-weight:700}

/* ─────────────────────────────────────────────
   16. 툴바 · 필터 · 검색
   ───────────────────────────────────────────── */
.tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-block:clamp(18px,2.4vw,32px)}
.fl{display:flex;gap:7px;flex-wrap:wrap}
.fl button{
  padding:10px 18px;border-radius:var(--rp);font-size:13.5px;font-weight:600;
  background:var(--s-1);color:var(--w45);box-shadow:inset 0 0 0 1px var(--hair);
  white-space:nowrap;transition:all .3s var(--ez)
}
.fl button:hover{color:var(--w);background:var(--s-2)}
.fl button.on{background:var(--y);color:var(--y-ink);box-shadow:none;font-weight:700}
.search{display:flex;align-items:center;gap:10px;margin-left:auto;
  padding:10px 20px;border-radius:var(--rp);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair);min-width:240px;
  transition:box-shadow .3s}
.search:focus-within{box-shadow:inset 0 0 0 1px rgba(254,209,29,.45)}
.search span{color:var(--yt);font-size:15px}
.search input{flex:1;font-size:14px;outline:none}
.search input::placeholder{color:var(--w25)}
.empty{text-align:center;padding:clamp(60px,9vw,120px) 20px;border-radius:var(--r3);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair)}
.empty b{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em}
.empty p{margin-top:12px;color:var(--w45);font-size:14px}

/* ─────────────────────────────────────────────
   17. 스티키 스택 카드 (About 타임라인)
   ───────────────────────────────────────────── */
.two{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(26px,4vw,72px);align-items:start}
.two__l{position:sticky;top:calc(var(--nav-h) + 44px)}
.two__l h2{font-size:clamp(30px,4.2vw,56px);margin:12px 0 20px}
.two__l p{color:var(--w45);font-size:15px;line-height:1.9;margin-bottom:26px;max-width:38ch}

.tl{display:flex;flex-direction:column;gap:14px}
.tl__i{
  position:sticky;top:calc(var(--nav-h) + 44px);
  display:grid;grid-template-columns:132px 1fr;gap:clamp(16px,2.4vw,34px);
  padding:clamp(24px,2.6vw,38px);border-radius:var(--r3);
  background:rgba(16,16,20,.86);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px var(--hair),var(--sh-1);
  transition:box-shadow .4s
}
.tl__i:hover{box-shadow:inset 0 0 0 1px rgba(254,209,29,.26),var(--sh-2)}
.tl__y{font-family:var(--mono);font-size:14px;color:var(--yt);letter-spacing:.02em;padding-top:4px}
.tl__h{font-size:clamp(18px,1.8vw,25px);letter-spacing:-.03em;line-height:1.3}
.tl__d{margin-top:14px;font-size:14.5px;color:var(--w70);line-height:1.88}
.tl__t{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.tl__t span{padding:6px 13px;border-radius:var(--rp);background:var(--s-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--w45)}

.cred{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,20px)}
.cred__c{padding:clamp(24px,2.6vw,38px);border-radius:var(--r3);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair);transition:background .4s,box-shadow .4s}
.cred__c:hover{background:var(--s-2);box-shadow:inset 0 0 0 1px rgba(254,209,29,.22)}
.cred__c h3{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--yt);font-weight:500;margin-bottom:20px}
.cred__c ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.cred__c li{position:relative;padding-left:20px;font-size:14.5px;color:var(--w70);line-height:1.7}
.cred__c li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--y);opacity:.7}

/* ─────────────────────────────────────────────
   18. 문의 · 폼
   ───────────────────────────────────────────── */
.ct{max-width:var(--max);margin:calc(var(--nav-h) + 40px) auto 0;padding:0 var(--pad)}
.ct__h{font-size:clamp(46px,11vw,150px);letter-spacing:-.055em;line-height:.95}
.ct__h::after{content:".";color:var(--yt)}
.ct__p{margin:26px 0 44px;max-width:60ch;color:var(--w70);font-size:clamp(15px,1.4vw,19px);line-height:1.85}
.ct__g{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.3vw,18px);margin-bottom:clamp(30px,4vw,56px)}
.ct__i{
  position:relative;text-align:left;padding:clamp(22px,2.4vw,32px);border-radius:var(--r3);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);
  transition:all .45s var(--sp)
}
.ct__i:hover{background:var(--s-2);transform:translateY(-5px)}
.ct__i.on{background:var(--y);color:var(--y-ink);box-shadow:0 16px 50px rgba(254,209,29,.2)}
.cn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--yt);display:block;margin-bottom:22px}
.ct__i.on .cn{color:rgba(42,33,0,.6)}
.ch{font-size:clamp(16px,1.5vw,21px);font-weight:800;letter-spacing:-.03em}
.cs{margin-top:8px;font-size:13px;color:var(--w45)}
.ct__i.on .cs{color:rgba(42,33,0,.72)}

.form{padding:clamp(28px,3.4vw,52px);border-radius:var(--r4);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair),var(--sh-1)}
.form__g{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,24px)}
.fi--full{grid-column:1/-1}
.fi label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--w45);margin-bottom:10px}
.fi input,.fi select,.fi textarea{
  width:100%;padding:15px 18px;border-radius:var(--r1);
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px var(--hair);
  font-size:15px;outline:none;transition:box-shadow .3s,background .3s
}
.fi textarea{min-height:150px;resize:vertical;line-height:1.75}
.fi select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FED11D' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center}
.fi select option{background:#111}
.fi input:focus,.fi select:focus,.fi textarea:focus{
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(254,209,29,.5)}
.fi input::placeholder,.fi textarea::placeholder{color:var(--w25)}
.form__b{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,34px)}
.btn-k{
  display:inline-flex;align-items:center;gap:10px;padding:17px 34px;border-radius:var(--rp);
  background:var(--y);color:var(--y-ink);font-size:15.5px;font-weight:800;letter-spacing:-.02em;
  box-shadow:0 10px 34px rgba(254,209,29,.24);
  transition:transform .45s var(--sp2),box-shadow .4s
}
.btn-k:hover{transform:translateY(-3px);box-shadow:0 18px 50px rgba(254,209,29,.36)}
.form__n{font-size:12.5px;color:var(--w45);line-height:1.7}
.ok-msg{display:none;margin-top:22px;padding:18px 22px;border-radius:var(--r2);
  background:rgba(254,209,29,.10);box-shadow:inset 0 0 0 1px rgba(254,209,29,.3);
  font-size:14px;color:var(--yt)}

.dl{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(30px,4vw,52px)}
.dl a{
  display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:var(--rp);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);
  font-size:14px;font-weight:600;transition:all .4s var(--sp)
}
.dl a:hover{background:var(--y);color:var(--y-ink);box-shadow:none;transform:translateY(-3px)}
.dl a i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  padding:3px 7px;border-radius:5px;background:var(--s-3);color:var(--w70)}
.dl a:hover i{background:rgba(42,33,0,.14);color:var(--y-ink)}
.dl a span{font-size:12px;font-weight:400;color:var(--w45);letter-spacing:-.01em}
.dl a:hover span{color:rgba(42,33,0,.72)}
:root[data-theme="light"] .dl a{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair)}
:root[data-theme="light"] .dl a i{background:rgba(17,17,20,.07)}
.dl__soon{flex:1 1 100%;font-size:12.5px;color:var(--w45);line-height:1.75;margin-top:2px}
@media(max-width:640px){
  .dl a{width:100%;justify-content:flex-start;flex-wrap:wrap;padding:13px 18px}
}

/* ─────────────────────────────────────────────
   19. 푸터
   ───────────────────────────────────────────── */
.ft{margin-top:clamp(60px,8vw,120px);padding-block:clamp(50px,6vw,88px) 34px;
  background:rgba(255,255,255,.022)}
.ft__g{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.85fr));
  gap:clamp(26px,3.4vw,56px)}
.ft__w{display:block;margin:2px 0 18px;color:var(--w)}
.ft__w svg{display:block;width:min(292px,86%);height:auto;fill:currentColor}
.ft__w i{display:block;margin-top:7px;font-style:normal;font-family:var(--mono);
  font-size:10px;letter-spacing:.30em;color:var(--w45);white-space:nowrap}
:root[data-theme="light"] .ft__w{color:var(--ink)}
.lg__w{fill:currentColor}
.ft__b{font-size:clamp(19px,1.9vw,26px);font-weight:800;letter-spacing:-.03em;color:var(--w45)}
.ft__b i{font-style:normal;color:var(--yt)}
.ft__d{margin-top:16px;font-size:13.5px;color:var(--w45);line-height:1.95}
.ft h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--yt);font-weight:500;margin-bottom:18px}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.ft ul a{font-size:14px;color:var(--w45);transition:color .25s,transform .35s var(--sp);display:inline-block}
.ft ul a:hover{color:var(--yt);transform:translateX(4px)}
.ft__c{margin-top:clamp(40px,5vw,70px);padding-top:26px;
  box-shadow:inset 0 1px 0 var(--hair);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:var(--w25);letter-spacing:.03em}

/* ─────────────────────────────────────────────
   20. 반응형
   ───────────────────────────────────────────── */
@media (max-width:1180px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .act{grid-template-columns:repeat(2,1fr)}
  .ct__g{grid-template-columns:repeat(2,1fr)}
  .ft__g{grid-template-columns:repeat(2,1fr)}
  .b-4,.b-3{grid-column:span 6}
  .b-2{grid-column:span 3}
}
@media (max-width:1000px){
  .nav{display:none}
  .lang{display:none}
  .cta{display:none}
  .hd__in .cta{display:none}
  .bgr{display:grid;margin-left:auto}
  .hd__in{padding-right:13px}
  .co{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .two__l{position:static}
  .tl__i{position:static;grid-template-columns:1fr}
  .ph__row{grid-template-columns:1fr}
  .cred{grid-template-columns:1fr}
}
@media (max-width:900px){
  .grid,.grid--3,.grid--2{grid-template-columns:repeat(2,1fr)}
  .hz__track>*{flex-basis:76vw}
  .rows>a,.rows>div{grid-template-columns:1fr;gap:10px}
  .rows .s{justify-self:start}
  .recs>div{grid-template-columns:1fr;gap:8px}
  .form__g{grid-template-columns:1fr}
  .hero{height:clamp(500px,78vh,720px);border-radius:var(--r3)}
  .ph{border-radius:var(--r3)}
  .card__t{min-height:0}
}
@media (max-width:620px){
  :root{--nav-h:60px}
  .grid,.grid--3,.grid--2,.act,.ct__g,.ft__g{grid-template-columns:1fr}
  .bento>*{grid-column:span 6!important;grid-row:auto!important}
  .stat{width:100%}
  .stat>div{flex:1 1 42%;min-width:0}
  .search{margin-left:0;width:100%}
  .sbar__g{display:none}
  .more{margin-left:0}
  .tile--img{min-height:280px}
}

/* ─────────────────────────────────────────────
   21. 모션 최소화
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv,.fade{opacity:1;transform:none}
  .ln>span{transform:none}
  .mesh{animation:none}
  .load{display:none}
}

/* 인쇄 */
@media print{
  .hd,.sheet,.load,.cur,.prog,.grain,.mesh,.hui,.mq{display:none!important}
  body{background:#fff;color:#000}
}

/* ═══════════════════════════════════════════════════════════════════
   22. 라이트 모드
   ─────────────────────────────────────────────────────────────────── */
:root[data-theme="light"]{
  /* 종이 위에 카드가 놓인 방식.
     바탕(--bg)은 한 톤 내린 중성 회색, 카드는 순백.
     그래서 카드가 「떠 있는 종이」로 읽히고, 다크에서 면이 밝아지는 것과 같은 역할을 합니다.
     선은 여전히 쓰지만 이제 혼자 일하지 않습니다 — 단차 · 그림자 · 옐로 표식이 같이 합니다. */
  --bg:#F2F2F5;
  --bg-2:#F2F2F5;
  --s-1:#FFFFFF;
  --s-2:#FFFFFF;
  --s-3:rgba(9,9,11,.062);
  --tint:rgba(9,9,11,.035);       /* 줄 위에 손 올렸을 때 '살짝 눌린 면' */
  --hair:rgba(9,9,11,.10);
  --hair-2:rgba(9,9,11,.062);     /* 구획 사이 아주 가는 선 */
  --paper:#FFFFFF;

  --yt:#7A5F00;                  /* 흰 배경 위 7.4:1 — 옐로 「글자」는 라이트에서 이 색으로.
                                    다만 점 · 막대 · 칠하는 면은 아래에서 원래 옐로로 되돌립니다. */
  --w:#09090B;
  --w70:rgba(9,9,11,.78);
  --w45:rgba(9,9,11,.62);
  --w25:rgba(9,9,11,.58);   /* 흰 배경에서 4.5:1 을 넘기는 최소선 */

  /* 그림자 — 종이 한 장 두께. 색을 살짝 푸르게 섞어야 회색 위에서 탁해 보이지 않습니다. */
  --sh-1:0 1px 2px rgba(16,18,32,.05), 0 2px 6px rgba(16,18,32,.045);
  --sh-2:0 2px 5px rgba(16,18,32,.05), 0 12px 28px rgba(16,18,32,.09);
  --sh-3:0 8px 18px rgba(16,18,32,.08), 0 32px 76px rgba(16,18,32,.14);
  --glow:0 0 0 1px rgba(190,150,0,.30), 0 14px 40px rgba(254,209,29,.22);
}
:root[data-theme="light"] .mesh{opacity:.62;filter:blur(110px) saturate(150%)}
:root[data-theme="light"] .grain{opacity:.020;mix-blend-mode:multiply}
/* 구획마다 흰 면과 회색 바탕이 번갈아 나옵니다 — 스크롤에 리듬이 생깁니다 */
:root[data-theme="light"] .sec--t::before{
  background:linear-gradient(180deg,transparent,rgba(9,9,11,.030) 12%,rgba(9,9,11,.030) 88%,transparent)}
:root[data-theme="light"] .sec+.sec{border-top:0}
:root[data-theme="light"] .load{background:var(--bg)}
:root[data-theme="light"] .hd__in{background:rgba(255,255,255,.88);
  box-shadow:inset 0 0 0 1px var(--hair),var(--sh-2)}
:root[data-theme="light"] .hd.solid .hd__in{background:rgba(255,255,255,.92)}
:root[data-theme="light"] .sheet{background:rgba(255,255,255,.97)}
:root[data-theme="light"] .cur{mix-blend-mode:normal;background:rgba(14,14,17,.85)}
:root[data-theme="light"] .sbar__g{color:rgba(9,9,11,.055);-webkit-text-stroke-color:rgba(9,9,11,.72)}
:root[data-theme="light"] .mq__t span{-webkit-text-stroke-color:rgba(9,9,11,.58)}
@media (max-width:720px){
  :root[data-theme="light"] .mq__t span{color:rgba(9,9,11,.60)}
}
:root[data-theme="light"] .tl__i{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair),var(--sh-1)}
:root[data-theme="light"] .ft{background:#F7F7F8;box-shadow:inset 0 1px 0 var(--hair)}
:root[data-theme="light"] .fi input,
:root[data-theme="light"] .fi select,
:root[data-theme="light"] .fi textarea{background:#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(9,9,11,.20)}
:root[data-theme="light"] .fi input:focus,
:root[data-theme="light"] .fi select:focus,
:root[data-theme="light"] .fi textarea:focus{background:#fff}
:root[data-theme="light"] .fi select option{background:#fff}
:root[data-theme="light"] .card__n,
:root[data-theme="light"] .co__i .lb{background:rgba(10,10,13,.6);color:rgba(255,255,255,.8)}
:root[data-theme="light"] .empty,
:root[data-theme="light"] .form,
:root[data-theme="light"] .card,
:root[data-theme="light"] .tile,
:root[data-theme="light"] .cred__c,
:root[data-theme="light"] .stat>div,
:root[data-theme="light"] .co__st>div,
:root[data-theme="light"] .recs>div,
:root[data-theme="light"] .rows>a,
:root[data-theme="light"] .rows>div{
  background:#FFFFFF;
  box-shadow:inset 0 0 0 1px var(--hair), var(--sh-1);
}
/* 손이 닿으면 한 단 떠오릅니다 — 다크에서 밝아지는 것과 같은 역할 */
:root[data-theme="light"] a.card:hover,
:root[data-theme="light"] a.tile:hover,
:root[data-theme="light"] .rows>a:hover{
  box-shadow:inset 0 0 0 1px rgba(9,9,11,.30), var(--sh-2);
}
/* 사진이 깔린 카드는 흰 배경을 덮지 않습니다 */
:root[data-theme="light"] .tile--img,
:root[data-theme="light"] .card__i,
:root[data-theme="light"] .card__i--g,
:root[data-theme="light"] .tile--y{background:transparent}
:root[data-theme="light"] .tile--y{background:var(--y)}
:root[data-theme="light"] .tile--img{background:#111114}

/* 알약 버튼 · 칩 — 흰 바탕 위에서 형태가 보이도록 */
:root[data-theme="light"] .pill,
:root[data-theme="light"] .chip,
:root[data-theme="light"] .more,
:root[data-theme="light"] .btn--ghost,
:root[data-theme="light"] .tgl{
  background:#FFFFFF;
  box-shadow:inset 0 0 0 1px var(--hair);
}
:root[data-theme="light"] .pill:hover,
:root[data-theme="light"] .more:hover,
:root[data-theme="light"] .btn--ghost:hover{
  box-shadow:inset 0 0 0 1px rgba(9,9,11,.34);
}
:root[data-theme="light"] .tile--y{background:var(--y)}
:root[data-theme="light"] .banner{background:linear-gradient(120deg,rgba(254,209,29,.28),rgba(254,209,29,.10));
  box-shadow:inset 0 0 0 1px rgba(190,150,0,.35)}
:root[data-theme="light"] .banner p b{color:var(--ink)}
:root[data-theme="light"] .k{color:var(--ink)}
:root[data-theme="light"] .k::before{background:var(--ink);box-shadow:none}
:root[data-theme="light"] .tile__k,
:root[data-theme="light"] .cred__c h3,
:root[data-theme="light"] .ft h4,
:root[data-theme="light"] .tl__y,
:root[data-theme="light"] .recs .yr,
:root[data-theme="light"] .rows .s,
:root[data-theme="light"] .cn,
:root[data-theme="light"] .search span{color:var(--ink)}
:root[data-theme="light"] .tile__k::before{background:var(--ink);box-shadow:none}
:root[data-theme="light"] .cred__c li::before{background:var(--ink)}
:root[data-theme="light"] .ft ul a:hover{color:var(--ink)}
:root[data-theme="light"] .ok-msg{color:#7A6000}
:root[data-theme="light"] .tile--y .tile__k{color:rgba(42,33,0,.74)}
:root[data-theme="light"] .tile--y .tile__k::before{background:var(--y-ink)}


/* 흰 면은 종이 위에 얹힌 것처럼 그림자를 답니다 — 다크의 '밝아지는' 효과에 해당합니다 */
:root[data-theme="light"] .cred__c,
:root[data-theme="light"] .form,
:root[data-theme="light"] .empty,
:root[data-theme="light"] .idt__i,
:root[data-theme="light"] .wk,
:root[data-theme="light"] .pgrp,
:root[data-theme="light"] .arc__i,
:root[data-theme="light"] .bg__m1,
:root[data-theme="light"] .ccd,
:root[data-theme="light"] .fs,
:root[data-theme="light"] .cal__m,
:root[data-theme="light"] .pn,
:root[data-theme="light"] .toc,
:root[data-theme="light"] .box-n,
:root[data-theme="light"] .share,
:root[data-theme="light"] .co__st>div,
:root[data-theme="light"] .art__h:not(.art__h--img){
  box-shadow:inset 0 0 0 1px var(--hair), var(--sh-1);
}
:root[data-theme="light"] .idt__i:hover,
:root[data-theme="light"] .ccd:hover,
:root[data-theme="light"] .wk:hover{
  background:#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(9,9,11,.30), var(--sh-2);
}
/* 흰 면 위 '눌린 면' 은 흰색이면 안 보이므로 회색 틴트로 되돌립니다 */
:root[data-theme="light"] .ldg__r:hover,
:root[data-theme="light"] .art__b tbody tr:hover{background:var(--tint)}
:root[data-theme="light"] .ldg__hd,
:root[data-theme="light"] .ldg__yh{background:var(--paper)}
/* 작은 알약 · 배지는 그림자 없이 테두리만 — 너무 많으면 지저분해집니다 */
:root[data-theme="light"] .art__tags span:not(.art__tl),
:root[data-theme="light"] .ldgc,
:root[data-theme="light"] .orgc,
:root[data-theme="light"] .chs__i,
:root[data-theme="light"] .lang,
:root[data-theme="light"] .pgb{box-shadow:inset 0 0 0 1px var(--hair)}
/* 구획 사이 가는 선 — 화면이 층으로 읽히게 */
:root[data-theme="light"] .sec+.sec{border-top:1px solid var(--hair-2)}

/* 테마 · 언어 토글 */
.tgl{display:flex;align-items:center;gap:3px;padding:4px;border-radius:var(--rp);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);flex:none}
.tgl button{
  position:relative;width:34px;height:30px;border-radius:var(--rp);
  display:grid;place-items:center;color:var(--w70);
  transition:background .3s,color .3s,transform .4s var(--sp2)
}
.tgl button:hover{color:var(--w)}
.tgl button[aria-pressed="true"]{background:var(--s-3);color:var(--w)}
.tgl button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tgl--l button{width:auto;padding:0 11px;font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.tgl--l button[aria-pressed="true"]{background:var(--y);color:var(--y-ink);font-weight:500}

/* ═══════════════════════════════════════════════════════════════════
   23. 우측 플로팅 문의 위젯
   ─────────────────────────────────────────────────────────────────── */
.fab{
  position:fixed;right:clamp(14px,2.2vw,30px);bottom:clamp(14px,2.2vw,30px);z-index:7500;
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 24px;border-radius:var(--rp);
  background:var(--y);color:var(--y-ink);
  font-size:14.5px;font-weight:800;letter-spacing:-.02em;
  box-shadow:0 14px 44px rgba(254,209,29,.32),0 2px 8px rgba(0,0,0,.25);
  transform:translateY(0);
  transition:transform .5s var(--sp2),box-shadow .4s,opacity .35s
}
.fab:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 22px 60px rgba(254,209,29,.44)}
.fab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--sp2)}
.fab .x{display:none}
body.chat-on .fab .x{display:block}
body.chat-on .fab .c{display:none}
.fab__d{position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;
  background:#FF4D4D;box-shadow:0 0 0 3px var(--bg);animation:pulse 2.4s var(--ez) infinite}
body.chat-on .fab__d{display:none}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.6}}

.chat{
  position:fixed;right:clamp(14px,2.2vw,30px);bottom:calc(clamp(14px,2.2vw,30px) + 68px);
  z-index:7490;width:min(400px,calc(100vw - 28px));
  max-height:min(660px,calc(100vh - 130px));
  display:flex;flex-direction:column;
  border-radius:var(--r3);overflow:hidden;
  background:rgba(14,14,18,.86);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(22px) scale(.96);transform-origin:100% 100%;
  transition:opacity .4s var(--ez),visibility .4s,transform .5s var(--sp)
}
:root[data-theme="light"] .chat{background:rgba(255,255,255,.92);
  box-shadow:inset 0 0 0 1px var(--hair),var(--sh-3)}
body.chat-on .chat{opacity:1;visibility:visible;transform:none}

.chat__h{display:flex;align-items:center;gap:12px;padding:18px 18px 16px;
  box-shadow:inset 0 -1px 0 var(--hair);flex:none}
.chat__av{width:38px;height:38px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:var(--s-2);box-shadow:inset 0 0 0 1px var(--hair);font-size:16px}
.chat__t b{display:block;font-size:15px;font-weight:800;letter-spacing:-.03em}
.chat__t span{display:block;margin-top:3px;font-family:var(--mono);font-size:10.5px;color:var(--w45)}
.chat__k{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:var(--rp);background:var(--y);color:var(--y-ink);
  font-size:12.5px;font-weight:800;white-space:nowrap;
  transition:transform .4s var(--sp2)}
.chat__k:hover{transform:scale(1.05)}
.chat__x{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--w45);font-size:17px;flex:none;transition:background .3s,color .3s}
.chat__x:hover{background:var(--s-2);color:var(--w)}

.chat__b{flex:1;overflow-y:auto;padding:20px 18px;scrollbar-width:thin}
.chat__b::-webkit-scrollbar{width:5px}
.chat__b::-webkit-scrollbar-thumb{background:var(--s-3);border-radius:5px}

.msg{display:flex;gap:10px;margin-bottom:16px;animation:msgIn .45s var(--sp) both}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.msg__a{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--y);color:var(--y-ink);font-size:14px;font-weight:800;align-self:flex-end}
.msg__t{padding:14px 17px;border-radius:var(--r2) var(--r2) var(--r2) 6px;
  background:var(--s-2);font-size:14px;line-height:1.75;color:var(--w70);
  box-shadow:inset 0 0 0 1px var(--hair);max-width:88%}
.msg__t b{color:var(--w);font-weight:700}
.msg__t a{color:var(--yt);font-weight:700;text-decoration:underline;text-underline-offset:3px}
:root[data-theme="light"] .msg__t a{color:var(--ink)}
.msg--me{flex-direction:row-reverse}
.msg--me .msg__t{background:var(--y);color:var(--y-ink);box-shadow:none;
  border-radius:var(--r2) var(--r2) 6px var(--r2)}
.msg--me .msg__a{background:var(--s-3);color:var(--w)}

.chat__lb{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--w45);margin:20px 0 11px}
.chat__q{display:flex;flex-wrap:wrap;gap:7px}
.chat__q button{
  padding:9px 15px;border-radius:var(--rp);font-size:13px;font-weight:600;
  background:var(--s-1);color:var(--w70);box-shadow:inset 0 0 0 1px var(--hair);
  text-align:left;transition:all .3s var(--ez)
}
.chat__q button:hover{background:var(--s-2);color:var(--w);transform:translateY(-2px)}
.chat__q button.on{background:var(--w);color:var(--bg);box-shadow:none;font-weight:700}
.chat__sep{height:1px;background:var(--hair);margin:18px 0}
.chat__l{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.chat__l button{padding:11px 17px;border-radius:var(--rp);font-size:13.5px;font-weight:600;
  background:var(--s-1);color:var(--w70);box-shadow:inset 0 0 0 1px var(--hair);
  text-align:left;transition:all .3s var(--ez)}
.chat__l button:hover{background:var(--y);color:var(--y-ink);box-shadow:none;transform:translateX(4px)}

.chat__f{flex:none;padding:14px 16px 16px;box-shadow:inset 0 1px 0 var(--hair)}
.chat__i{display:flex;align-items:center;gap:9px}
.chat__i input{flex:1;padding:14px 18px;border-radius:var(--rp);font-size:14px;outline:none;
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .3s}
.chat__i input:focus{box-shadow:inset 0 0 0 1px rgba(254,209,29,.5)}
.chat__i input::placeholder{color:var(--w25)}
.chat__i button{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--y);color:var(--y-ink);transition:transform .4s var(--sp2)}
.chat__i button:hover{transform:scale(1.1) rotate(-8deg)}
.chat__i svg{width:18px;height:18px;fill:currentColor}
.chat__n{margin-top:11px;text-align:center;font-size:11px;color:var(--w25);line-height:1.65}

@media (max-width:620px){
  .fab{padding:14px 20px;font-size:13.5px}
  .chat{left:14px;right:14px;width:auto;max-height:calc(100vh - 120px)}
}
@media (prefers-reduced-motion:reduce){.fab__d{animation:none}}
@media print{.fab,.chat{display:none!important}}

/* ═══════════════════════════════════════════════════════════════════
   24. 오버플로 가드 (360px 검증 결과 반영)
   ─────────────────────────────────────────────────────────────────── */
html,body{max-width:100%;overflow-x:clip}
.banner{min-width:0}
.banner p{min-width:0;overflow-wrap:anywhere}
.grid>*,.bento>*,.recs>div>*,.rows>*>*{min-width:0}
.chat{left:auto;max-width:calc(100vw - 28px)}
@media (max-width:1000px){
  .hd__in .tgl{display:none}          /* 토글은 모바일 시트 안에 있습니다 */
  .sheet .tgl{display:flex}
}
@media (max-width:620px){
  .chat{left:auto;right:14px;width:calc(100vw - 28px);max-width:calc(100vw - 28px)}
}

/* ═══════════════════════════════════════════════════════════════════
   25. 어두운 사진 위 영역 — 테마와 무관하게 항상 밝은 글자
   ─────────────────────────────────────────────────────────────────
   히어로 · 페이지헤드 · 사진 타일 · 현장 카드는 어두운 그라디언트를
   깔고 있으므로, 라이트 모드에서도 텍스트 토큰을 다크값으로 되돌린다.
   ─────────────────────────────────────────────────────────────────── */
.hero,.ph--img,.ai,.tile--img,.card__i,.co__i,.sl,.hui{
  --yt:var(--y);
  --w:#FBFBFD;
  --w70:rgba(251,251,253,.72);
  --w45:rgba(251,251,253,.50);
  --w25:rgba(251,251,253,.40);
  --s-1:rgba(255,255,255,.06);
  --s-2:rgba(255,255,255,.10);
  --s-3:rgba(255,255,255,.16);
  --hair:rgba(255,255,255,.16);
  color:var(--w);
}
.hero .k,.ph--img .k,.tile--img .tile__k,.ai__k{color:var(--yt)}
.hero .k::before,.ph--img .k::before,.tile--img .tile__k::before{background:var(--y);box-shadow:0 0 12px var(--y)}
.ai__k{background:var(--y);color:var(--y-ink)}
.tags .k,.tags .k::before{color:var(--y-ink)}
.tags .k{background:var(--y)}
.tags .k::before{background:var(--y-ink);box-shadow:none}

/* 히어로 위 가독성 — 오버레이를 조금 더 눌러준다 */
.sl__im::after{
  background:
    linear-gradient(100deg,rgba(4,4,6,.96) 0%,rgba(4,4,6,.82) 34%,rgba(4,4,6,.28) 72%,rgba(4,4,6,.10) 100%),
    linear-gradient(0deg,rgba(4,4,6,.80),rgba(4,4,6,.10) 52%);
}
.ph__bg::after{
  background:linear-gradient(120deg,rgba(6,6,8,.94),rgba(6,6,8,.72) 55%,rgba(6,6,8,.90));
}
:root[data-theme="light"] .ph__bg img{opacity:.42}

/* 라이트 모드 — 흰 배경 위 옐로 강조는 대비가 부족하므로 골드로 낮춘다 */
:root[data-theme="light"] .tile__big em,
:root[data-theme="light"] .card__w span{color:var(--ink)}
:root[data-theme="light"] .tile--y .tile__big em{color:var(--y-ink);opacity:.45}

/* ═══════════════════════════════════════════════════════════════════
   26. 저널 — 개별 글 (blog/<id>)
   ─────────────────────────────────────────────────────────────────── */
.art{max-width:var(--max);margin-inline:auto}
.art__h{
  position:relative;
  /* 머리말 카드와 본문 칸의 폭을 맞춥니다 — 글이 한 줄기로 읽힙니다 */
  max-width:calc(var(--read) + 2 * clamp(26px,4vw,64px));
  margin:calc(var(--nav-h) + 30px) auto 0;
  border-radius:var(--r4);overflow:hidden;isolation:isolate;
  min-height:clamp(320px,42vh,460px);
  display:flex;align-items:flex-end;
  padding:clamp(28px,5vw,72px);
  box-shadow:var(--sh-3),inset 0 0 0 1px rgba(255,255,255,.07);
  color:var(--w);
}
.art__h--img{
  --yt:var(--y);
  --w:#FBFBFD;--w70:rgba(251,251,253,.76);--w45:rgba(251,251,253,.56);
  --s-1:rgba(255,255,255,.06);--s-2:rgba(255,255,255,.10);--hair:rgba(255,255,255,.16);
  color:var(--w);
}
:root[data-theme="light"] .art__h:not(.art__h--img){background:rgba(255,255,255,.60);
  box-shadow:var(--sh-2),inset 0 0 0 1px var(--hair)}
.art__h:not(.art__h--img){background:var(--s-1)}
.art__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.art__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.art__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(4,4,6,.94),rgba(4,4,6,.55) 55%,rgba(4,4,6,.30))}
.art__hi{max-width:100%}
.art__h--img .k{color:var(--yt)}
.art__h--img .k::before{background:var(--y);box-shadow:0 0 12px var(--y)}
.art__h h1{font-size:clamp(28px,3.6vw,48px);letter-spacing:-.042em;line-height:1.22;margin:16px 0 0;
  word-break:keep-all;max-width:26em}
.art__dek{margin-top:18px;font-size:clamp(15px,1.5vw,18.5px);color:var(--w70);line-height:1.85;
  max-width:42em;word-break:keep-all}
.art__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px;
  font-size:13px;color:var(--w45)}
.art__meta i{font-style:normal;opacity:.4}
.art__meta b{color:var(--w70);font-weight:600}

.art__b{
  /* 한 줄 55자(공백 포함) 기준 — 국내 블로그 본문 표준 폭입니다.
     한글은 글자 하나가 1em 이라 ch 단위로 잡으면 줄이 너무 짧아집니다. */
  max-width:var(--read);margin-inline:auto;
  padding:clamp(44px,6vw,86px) var(--pad) 0;
  font-family:var(--read-font);
  font-size:var(--read-size);line-height:1.9;
  color:rgba(251,251,253,.88);letter-spacing:-.003em;
  word-break:keep-all;              /* 한글 단어가 줄 끝에서 잘리지 않게 */
  overflow-wrap:break-word;
}
.art__b>p{margin-bottom:1.5em}
.art__b>p b,.art__b li b{color:var(--w);font-weight:700}
.art__b h2{
  font-size:clamp(22px,2.6vw,33px);letter-spacing:-.035em;line-height:1.3;
  color:var(--w);margin:2.2em 0 .85em;
}
.art__b h2::before{
  content:"";display:block;width:38px;height:3px;border-radius:3px;
  background:var(--y);margin-bottom:20px
}
.art__b ul{list-style:none;margin:0 0 1.7em;display:flex;flex-direction:column;gap:12px}
.art__b li{position:relative;padding-left:24px}
.art__b li::before{content:"";position:absolute;left:2px;top:.78em;width:7px;height:7px;
  border-radius:50%;background:var(--y);opacity:.85}
.art__b figure{margin:2.4em 0}
.art__b figure img{width:100%;height:auto;max-height:520px;object-fit:cover;
  border-radius:var(--r3);box-shadow:var(--sh-2);display:block}
.art__b figcaption{margin-top:14px;font-size:13.5px;color:var(--w45);
  line-height:1.75;text-align:left;word-break:keep-all}
.art__b blockquote{
  margin:2.4em 0;padding:clamp(24px,3vw,38px);border-radius:var(--r3);
  background:linear-gradient(120deg,rgba(254,209,29,.10),rgba(254,209,29,.02));
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.22)
}
.art__b blockquote p{margin:0;font-size:clamp(17px,1.7vw,22px);font-weight:700;
  letter-spacing:-.03em;line-height:1.6;color:var(--w)}
.art__b blockquote cite{display:block;margin-top:16px;font-style:normal;
  font-family:var(--mono);font-size:11.5px;color:var(--yt);letter-spacing:.04em}
:root[data-theme="light"] .art__b blockquote cite{color:var(--ink)}

/* 유튜브 임베드 */
.emb{position:relative;aspect-ratio:16/9;border-radius:var(--r3);overflow:hidden;
  margin-bottom:2.4em;box-shadow:var(--sh-2);background:var(--s-2)}
.emb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* SEO 태그 */
.art__tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:3em;padding-top:2em;box-shadow:inset 0 1px 0 var(--hair)}
.art__tl{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--yt);margin-right:6px}
:root[data-theme="light"] .art__tl{color:var(--ink)}
.art__tags span:not(.art__tl){
  padding:7px 14px;border-radius:var(--rp);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair);
  font-family:var(--mono);font-size:11.5px;color:var(--w45);letter-spacing:.02em;
  transition:background .3s,color .3s}
.art__tags span:not(.art__tl):hover{background:var(--s-2);color:var(--w)}

/* 공유 */
.share{margin-top:2.2em;padding:22px 24px;border-radius:var(--r2);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair)}
.share__t{margin-bottom:14px}
.share__l{display:block;font-weight:800;font-size:15px;letter-spacing:-.02em}
.share__d{display:block;margin-top:5px;font-size:13px;color:var(--w45);line-height:1.6}
.share__b{display:flex;gap:8px;flex-wrap:wrap}
.sb{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:0;cursor:pointer;
  border-radius:var(--rp);background:var(--s-2);color:var(--w70);
  box-shadow:inset 0 0 0 1px var(--hair);font-size:13.5px;font-weight:600;
  font-family:inherit;transition:.18s}
.sb svg{width:16px;height:16px;fill:currentColor;flex:0 0 16px}
.sb:hover{transform:translateY(-2px);color:var(--w);background:var(--s-3)}
.sb--kakao:hover{background:#FEE500;color:#191600;box-shadow:none}
.sb--in:hover{background:#0A66C2;color:#fff;box-shadow:none}
.sb--fb:hover{background:#1877F2;color:#fff;box-shadow:none}
.sb--x:hover{background:#111;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.sb--link:hover{background:var(--y);color:var(--y-ink);box-shadow:none}
:root[data-theme="light"] .sb--x:hover{background:#111;color:#fff}
:root[data-theme="light"] .sb--link:hover{background:var(--ink);color:#fff}
@media(max-width:560px){.sb span{display:none}.sb{padding:13px}.sb svg{width:18px;height:18px;flex:0 0 18px}}
:root[data-theme="light"] .share__ok{color:var(--ink)}
.share__ok{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--yt);font-weight:600}
.share__ok[hidden]{display:none}

/* 글 하단 CTA */
.art__cta{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,42px);
  flex-wrap:wrap;margin-top:3.4em;padding:clamp(26px,3.4vw,44px);border-radius:var(--r4);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair)
}
.art__cta h3{font-size:clamp(19px,2vw,27px);letter-spacing:-.035em;margin:14px 0 10px;color:var(--w)}
.art__cta p{font-size:14px;color:var(--w45);line-height:1.8;max-width:46ch}

/* 이전 · 다음 */
.pns{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:2.4em 0 0}
.pn{padding:clamp(20px,2.2vw,28px);border-radius:var(--r3);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair);transition:all .45s var(--sp)}
.pn:hover{background:var(--s-2);transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.28)}
.pn em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--yt);margin-bottom:12px}
:root[data-theme="light"] .pn em{color:var(--ink)}
.pn b{display:block;font-size:15px;font-weight:700;letter-spacing:-.025em;line-height:1.5;color:var(--w)}
.pn--n{text-align:right}
.pns .pn--n:only-child{grid-column:2}

@media (max-width:620px){
  .pns{grid-template-columns:1fr}
  .pn--n{text-align:left}
  .pns .pn--n:only-child{grid-column:auto}
  .art__cta{flex-direction:column;align-items:flex-start}
}

/* 카카오톡 문의 버튼 */
.dl a.dl--k{background:#FEE500;color:#191600;box-shadow:none;font-weight:800}
.dl a.dl--k:hover{background:#FFE94D;color:#191600;transform:translateY(-3px)}

/* ═══════════════════════════════════════════════════════════════════
   27. 메가 메뉴
   ─────────────────────────────────────────────────────────────────── */
.nav{position:static}
.nv{position:static}
.nv__a{
  position:relative;display:block;padding:9px 15px;border-radius:var(--rp);
  font-size:14px;font-weight:600;color:var(--w70);white-space:nowrap;
  transition:color .25s,background .25s
}
.nv__a:hover{color:var(--w);background:var(--s-2)}
.nv__a[aria-current]{color:var(--y-ink);background:var(--y)}

.mega{
  position:absolute;left:0;right:0;top:calc(100% + 12px);z-index:120;
  padding:0 var(--pad);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s var(--ez),visibility .3s,transform .4s var(--sp);
  pointer-events:none;
}
.nv:hover .mega,.nv:focus-within .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega__in{
  max-width:var(--max);margin-inline:auto;
  display:grid;grid-template-columns:minmax(200px,.9fr) minmax(0,3fr);
  gap:clamp(20px,3vw,48px);
  padding:clamp(24px,2.6vw,36px);
  border-radius:var(--r3);
  background:#101014;
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),var(--sh-3);
}
:root[data-theme="light"] .mega__in{background:#FFFFFF;
  box-shadow:inset 0 0 0 1px var(--hair),var(--sh-3)}
.mega__h h4{font-size:clamp(20px,2vw,28px);letter-spacing:-.035em;margin:12px 0 0}
.mega__all{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  padding:9px 16px;border-radius:var(--rp);background:var(--s-2);
  font-size:12.5px;font-weight:600;color:var(--w70);
  box-shadow:inset 0 0 0 1px var(--hair);
  transition:background .3s,color .3s,transform .35s var(--sp)
}
.mega__all:hover{background:var(--y);color:var(--y-ink);box-shadow:none;transform:translateX(3px)}
.mega__l{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:start}
.mega__l a{
  display:block;padding:13px 16px;border-radius:var(--r1);
  transition:background .25s,transform .35s var(--sp)
}
.mega__l a:hover{background:var(--s-2);transform:translateX(3px)}
.mega__l b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.025em}
.mega__l span{display:block;margin-top:5px;font-size:12.5px;color:var(--w45);line-height:1.55}

/* 모바일 시트 — 아코디언 */
.sheet{justify-content:flex-start;padding-top:calc(var(--nav-h) + 40px);overflow-y:auto}
.sh__g{border-bottom:1px solid var(--hair)}
.sh__b{
  width:100%;display:flex;align-items:center;gap:14px;
  padding:18px 4px;font-size:clamp(20px,5.5vw,28px);font-weight:800;letter-spacing:-.04em;
  text-align:left;color:var(--w)
}
.sh__b em{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--yt);font-weight:500}
.sh__b i{
  margin-left:auto;width:22px;height:22px;border-radius:50%;flex:none;position:relative;
  background:var(--s-2);transition:transform .4s var(--sp2),background .3s
}
.sh__b i::before,.sh__b i::after{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:1.5px;border-radius:2px;
  background:var(--w);transform:translate(-50%,-50%);transition:transform .4s var(--sp)
}
.sh__b i::after{transform:translate(-50%,-50%) rotate(90deg)}
.sh__g.on .sh__b i{background:var(--y)}
.sh__g.on .sh__b i::before,.sh__g.on .sh__b i::after{background:var(--y-ink)}
.sh__g.on .sh__b i::after{transform:translate(-50%,-50%) rotate(0)}
.sh__l{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--sp)}
.sh__g.on .sh__l{grid-template-rows:1fr}
.sh__l>*{min-height:0}
/* 항목을 한 겹으로 묶어야 아코디언 안에서 서로 겹치지 않습니다 */
.sh__i{min-height:0;display:flex;flex-direction:column}
.sh__l{overflow:hidden}
.sh__l a{
  display:block;padding:12px 4px 12px 30px;font-size:15px;color:var(--w70);
  transition:color .25s,transform .3s
}
.sh__l a:first-child{padding-top:2px}
.sh__l a:last-child{padding-bottom:18px}
.sh__l a:hover{color:var(--yt);transform:translateX(3px)}

@media (max-width:1180px){
  .mega__l{grid-template-columns:repeat(2,1fr)}
  .mega__in{grid-template-columns:1fr}
}
@media (max-width:1000px){
  .mega{display:none}
}

/* ══════════ 28. 사례 (Case) ══════════ */
.case{position:relative;padding:clamp(26px,3.2vw,44px);border-radius:var(--r3);
  background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair);margin-bottom:16px;scroll-margin-top:100px}
.case+.case{margin-top:0}
.case__t{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.case__id{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--yt)}
.case__tag{padding:5px 12px;border-radius:var(--rp);background:var(--s2);
  box-shadow:inset 0 0 0 1px var(--hair);font-size:11.5px;color:var(--w70)}
.case__m{font-family:var(--mono);font-size:11px;color:var(--w45);letter-spacing:.04em;margin-left:auto}
.case h3{font-size:clamp(19px,2.5vw,30px);letter-spacing:-.035em;line-height:1.3;margin-bottom:14px}
.case__p{color:var(--w70);font-size:clamp(14.5px,1.3vw,16.5px);line-height:1.9;max-width:74ch}
.case__g{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
@media(max-width:820px){.case__g{grid-template-columns:1fr}.case__m{margin-left:0;width:100%}}
.case__c{padding:20px 22px;border-radius:var(--r2);background:rgba(0,0,0,.16);
  box-shadow:inset 0 0 0 1px var(--hair)}
.case__c>span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--w45);margin-bottom:12px}
.case__c--r{background:linear-gradient(150deg,rgba(254,209,29,.08),rgba(254,209,29,.015));
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.2)}
.case__c--r>span{color:var(--yt)}
.case__c ul{list-style:none;display:grid;gap:9px}
.case__c li{position:relative;padding-left:17px;color:var(--w70);font-size:14px;line-height:1.75}
.case__c li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;
  border-radius:50%;background:var(--w25)}
.case__c--r li::before{background:var(--y)}
.case__c b{color:var(--w)}
.case__l{margin-top:22px;padding:18px 22px;border-radius:var(--r2);
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--hair)}
.case__l>span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yt);margin-bottom:9px}
.case__l p{color:var(--w70);font-size:14.5px;line-height:1.85;margin:0}
.case__l b{color:var(--w)}
.case__f{margin-top:16px;font-family:var(--mono);font-size:10.5px;color:var(--w25);letter-spacing:.04em}
.case__x{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.case__x a{padding:8px 15px;border-radius:var(--rp);background:var(--s2);
  box-shadow:inset 0 0 0 1px var(--hair);font-size:12.5px;color:var(--w70);transition:.18s}
.case__x a:hover{background:var(--s3);color:var(--w)}

/* 사례 요약 카드 */
.ccard{position:relative;display:block;padding:26px;border-radius:var(--r2);
  background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair);transition:.2s}
.ccard:hover{background:var(--s2);transform:translateY(-2px)}
.ccard .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;color:var(--yt);
  text-transform:uppercase;display:block;margin-bottom:12px}
.ccard h3{font-size:clamp(16px,1.8vw,20px);line-height:1.35;margin-bottom:12px}
.ccard p{color:var(--w70);font-size:13.5px;line-height:1.8}
.ccard .n{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--hair)}
.ccard .n b{font-family:var(--mono);font-size:11px;color:var(--w45);font-weight:400}

/* ══════════ 29. 적합 · 비적합 ══════════ */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.fit{grid-template-columns:1fr}}
.fit>div{padding:24px;border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--hair)}
.fit .y{background:linear-gradient(150deg,rgba(254,209,29,.07),rgba(254,209,29,.015));
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.2)}
.fit .n{background:var(--s1)}
.fit h4{font-size:16px;margin-bottom:14px}
.fit .y h4{color:var(--yt)}
.fit ul{list-style:none;display:grid;gap:10px}
.fit li{position:relative;padding-left:22px;color:var(--w70);font-size:14px;line-height:1.75}
.fit li::before{position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px}
.fit .y li::before{content:"✓";color:var(--yt)}
.fit .n li::before{content:"—";color:var(--w25)}

/* ══════════ 30. 자주 묻는 질문 ══════════ */
.faq{display:grid;gap:9px}
.faq details{border-radius:var(--r2);background:var(--s1);
  box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:700;
  font-size:15.5px;letter-spacing:-.02em;display:flex;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:18px;
  color:var(--yt);transition:.2s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{padding-bottom:10px}
.faq .a{padding:0 24px 22px;color:var(--w70);font-size:14.5px;line-height:1.9;max-width:76ch}
.faq summary:hover{background:var(--s2)}

/* ══════════ 31. 산출물 ══════════ */
.outs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:820px){.outs{grid-template-columns:1fr}}
.outs>div{padding:22px 24px;border-radius:var(--r2);background:var(--s1);
  box-shadow:inset 0 0 0 1px var(--hair)}
.outs h4{font-size:16px;margin-bottom:9px}
.outs p{color:var(--w70);font-size:13.5px;line-height:1.8}
.outs b{color:var(--w)}
.ccard{height:100%;display:flex;flex-direction:column}
.ccard .n{margin-top:auto}

/* ══════════ 32. 사례 목차 칩 ══════════ */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;padding:9px 16px;border-radius:var(--rp);
  background:var(--s1);box-shadow:inset 0 0 0 1px var(--hair);
  font-size:12.5px;color:var(--w70);transition:.18s;white-space:nowrap;max-width:100%;
  overflow:hidden;text-overflow:ellipsis}
.chip:hover{background:var(--s2);color:var(--w)}

/* ══════════ 33. 언어 전환 ══════════ */
:root.i18n-wait body{opacity:.55;transition:opacity .15s}
:root[data-lang="en"] body{word-break:normal}
:root[data-lang="en"] h1,:root[data-lang="en"] h2,
:root[data-lang="en"] h3,:root[data-lang="en"] h4{text-wrap:balance}

/* ══════════ 34. 라이트 모드 — 사례 · 적합 · FAQ · 산출물 ══════════ */
:root[data-theme="light"] .ccard .t,
:root[data-theme="light"] .case__id,
:root[data-theme="light"] .case__c--r>span,
:root[data-theme="light"] .case__l>span,
:root[data-theme="light"] .fit .y h4,
:root[data-theme="light"] .tip>b{color:var(--ink)}
:root[data-theme="light"] .case__c--r{
  background:linear-gradient(150deg,rgba(29,78,216,.055),rgba(29,78,216,.012));
  box-shadow:inset 0 0 0 1px rgba(29,78,216,.18)}
:root[data-theme="light"] .case__c--r li::before{background:var(--ink)}
:root[data-theme="light"] .fit .y{
  background:linear-gradient(150deg,rgba(29,78,216,.05),rgba(29,78,216,.012));
  box-shadow:inset 0 0 0 1px rgba(29,78,216,.18)}
:root[data-theme="light"] .fit .y li::before{color:var(--ink)}
:root[data-theme="light"] .faq summary::after{color:var(--ink)}
:root[data-theme="light"] .tip{background:rgba(29,78,216,.05);
  box-shadow:inset 0 0 0 1px rgba(29,78,216,.18)}
:root[data-theme="light"] .case__x a:hover{color:var(--ink)}

/* 다크 모드는 브랜드 옐로를 그대로 유지합니다 */

/* ══════════ 35. 문의 폼 — 타겟별 문항 ══════════ */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.req{color:var(--yt);font-weight:400}
.fi__h{display:block;margin-top:7px;font-size:12.5px;color:var(--w45);line-height:1.65}
.fi[hidden]{display:none}
.form__g--seg{margin-top:0}
.form__g--seg:empty{display:none}

.chs{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chs__i{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:var(--rp);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);cursor:pointer;
  font-size:13.5px;color:var(--w70);transition:.16s;line-height:1.4}
.chs__i:hover{background:var(--s-2);color:var(--w)}
.chs__i input{appearance:none;-webkit-appearance:none;flex:0 0 16px;width:16px;height:16px;
  min-width:16px;min-height:16px;max-width:16px;max-height:16px;margin:0;padding:0;border:0;
  background:transparent;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--w25);
  transition:.16s;cursor:pointer;display:block}
.chs__i input[type="checkbox"]{border-radius:4px}
.chs__i input:checked{background:var(--y);box-shadow:inset 0 0 0 1.5px var(--y)}
.chs__i input:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.chs__i:has(input:checked){background:rgba(254,209,29,.10);
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.42);color:var(--w)}
/* 체크·라디오 — 네모칸은 왼쪽 고정, 글자는 그 옆에서 줄바꿈됩니다.
   `.fi label` 이 대문자·자간을 먹이므로 여기서 다시 눌러 줍니다. */
.chs__i,.fi label.chs__i{display:grid;grid-template-columns:16px minmax(0,1fr);
  align-items:center;column-gap:10px;margin-bottom:0;
  font-family:var(--sans);font-size:13.5px;letter-spacing:normal;text-transform:none;
  color:var(--w70)}
.chs__x{line-height:1.45;padding:0;text-align:left}
.chs__i--one,.fi label.chs__i--one{width:100%;border-radius:var(--r1);align-items:start;
  padding:15px 17px;column-gap:12px}
.chs__i--one .chs__x{font-size:13.5px;line-height:1.6;padding-top:0}
.chs__i--one input{margin-top:3px}
.chs__i--one .req{color:var(--yt)}
/* 안 고른 상태에서도 네모칸이 보이도록 테두리를 세웁니다 */
.chs__i input{box-shadow:inset 0 0 0 1.5px var(--w25)}
.chs__i:hover input{box-shadow:inset 0 0 0 1.5px var(--w45)}
:root[data-theme="light"] .chs__i:has(input:checked){background:rgba(29,78,216,.07);
  box-shadow:inset 0 0 0 1px rgba(29,78,216,.35)}
:root[data-theme="light"] .chs__i input:checked{background:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* 접수 완료 */
.done{min-height:62vh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(60px,10vw,140px)}
.done h2,.done__h{font-size:clamp(30px,5vw,64px);letter-spacing:-.045em;margin:18px 0 20px}
.done p{max-width:62ch;color:var(--w70);font-size:clamp(15px,1.35vw,17.5px);line-height:1.95}
.done__b{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}

/* ══════════ 36. 운영 콘솔 ══════════ */
.ccds{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(28px,4vw,44px)}
.ccds--sm{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.ccds,.ccds--sm{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ccds,.ccds--sm{grid-template-columns:1fr}}
.ccd{display:flex;flex-direction:column;padding:24px;border-radius:var(--r2);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);transition:.2s}
.ccd:hover{background:var(--s-2);transform:translateY(-2px)}
.ccd__h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ccd h3{font-size:17px;letter-spacing:-.02em}
.ccd p{color:var(--w70);font-size:13.5px;line-height:1.75;flex:1}
.ccd__a{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--yt)}
:root[data-theme="light"] .ccd__a{color:var(--ink)}
.ccd em{display:block;width:100%;font-style:normal;font-family:var(--mono);
  font-size:10.5px;color:var(--w45);letter-spacing:.03em;margin-top:2px;overflow-wrap:anywhere}
.cs{padding:4px 9px;border-radius:var(--rp);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase}
.cs--on{background:rgba(52,199,123,.14);color:#4ADE80;box-shadow:inset 0 0 0 1px rgba(52,199,123,.3)}
.cs--off{background:rgba(255,255,255,.05);color:var(--w45);box-shadow:inset 0 0 0 1px var(--hair)}
.msts{display:flex;flex-wrap:wrap;gap:8px}
.mst{padding:9px 16px;border-radius:var(--rp);font-size:13px;
  background:rgba(254,209,29,.10);color:var(--w);box-shadow:inset 0 0 0 1px rgba(254,209,29,.32)}
.mst--off{background:var(--s-1);color:var(--w25);box-shadow:inset 0 0 0 1px var(--hair);
  text-decoration:line-through}
:root[data-theme="light"] .mst{background:rgba(29,78,216,.08);box-shadow:inset 0 0 0 1px rgba(29,78,216,.28)}
:root[data-theme="light"] .mst--off{background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair)}

/* ══════════ 37. 라이트 모드 — 어두운 사진 위에서는 잉크블루를 쓰지 않는다 ══════════
   사진 타일·히어로·현장 카드는 항상 어두운 배경이므로 강조색은 옐로로 되돌립니다.
   (파란 글씨가 사진 위에서 안 보이던 문제) */
:root[data-theme="light"] .hero .k,
:root[data-theme="light"] .ph--img .k,
:root[data-theme="light"] .sl .k,
:root[data-theme="light"] .tile--img .tile__k,
:root[data-theme="light"] .card__i:not(.card__i--g) .k,
:root[data-theme="light"] .co__i .k,
:root[data-theme="light"] .hui .k{color:var(--yt)}
:root[data-theme="light"] .hero .k::before,
:root[data-theme="light"] .ph--img .k::before,
:root[data-theme="light"] .sl .k::before,
:root[data-theme="light"] .tile--img .tile__k::before,
:root[data-theme="light"] .card__i:not(.card__i--g) .k::before,
:root[data-theme="light"] .co__i .k::before{background:var(--y);box-shadow:0 0 12px var(--y)}
:root[data-theme="light"] .ai__k{background:var(--y);color:var(--y-ink)}
:root[data-theme="light"] .tile--img .tile__big em{color:var(--yt)}

/* 사진 위에 얹힌 작은 글자 — 옅은 그림자를 깔아 사진 무늬에 묻히지 않게 */
.tile--img .tile__k,.tile--img .tile__arr,.tile--img .tile__h,.tile--img .tile__d,
.card__i .k,.co__i .lb,.ai__t,.ai__d,.hui__c,.sl__d{
  text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.35)}

/* 사진 타일 글자 가독성 — 아래쪽 그라디언트를 조금 더 눌러준다 */
.tile--img .tile__bg::after{
  background:linear-gradient(0deg,rgba(4,4,6,.92) 0%,rgba(4,4,6,.72) 34%,
             rgba(4,4,6,.30) 62%,rgba(4,4,6,.14) 100%)}


/* ══════════ 38. 타이포그래피 ══════════
   본문은 Pretendard(장문 가독성), 제목은 Wanted Sans(디스플레이).
   숫자는 자리 폭을 고정해 카운터가 흔들리지 않게 합니다. */
h1,h2,h3,h4,
.sl__t,.tile__h,.tile__big,.ph h1,.hero h1,
.art__h,.case h3,.ccard h3,.done h2,.done__h,.ct__h{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-feature-settings:"ss01" 1,"case" 1;
}
h1,.sl__t,.ph h1,.hero h1{font-weight:800;letter-spacing:-.052em}
h2{letter-spacing:-.042em}
h3,h4{letter-spacing:-.032em}
.num,.stat b,.tile__big,.co__st b,.ccd em,.mo{
  font-variant-numeric:tabular-nums;
}
body{font-feature-settings:"ss01" 1;text-rendering:optimizeLegibility}
/* 영문·스페인어에서는 자간을 조금 풀어 준다 (한글 기준 자간이 과하게 좁아 보임) */
:root[data-lang="en"] h1,:root[data-lang="es"] h1,
:root[data-lang="en"] .sl__t,:root[data-lang="es"] .sl__t{letter-spacing:-.038em}
:root[data-lang="zh"] h1,:root[data-lang="zh"] h2,:root[data-lang="zh"] h3{letter-spacing:-.01em}
:root[data-lang="zh"] body{word-break:normal;line-break:strict}

/* ══════════ 39. 문의 폼 — 섹션 · 진행률 · 일정 선택 ══════════ */
.ct__hd{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(24px,4vw,60px);
  align-items:end;margin-bottom:clamp(26px,3.4vw,44px)}
@media(max-width:900px){.ct__hd{grid-template-columns:1fr}}
.ct__h{font-size:clamp(30px,4.6vw,60px);letter-spacing:-.05em;line-height:1.1;margin:16px 0 16px}
.ct__sub{color:var(--w70);font-size:clamp(14.5px,1.3vw,17px);line-height:1.9;max-width:46ch}
.ct__meta{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);
  border-radius:var(--r2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--hair)}
.ct__meta div{background:var(--bg);padding:16px 18px}
.ct__meta span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--w45);margin-bottom:7px}
.ct__meta b{font-size:14px;letter-spacing:-.02em;line-height:1.5}

.ct__bar{position:sticky;top:78px;z-index:5;display:flex;align-items:center;gap:16px;
  padding:13px 18px;border-radius:var(--rp);margin-bottom:26px;
  background:rgba(16,16,20,.86);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px var(--hair)}
:root[data-theme="light"] .ct__bar{background:rgba(255,255,255,.9)}
.ct__pw{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden}
:root[data-theme="light"] .ct__pw{background:rgba(17,17,20,.10)}
.ct__pw i{display:block;height:100%;width:0;border-radius:3px;background:var(--y);
  transition:width .35s var(--ez)}
:root[data-theme="light"] .ct__pw i{background:var(--ink)}
.ct__pt{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.ct__pt b{font-family:var(--mono);font-size:14px;color:var(--yt)}
:root[data-theme="light"] .ct__pt b{color:var(--ink)}
.ct__pt span{font-size:11.5px;color:var(--w45)}
.ct__reset{border:0;background:transparent;cursor:pointer;font-family:inherit;
  font-size:11.5px;color:var(--w45);padding:6px 10px;border-radius:var(--rp)}
.ct__reset:hover{color:var(--w);background:var(--s-2)}

.fs{padding:clamp(24px,3vw,36px);border-radius:var(--r3);margin-bottom:16px;
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair)}
.fs__h{display:flex;gap:16px;align-items:flex-start;margin-bottom:clamp(18px,2.4vw,28px)}
.fs__n{font-family:var(--mono);font-size:12px;color:var(--yt);padding-top:5px;flex:none}
:root[data-theme="light"] .fs__n{color:var(--ink)}
.fs__h h3{font-size:clamp(18px,2.1vw,24px);letter-spacing:-.03em}
.fs__h p{margin-top:6px;font-size:13.5px;color:var(--w45);line-height:1.6}

/* 일정 — 항공권 예매식 */
.sched{display:grid;gap:20px}
.sched__r{display:grid;gap:11px}
.sched__l{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--w45)}
/* 캘린더 — 오늘부터 30일 안에서만 고릅니다 */
.sched__lb{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sched__hint{font-size:12px;color:var(--w45);line-height:1.5}
.sched__hint b{color:var(--w70)}
.cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.cal__m{padding:16px 16px 14px;border-radius:var(--r1);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair)}
.cal__t{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--w70);
  margin-bottom:12px}
.cal__w,.cal__d{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal__w{margin-bottom:5px}
.cal__w span{text-align:center;font-family:var(--mono);font-size:10px;color:var(--w45);
  padding-bottom:5px}
.cal__w .su{color:#FF8A8A}
.cal__w .sa{color:#8ABEFF}
.cd{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:0;
  border-radius:9px;font-family:inherit;font-size:13px;font-weight:600;background:transparent;
  color:var(--w70);transition:.14s;padding:0}
button.cd{cursor:pointer;background:rgba(255,255,255,.045);color:var(--w)}
button.cd:hover{background:rgba(254,209,29,.16);color:var(--w)}
button.cd--su{color:#FF9C9C}
button.cd--sa{color:#9CC8FF}
.cd--off.cd--su{color:rgba(255,156,156,.40)}
.cd--off.cd--sa{color:rgba(156,200,255,.40)}
:root[data-theme="light"] button.cd--su{color:#C0392B}
:root[data-theme="light"] button.cd--sa{color:#1D4ED8}
.cd--off{color:var(--w45);opacity:.62}
.cd--pad{background:none}
button.cd.on{background:var(--y);color:var(--y-ink);font-weight:800;
  box-shadow:0 4px 14px rgba(254,209,29,.3)}
:root[data-theme="light"] button.cd{background:rgba(17,17,20,.05)}
:root[data-theme="light"] button.cd:hover{background:rgba(29,78,216,.12)}
:root[data-theme="light"] button.cd.on{background:var(--ink);color:#fff;box-shadow:none}
.cal__lg{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--w45);flex-wrap:wrap}
.cal__lg i{width:13px;height:13px;border-radius:5px;display:inline-block;margin-left:10px}
.cal__lg i:first-child{margin-left:0}
.lg--ok{background:rgba(255,255,255,.14)}
.lg--no{background:transparent;box-shadow:inset 0 0 0 1px var(--hair)}
.lg--on{background:var(--y)}
:root[data-theme="light"] .lg--ok{background:rgba(17,17,20,.10)}
:root[data-theme="light"] .lg--on{background:var(--ink)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:700px){.slots{grid-template-columns:repeat(2,1fr)}}
.slot{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:13px 16px;
  border:0;cursor:pointer;border-radius:var(--r1);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair);font-family:inherit;transition:.16s;text-align:left}
.slot b{font-size:13.5px;color:var(--w)}
.slot--any{box-shadow:inset 0 0 0 1px rgba(254,209,29,.32)}
.slot--any b::after{content:"권장";margin-left:7px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;padding:2px 6px;border-radius:99px;background:rgba(254,209,29,.18);color:var(--yt)}
:root[data-theme="light"] .slot--any{box-shadow:inset 0 0 0 1px rgba(29,78,216,.3)}
:root[data-theme="light"] .slot--any b::after{background:rgba(29,78,216,.12);color:var(--ink)}
.slot span{font-family:var(--mono);font-size:11px;color:var(--w45)}
.slot:hover{background:var(--s-2)}
.slot.on{background:rgba(254,209,29,.12);box-shadow:inset 0 0 0 1px rgba(254,209,29,.45)}
:root[data-theme="light"] .slot.on{background:rgba(29,78,216,.08);
  box-shadow:inset 0 0 0 1px rgba(29,78,216,.4)}
.sched__sum{padding:13px 16px;border-radius:var(--r1);font-size:13px;color:var(--w45);
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--hair)}
.sched__sum.on{color:var(--w);box-shadow:inset 0 0 0 1px rgba(254,209,29,.3)}
:root[data-theme="light"] .sched__sum.on{box-shadow:inset 0 0 0 1px rgba(29,78,216,.28)}

/* ─────────────────────────────────────────────
   40. 푸터 언어 줄 — /en/ · /es/ · /zh/ 로 가는 진짜 링크
   상단 스위처는 <button> 이라 검색엔진이 따라가지 못합니다.
   ───────────────────────────────────────────── */
.ft__l{margin-top:clamp(34px,4vw,54px);padding-top:24px;
  box-shadow:inset 0 1px 0 var(--hair);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ft__l span{font-family:var(--mono);font-size:11px;color:var(--w25);
  letter-spacing:.08em;text-transform:uppercase;margin-right:6px}
.ft__l a{font-size:13px;color:var(--w45);padding:6px 13px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--hair);transition:color .2s,box-shadow .2s}
.ft__l a:hover{color:var(--w);box-shadow:inset 0 0 0 1px var(--w25)}
.ft__l a[aria-current]{color:var(--ink);background:var(--y);box-shadow:none;font-weight:600}
:root[data-theme="light"] .ft__l a[aria-current]{color:#fff;background:var(--ink)}

/* ─────────────────────────────────────────────
   41. /ci — 브랜드 페이지
   ───────────────────────────────────────────── */
.bg__hero{padding:clamp(52px,8vw,110px) 0 clamp(30px,4vw,54px);text-align:center}
.bg__lock{margin:clamp(22px,3vw,38px) auto clamp(20px,3vw,34px);max-width:520px}
.bg__lock svg{width:100%;height:auto;display:block}
.bg__lead{max-width:60ch;margin:0 auto;color:var(--w60);font-size:clamp(14.5px,1.35vw,17px);line-height:1.95}
.bg__n{max-width:70ch;margin-top:16px;color:var(--w70);font-size:clamp(14.5px,1.3vw,16.5px);line-height:1.95}
.bg__n b{color:var(--w)}
.bg__ft{margin-top:20px;max-width:76ch;color:var(--w45);font-size:13px;line-height:1.85}
.bg__ft b{color:var(--w70)}
.bg__ft a{color:var(--w70);text-decoration:underline;text-underline-offset:3px}

/* 세 단어 */
.bg__ws{margin-top:clamp(26px,3vw,40px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bg__w{border-radius:var(--r1);padding:26px 24px 22px;background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px var(--hair)}
.bg__wh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bg__wh b{font-family:var(--mono);font-size:15px;letter-spacing:.1em;color:var(--yt)}
.bg__wh span{font-size:13px;color:var(--w45)}
.bg__w p{margin-top:12px;font-size:14px;line-height:1.85;color:var(--w70)}
.bg__wn{margin-top:18px;padding-top:16px;box-shadow:inset 0 1px 0 var(--hair);display:grid;gap:9px}
.bg__wn div{display:flex;align-items:baseline;gap:9px}
.bg__wn b{font-size:15px;font-weight:700;color:var(--w);min-width:96px}
.bg__wn span{font-size:12.5px;color:var(--w45)}

/* 심볼 · 작도 */
.bg__sym{margin-top:clamp(24px,3vw,38px);display:grid;grid-template-columns:minmax(0,420px) 1fr;
  gap:clamp(22px,3vw,46px);align-items:start}
.bg__symL{border-radius:var(--r1);background:var(--paper,#F6F5F2);padding:26px}
.bg__d{width:100%;height:auto;display:block}
.bg__g{stroke:rgba(0,0,0,.07);stroke-width:.5}
.bg__c{stroke:#1D4ED8;stroke-width:.7;fill:none;stroke-dasharray:3 2.4;opacity:.75}
.bg__p{fill:#1D4ED8}
.bg__m{stroke:#111114}
.bg__t{font-family:ui-monospace,monospace;font-size:5px;fill:#1D4ED8}
.bg__symR p{font-size:clamp(14.5px,1.3vw,16.5px);line-height:1.95;color:var(--w70);margin-bottom:14px}
.bg__symR b{color:var(--w)}
.bg__syms{margin-top:22px;padding:20px 22px;border-radius:var(--r1);background:var(--paper,#F6F5F2);
  display:flex;gap:22px;align-items:flex-end}
.bg__sz{display:flex;align-items:center;justify-content:center}
.bg__sz svg{width:100%;height:100%;display:block}
.bg__syms span{display:block;text-align:center;margin-top:6px;font-family:var(--mono);
  font-size:10px;color:rgba(0,0,0,.62)}

/* 워드마크 카드 */
.bg__cards{margin-top:clamp(22px,3vw,34px);display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bg__c{border-radius:var(--r1);padding:38px 30px;display:flex;align-items:center;min-height:150px}
.bg__c--l{background:var(--paper,#F6F5F2)}
.bg__c--d{background:#0A0A0C;box-shadow:inset 0 0 0 1px var(--hair)}
.bg__c svg{width:100%;height:auto;max-height:64px;display:block}

/* 색 */
.bg__cols{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bg__col{border-radius:var(--r1);padding:30px 24px 22px;min-height:148px;display:flex;
  flex-direction:column;justify-content:flex-end;box-shadow:inset 0 0 0 1px var(--hair)}
.bg__col b{font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.bg__col span{font-family:var(--mono);font-size:15px;margin-top:6px;opacity:.8}
.bg__col i{font-style:normal;font-size:12px;margin-top:8px;opacity:.6}

/* 규칙 */
.bg__rules{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bg__rules div{border-radius:var(--r1);padding:18px 20px;background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px var(--hair)}
.bg__rules>div>b{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--yt);margin-bottom:6px}
.bg__rules p b{color:var(--w);font-weight:700}
.bg__rules p{font-size:13.5px;line-height:1.8;color:var(--w70)}
.bg__rules .mo{font-size:12.5px}

/* 내려받기 */
.bg__dls{margin-top:22px;display:grid;gap:10px}
.bg__dl{display:flex;align-items:center;justify-content:space-between;gap:18px;
  border-radius:var(--r1);padding:20px 24px;background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px var(--hair);transition:background .2s,box-shadow .2s}
.bg__dl:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--w25)}
.bg__dl b{font-size:15.5px;font-weight:700;color:var(--w)}
.bg__dl p{margin-top:5px;font-size:13px;color:var(--w45);line-height:1.7}
.bg__dl span{font-family:var(--mono);font-size:12px;color:var(--w45);white-space:nowrap}
.bg__dl--p{background:var(--y);box-shadow:none}
.bg__dl--p b,.bg__dl--p span{color:var(--ink)}
.bg__dl--p p{color:rgba(10,10,12,.7)}
.bg__dl--p:hover{background:#ffdc46;box-shadow:none}

:root[data-theme="light"] .bg__w,
:root[data-theme="light"] .bg__rules div,
:root[data-theme="light"] .bg__dl{background:rgba(0,0,0,.03)}
:root[data-theme="light"] .bg__c--d{background:#111114}
:root[data-theme="light"] .bg__dl--p{background:var(--ink)}
:root[data-theme="light"] .bg__dl--p b,
:root[data-theme="light"] .bg__dl--p span{color:#fff}
:root[data-theme="light"] .bg__dl--p p{color:rgba(255,255,255,.75)}
:root[data-theme="light"] .bg__wh b,
:root[data-theme="light"] .bg__rules>div>b{color:var(--ink)}

@media (max-width:900px){
  .bg__ws,.bg__cols{grid-template-columns:1fr}
  .bg__sym{grid-template-columns:1fr}
  .bg__cards,.bg__rules{grid-template-columns:1fr}
  .bg__syms{flex-wrap:wrap;gap:16px}
}

/* 브랜드 페이지 — 색 규칙 두 칸 */
.bg__crule{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bg__crh{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--w45);margin-bottom:9px}
.bg__crp{border-radius:var(--r1);padding:24px 24px 22px}
.bg__crp--d{background:#0A0A0C;box-shadow:inset 0 0 0 1px var(--hair)}
.bg__crp--l{background:#F6F5F2}
.bg__crp b{display:block;font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1;margin-bottom:12px}
.bg__crp p{font-size:13.5px;line-height:1.85}
.bg__crp--d p{color:rgba(255,255,255,.66)} .bg__crp--d p b{display:inline;font-size:inherit;color:#fff}
.bg__crp--l p{color:rgba(0,0,0,.62)} .bg__crp--l p b{display:inline;font-size:inherit;color:#111114}
.bg__chip{background:#FED11D;color:#111114;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600}
@media (max-width:900px){.bg__crule{grid-template-columns:1fr}}


/* ─────────────────────────────────────────────
   42. 옐로 칩 위 글자 — 항상 잉크 (다크·라이트 공통)
   .hero/.sl 안에서 .k 가 옐로 글자색을 상속받아 옐로 배경 위에서 사라지던 것을 막습니다.
   ───────────────────────────────────────────── */
:root[data-theme] .tags .k,
:root[data-theme] .tags .k::before{color:var(--y-ink)}
:root[data-theme] .tags .k::before{background:var(--y-ink);box-shadow:none}

/* ─────────────────────────────────────────────
   43. 홈 정체성 블록 — 5초 안에 누구인지
   ───────────────────────────────────────────── */
.idt{padding:clamp(44px,6vw,84px) 0 clamp(30px,4vw,56px)}
.idt__g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.idt__n{font-family:var(--display);font-size:clamp(34px,5.2vw,62px);font-weight:800;
  letter-spacing:-.045em;line-height:1.05}
.idt__n em{font-style:normal;display:block;font-size:.36em;letter-spacing:.06em;
  color:var(--w45);font-weight:500;margin-top:10px}
.idt__r{margin-top:clamp(18px,2vw,26px);display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-family:var(--mono);font-size:clamp(10.5px,1.05vw,12.5px);letter-spacing:.14em}
.idt__r span{color:var(--yt)}
:root[data-theme="light"] .idt__r span{color:var(--ink)}
.idt__r i{font-style:normal;color:var(--w25)}
.idt__d{margin-top:clamp(16px,2vw,24px);max-width:52ch;color:var(--w70);
  font-size:clamp(14.5px,1.32vw,17px);line-height:1.92}
.idt__c{margin-top:clamp(22px,3vw,34px);display:flex;gap:10px;flex-wrap:wrap}
.idt__s{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.idt__i{border-radius:var(--r1);padding:20px 20px 18px;background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair);transition:background .25s,box-shadow .25s,transform .25s}
.idt__i:first-child{grid-column:1 / -1}
.idt__i:hover{background:var(--s-2);box-shadow:inset 0 0 0 1px var(--w25);transform:translateY(-2px)}
.idt__i b{display:block;font-family:var(--display);font-size:clamp(26px,3.4vw,40px);
  font-weight:800;letter-spacing:-.04em;line-height:1}
.idt__k{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;color:var(--yt)}
:root[data-theme="light"] .idt__k{color:var(--ink)}
.idt__t{display:block;margin-top:5px;font-size:12.5px;color:var(--w45);line-height:1.6}
.idt__f{margin-top:clamp(20px,2.5vw,30px);font-size:12px;color:var(--w25);line-height:1.7}
@media (max-width:900px){
  .idt__g{grid-template-columns:1fr}
  .idt__i:first-child{grid-column:auto}
}

/* ─────────────────────────────────────────────
   44. 사업 원장 — 액셀러레이팅 · 오픈이노베이션
   ───────────────────────────────────────────── */
.wks{display:grid;gap:10px}
.wk{border-radius:var(--r1);padding:22px 24px 18px;background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair)}
.wk__h{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.wk__no{font-family:var(--mono);font-size:11px;color:var(--w25)}
.wk__t{font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:4px 9px;
  border-radius:var(--rp);background:var(--s-3);color:var(--w70)}
.wk__t--oi{background:var(--y);color:var(--y-ink)}
.wk__h h3{flex:1 1 100%;margin-top:8px;font-size:clamp(16px,1.6vw,19.5px);
  font-weight:700;letter-spacing:-.025em;line-height:1.4}
.wk__d{margin-top:16px;padding-top:14px;box-shadow:inset 0 1px 0 var(--hair);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 26px}
.wk__d dt{font-family:var(--mono);font-size:10px;letter-spacing:.07em;color:var(--w25);margin-bottom:5px}
.wk__d dd{font-size:13.5px;line-height:1.7;color:var(--w70)}
.cta__row{display:flex;gap:10px;flex-wrap:wrap}

/* ─────────────────────────────────────────────
   45. 문의 목적 — 강의 · 평가 · 멘토링 · 액셀러레이팅
   ───────────────────────────────────────────── */
.pgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;
  margin-bottom:clamp(20px,2.5vw,30px)}
.pgrp{border-radius:var(--r1);padding:18px 18px 16px;background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair)}
.pgrp__h{margin-bottom:12px}
.pgrp__h span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--w25)}
.pgrp__h b{display:block;margin-top:4px;font-size:15px;font-weight:700;letter-spacing:-.02em}
.pc{display:inline-flex;align-items:center;margin:0 6px 6px 0;cursor:pointer}
.pc input{position:absolute;opacity:0;width:0;height:0}
.pc span{display:inline-block;padding:7px 13px;border-radius:var(--rp);font-size:12.5px;
  color:var(--w70);background:var(--s-2);box-shadow:inset 0 0 0 1px var(--hair);
  transition:background .18s,color .18s,box-shadow .18s}
.pc:hover span{color:var(--w)}
.pc input:checked + span{background:var(--y);color:var(--y-ink);box-shadow:none;font-weight:600}
.pc input:focus-visible + span{box-shadow:0 0 0 2px var(--y)}

/* ─────────────────────────────────────────────
   46. About — 스토리 한 줄기
   ───────────────────────────────────────────── */
.arc{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:10px;
  counter-reset:arc}
.arc__i{position:relative;border-radius:var(--r1);padding:22px 20px 20px;
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair)}
.arc__i::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:1px;
  background:var(--hair)}
.arc__i:last-child::after{display:none}
.arc__k{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  padding:4px 9px;border-radius:var(--rp);background:var(--y);color:var(--y-ink)}
.arc__t{display:block;margin-top:13px;font-size:clamp(15px,1.5vw,17.5px);font-weight:700;
  letter-spacing:-.025em;line-height:1.4}
.arc__d{margin-top:9px;font-size:13px;line-height:1.8;color:var(--w45)}
.arc__d b{color:var(--w70);font-weight:600}
@media (max-width:820px){.arc__i::after{display:none}}
.bg__h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ft__lg{width:46px;height:46px;display:block;margin-bottom:16px}


/* 글자 수 카운터 */
.cnt{display:flex;align-items:baseline;gap:6px;margin-top:7px;font-family:var(--mono);
  font-size:11px;color:var(--w45)}
.cnt b{font-weight:700;color:var(--w70)}
.cnt i{font-style:normal}
.cnt em{font-style:normal;margin-left:auto;padding:2px 9px;border-radius:99px;
  background:rgba(255,255,255,.05);color:var(--w45)}
.cnt.warn b{color:#FFB4B4}
.cnt.warn em{background:rgba(255,138,138,.14);color:#FFB4B4}
.cnt.ok b{color:var(--yt)}
.cnt.ok em{background:rgba(254,209,29,.14);color:var(--yt)}
:root[data-theme="light"] .cnt.ok b,:root[data-theme="light"] .cnt.ok em{color:var(--ink)}
:root[data-theme="light"] .cnt.ok em{background:rgba(29,78,216,.10)}

/* 페이지 나눔 */
.pgof{display:none!important}
.pager{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  margin-top:clamp(28px,3.4vw,46px)}
.pgb{min-width:38px;height:38px;padding:0 12px;border:0;cursor:pointer;border-radius:11px;
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);color:var(--w70);
  font-family:var(--mono);font-size:13px;transition:.16s}
.pgb:hover:not([disabled]){background:var(--s-2);color:var(--w)}
.pgb[disabled]{opacity:.32;cursor:default}
.pgb.on{background:var(--y);color:var(--y-ink);font-weight:800;box-shadow:none}
:root[data-theme="light"] .pgb.on{background:var(--ink);color:#fff}
.pgc{flex:1 0 100%;text-align:center;margin-top:12px;font-family:var(--mono);
  font-size:11.5px;color:var(--w45)}

/* ══ 상단 공지 바 ══ */
.nt{background:var(--y);color:var(--y-ink)}
.nt__in{max-width:var(--mx);margin:0 auto;padding:9px clamp(16px,3vw,34px);
  display:flex;align-items:center;gap:12px;font-size:13px}
.nt__d{width:6px;height:6px;border-radius:50%;background:var(--y-ink);flex:none;opacity:.6}
.nt p{margin:0;font-weight:600;min-width:0}
.nt a{font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.nt__x{margin-left:auto;border:0;background:transparent;cursor:pointer;font-size:13px;
  color:var(--y-ink);opacity:.55;padding:4px 2px;line-height:1}
.nt__x:hover{opacity:1}
@media(max-width:640px){.nt__in{font-size:12px;gap:9px}}

/* ══ 하단 안내 시트 — 창을 가로막지 않습니다 ══ */
.osh{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(86px,8vw,104px);z-index:70;
  width:min(374px,calc(100vw - 28px));transform:translateY(18px);opacity:0;
  transition:opacity .4s var(--sp),transform .5s var(--sp2)}
.osh.on{opacity:1;transform:none}
.osh__c{position:relative;padding:24px 24px 22px;border-radius:var(--r3);
  background:var(--s2,rgba(22,22,26,.96));backdrop-filter:blur(18px);
  box-shadow:inset 0 0 0 1px var(--hair),0 24px 60px rgba(0,0,0,.5)}
:root[data-theme="light"] .osh__c{background:rgba(255,255,255,.97);
  box-shadow:inset 0 0 0 1px var(--hair),0 24px 60px rgba(0,0,0,.16)}
.osh__x{position:absolute;top:12px;right:12px;border:0;background:transparent;cursor:pointer;
  color:var(--w45);font-size:13px;padding:6px;line-height:1}
.osh__x:hover{color:var(--w)}
.osh__k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--yt)}
:root[data-theme="light"] .osh__k{color:var(--ink)}
.osh h3{margin-top:9px;font-size:18px;letter-spacing:-.03em;line-height:1.35}
.osh p{margin-top:8px;font-size:13px;color:var(--w45);line-height:1.65}
.osh__b{margin-top:16px;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.osh__k2{font-size:12.5px;color:var(--w45)}
.osh__k2:hover{color:var(--yt)}
@media(max-width:700px){.osh{right:10px;left:10px;bottom:84px;width:auto}}

/* ══ 푸터 위 문의 밴드 ══ */
.band{margin-top:clamp(56px,7vw,110px)}
.band__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,3.4vw,56px);align-items:center;
  padding:clamp(30px,4vw,58px) clamp(24px,3.4vw,52px);border-radius:var(--r4);
  background:linear-gradient(135deg,rgba(254,209,29,.14),rgba(254,209,29,.03) 60%);
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.22)}
:root[data-theme="light"] .band__in{background:linear-gradient(135deg,rgba(254,209,29,.30),rgba(254,209,29,.07) 60%);
  box-shadow:inset 0 0 0 1px var(--hair)}
.band__t h2{margin-top:12px;font-size:clamp(24px,3.2vw,40px);letter-spacing:-.035em;line-height:1.2}
.band__t p{margin-top:14px;font-size:14.5px;color:var(--w45);line-height:1.75}
.band__t p b{color:var(--w)}
.band__a{display:flex;flex-direction:column;gap:10px}
.band__1,.band__2{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 22px;border-radius:var(--r1);font-size:14.5px;font-weight:700;transition:.2s}
.band__1 i,.band__2 i{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:400;
  opacity:.62;white-space:nowrap}
.band__1{background:var(--y);color:var(--y-ink)}
.band__1:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(254,209,29,.28)}
.band__2{background:rgba(255,255,255,.055);color:var(--w);box-shadow:inset 0 0 0 1px var(--hair)}
.band__2:hover{background:rgba(255,255,255,.1)}
:root[data-theme="light"] .band__2{background:rgba(17,17,20,.05)}
@media(max-width:860px){.band__in{grid-template-columns:1fr}}

/* ══ 브랜드 페이지 — 담은 뜻 · 용어 · 인물 ══ */
.bg__ms{margin-top:clamp(24px,3vw,38px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.bg__m1{position:relative;padding:26px 24px 24px;border-radius:var(--r2);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair);transition:.25s}
.bg__m1:hover{background:var(--s-2);transform:translateY(-2px)}
.bg__m1n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--yt)}
:root[data-theme="light"] .bg__m1n{color:var(--ink);opacity:.5}
.bg__m1 b{display:block;margin-top:10px;font-size:19px;letter-spacing:-.03em}
.bg__m1 em{display:block;margin-top:5px;font-style:normal;font-size:12.5px;color:var(--w45)}
.bg__m1 p{margin-top:13px;font-size:13.5px;line-height:1.85;color:var(--w70)}
.bg__m1 p b{display:inline;font-size:inherit;color:var(--w)}

.bg__terms{margin-top:clamp(30px,3.6vw,50px);padding:clamp(24px,3vw,38px);
  border-radius:var(--r2);background:rgba(254,209,29,.055);
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.2)}
:root[data-theme="light"] .bg__terms{background:rgba(254,209,29,.14);
  box-shadow:inset 0 0 0 1px var(--hair)}
.bg__terms h3{font-size:clamp(17px,1.8vw,21px);letter-spacing:-.03em}
.bg__tg{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.bg__t1 b{font-size:15.5px}
.bg__t1 .mo{display:block;margin-top:3px;font-size:10.5px;letter-spacing:.13em;color:var(--w45)}
.bg__t1 p{margin-top:9px;font-size:13px;line-height:1.8;color:var(--w70)}

.bg__who{margin-top:clamp(30px,3.6vw,50px);display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);
  padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--hair)}
.bg__who h3{margin-top:10px;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.035em;line-height:1.25}
.bg__whoR p{font-size:14.5px;line-height:1.95;color:var(--w70)}
.bg__whoR p+p{margin-top:14px}
.bg__whoN{padding-left:16px;border-left:2px solid var(--y);color:var(--w)!important}
.bg__whoR .more{display:inline-block;margin-top:20px}
@media(max-width:800px){.bg__who{grid-template-columns:1fr}}

/* 사진이 아직 없는 강의 카드 — 안 맞는 사진을 억지로 넣지 않습니다 */
.card__i--g{
  --yt:var(--y);
  /* 사진이 없으므로 어두운 덮개도 없습니다 — 글자색을 테마 값으로 되돌립니다 */
  --w:#FBFBFD;--w70:rgba(251,251,253,.76);--w45:rgba(251,251,253,.56);--w25:rgba(251,251,253,.42);
  color:var(--w);
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  gap:6px;padding:22px;aspect-ratio:4/3;border-radius:inherit;
  background:linear-gradient(150deg,rgba(254,209,29,.16),rgba(254,209,29,.02) 58%),var(--s-1);
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.20)}
:root[data-theme="light"] .card__i--g{
  --yt:#7A5F00;
  --w:#0E0E11;--w70:rgba(14,14,17,.78);--w45:rgba(14,14,17,.60);--w25:rgba(14,14,17,.48);
  background:linear-gradient(150deg,rgba(254,209,29,.34),rgba(254,209,29,.06) 58%),var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair)}
.card__i--g .card__en{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--w70)}
.card__i--g .card__big{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.04em;
  line-height:1.1;color:var(--w)}
.card__i--g .card__ph{margin-top:8px;font-size:10.5px;color:var(--w45);
  padding-top:9px;border-top:1px dashed var(--hair)}
.card__i--g .card__n{position:absolute;top:18px;left:22px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;color:var(--yt)}
:root[data-theme="light"] .card__i--g .card__n{color:var(--ink);opacity:.75}
.card__i--g .card__go{position:absolute;top:16px;right:18px;font-size:15px;color:var(--w70)}
.card:hover .card__i--g{box-shadow:inset 0 0 0 1px rgba(254,209,29,.45)}


/* display 를 지정한 요소는 hidden 이 안 먹습니다 — 폼의 유형별 문항이 통째로 보이던 원인 */
[hidden]{display:none!important}

/* 상세를 공개하지 않는 원장 행 — 한 줄로 담백하게 */
.wk__m{margin-top:14px;padding-top:12px;box-shadow:inset 0 1px 0 var(--hair);
  display:flex;flex-wrap:wrap;gap:8px 28px;font-size:13.5px;color:var(--w70)}
.wk__m i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  color:var(--w25);margin-right:9px}

/* ══════════════════════════════════════════════
   모바일 마무리 — 화면이 좁을 때 덩어리를 줄입니다
   ══════════════════════════════════════════════ */
@media (max-width:640px){
  /* 사진 없는 강의 카드가 화면 하나를 다 먹지 않게 */
  .card__i--g{aspect-ratio:auto;min-height:112px;padding:38px 18px 15px;justify-content:flex-end;gap:3px}
  .card__i--g .card__big{font-size:25px}
  .card__i--g .card__en{font-size:9.5px;color:var(--w70)}
  .card__i--g .card__n{top:14px;left:18px}
  .card__i--g .card__go{top:12px;right:15px}

  /* 원장 · 실적 한 줄 메타 */
  .wk{padding:18px 18px 15px}
  .wk__m{gap:6px 18px;font-size:12.5px}
  .wk__d{gap:10px 18px}

  /* 브랜드 페이지 카드 */
  .bg__m1{padding:20px 18px 18px}
  .bg__who{padding-top:22px}

  /* 문의 폼 — 한 칸씩 */
  .form{padding:20px 16px}
  .fs{padding:18px 14px}
  .form__g{grid-template-columns:1fr;gap:14px}
  .ct__meta{grid-template-columns:1fr 1fr}
  .chs__i{padding:10px 13px}
  .pgs{grid-template-columns:1fr}

  /* 하단 문의 밴드 */
  .band__in{padding:26px 18px}
  .band__1,.band__2{padding:15px 17px;font-size:13.5px}
  .band__1 i,.band__2 i{font-size:10.5px}

  /* 표는 가로로 밀어서 봅니다 */
  .art__b table,.rows table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* 글 본문 사진 · 유튜브 */
  .art__b img,.emb{border-radius:12px}
}

@media (max-width:420px){
  .card__i--g .card__big{font-size:22px}
  .ct__meta{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════
   38. 문의 폼 — 옐로를 섞어 온기를 줍니다 (특히 아침 모드)
   ───────────────────────────────────────────────────────────────────
   회색만 깔린 화면은 '없어 보입니다'. 브랜드 옐로를 아주 얇게 깔고,
   번호·선택 상태·진행바에만 진하게 씁니다.
   ─────────────────────────────────────────────────────────────────── */

/* ── 큰 카드(전체 폼) — 위에서 아래로 옐로가 옅게 흐릅니다 ── */
.form{
  background:
    linear-gradient(180deg,rgba(254,209,29,.055),rgba(254,209,29,0) 340px),
    var(--s-1);
}
:root[data-theme="light"] .form{
  background:
    linear-gradient(180deg,rgba(254,209,29,.20),rgba(254,209,29,.02) 380px),
    rgba(255,255,255,.72);
  box-shadow:inset 0 0 0 1px rgba(180,140,0,.16),0 18px 50px rgba(120,95,0,.07);
}

/* ── 단계 카드 01 · 02 · 03 ── */
.fs{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(254,209,29,.035),rgba(254,209,29,0) 120px),var(--s-1);
}
.fs::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--y),rgba(254,209,29,.15));
}
:root[data-theme="light"] .fs{
  background:linear-gradient(180deg,rgba(254,209,29,.13),rgba(254,209,29,0) 150px),#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(180,140,0,.14),0 2px 10px rgba(120,95,0,.045);
}

/* 단계 번호 — 옐로 알약 */
.fs__n{
  display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 9px;
  border-radius:var(--rp);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  background:var(--y);color:var(--y-ink);margin-top:2px;
  box-shadow:0 3px 10px rgba(254,209,29,.30);
}
:root[data-theme="light"] .fs__n{background:var(--y);color:var(--y-ink)}
.fs__h h3::after{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--y);margin-left:7px;vertical-align:middle;
}

/* ── 진행 바 — 검정 대신 옐로 그라디언트 ── */
:root[data-theme="light"] .ct__pw{background:rgba(180,140,0,.14)}
.ct__pw i,:root[data-theme="light"] .ct__pw i{
  background:linear-gradient(90deg,#FFDE5C,var(--y) 60%,#E8B800);
  box-shadow:0 0 10px rgba(254,209,29,.55);
}
:root[data-theme="light"] .ct__pt b{color:#7A5F00}
:root[data-theme="light"] .ct__bar{
  background:rgba(255,255,255,.93);
  box-shadow:inset 0 0 0 1px rgba(180,140,0,.18),0 6px 20px rgba(120,95,0,.06);
}

/* ── 라벨 — 회색이 너무 옅어 안 보이던 것 ── */
.fi label{color:var(--w70);font-weight:500}
:root[data-theme="light"] .fi label{color:rgba(17,17,20,.72)}
.req{margin-left:3px}
:root[data-theme="light"] .req{color:#8A6100}

/* ── 입력칸 — 하얗게, 초점은 옐로 링 ── */
:root[data-theme="light"] .fi input,
:root[data-theme="light"] .fi select,
:root[data-theme="light"] .fi textarea{
  background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(17,17,20,.14);
}
.fi input:focus,.fi select:focus,.fi textarea:focus{
  box-shadow:inset 0 0 0 2px var(--y),0 0 0 4px rgba(254,209,29,.16);
}
:root[data-theme="light"] .fi input:focus,
:root[data-theme="light"] .fi select:focus,
:root[data-theme="light"] .fi textarea:focus{
  background:#FFFEF7;box-shadow:inset 0 0 0 2px #E8B800,0 0 0 4px rgba(254,209,29,.22);
}
:root[data-theme="light"] .fi input::placeholder,
:root[data-theme="light"] .fi textarea::placeholder{color:rgba(17,17,20,.38)}

/* ── 목적 묶음 카드 (Interview · Column · Event · Data) ── */
.pgrp{
  background:linear-gradient(160deg,rgba(254,209,29,.07),rgba(254,209,29,0) 60%),var(--s-1);
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.16);
}
:root[data-theme="light"] .pgrp{
  background:linear-gradient(160deg,rgba(254,209,29,.22),rgba(254,209,29,.03) 62%),#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(180,140,0,.20);
}
.pgrp__h span{color:var(--w45)}
:root[data-theme="light"] .pgrp__h span{color:#8A6B00}
.pgrp__h b::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--y);margin-right:7px;vertical-align:middle;
}
:root[data-theme="light"] .pc span{background:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px var(--hair);color:rgba(9,9,11,.80)}
:root[data-theme="light"] .pc:hover span{box-shadow:inset 0 0 0 1px rgba(180,140,0,.5);color:var(--ink)}

/* ── 라디오 · 체크 ── */
:root[data-theme="light"] .chs__i{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair)}
:root[data-theme="light"] .chs__i:hover{box-shadow:inset 0 0 0 1px rgba(180,140,0,.45)}
:root[data-theme="light"] .chs__i:has(input:checked){
  background:linear-gradient(180deg,rgba(254,209,29,.26),rgba(254,209,29,.12));
  box-shadow:inset 0 0 0 1.5px #E8B800}
:root[data-theme="light"] .chs__i input:checked{background:var(--y);
  box-shadow:inset 0 0 0 1.5px #B8860B}
:root[data-theme="light"] .chs__i input{box-shadow:inset 0 0 0 1.5px rgba(17,17,20,.30)}

/* ── 달력 ── */
:root[data-theme="light"] .cal__m{background:#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(180,140,0,.16)}
:root[data-theme="light"] button.cd{background:rgba(17,17,20,.045);color:var(--ink)}
:root[data-theme="light"] button.cd:hover{background:rgba(254,209,29,.40)}
/* 위 줄이 날짜 색을 잉크로 덮어써서 주말 색이 사라졌습니다. 다시 세워 둡니다. */
:root[data-theme="light"] button.cd.cd--su{color:#C0392B}
:root[data-theme="light"] button.cd.cd--sa{color:#1D4ED8}
:root[data-theme="light"] .cd--off.cd--su{color:rgba(192,57,43,.45)}
:root[data-theme="light"] .cd--off.cd--sa{color:rgba(29,78,216,.45)}
:root[data-theme="light"] button.cd.on,
:root[data-theme="light"] button.cd.cd--su.on,
:root[data-theme="light"] button.cd.cd--sa.on{background:var(--y);color:var(--y-ink);box-shadow:none}
:root[data-theme="light"] .cal__w .su{color:#C0392B}
:root[data-theme="light"] .cal__w .sa{color:#1D4ED8}

/* ── 머리말 옆 요약 상자 ── */
:root[data-theme="light"] .ct__meta{background:rgba(180,140,0,.22);
  box-shadow:inset 0 0 0 1px rgba(180,140,0,.22)}
:root[data-theme="light"] .ct__meta div{
  background:linear-gradient(150deg,rgba(254,209,29,.18),#FFFFFF 62%)}
:root[data-theme="light"] .ct__meta span{color:#8A6B00}
.ct__meta div{background:var(--bg-2)}
.ct__meta div:first-child{
  background:linear-gradient(150deg,rgba(254,209,29,.14),var(--bg-2) 62%)}

/* ── 보내기 버튼 주변 ── */
:root[data-theme="light"] .form__n{color:rgba(17,17,20,.62)}
:root[data-theme="light"] .form__n b{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════
   39. 전수 원장 — 강의 · 심사 · 멘토링 · 사업총괄
   ─────────────────────────────────────────────────────────────────── */
.ldg__sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.ldg__s{padding:20px 20px 18px;border-radius:var(--r2);
  background:linear-gradient(160deg,rgba(254,209,29,.10),rgba(254,209,29,0) 62%),var(--s-1);
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.18)}
:root[data-theme="light"] .ldg__s{
  background:linear-gradient(160deg,rgba(254,209,29,.24),#FFFFFF 64%);
  box-shadow:inset 0 0 0 1px rgba(180,140,0,.20)}
.ldg__s .tile__big{margin:8px 0 6px;font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.04em}
.ldg__note{margin-top:20px;font-size:13px;line-height:1.9;color:var(--w70)}
.ldg__note b{color:var(--w)}
.ldg__note a{color:var(--yt);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.ldg__bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.ldg__chips{display:flex;gap:7px;flex-wrap:wrap}
.ldgc{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:0;cursor:pointer;
  border-radius:var(--rp);background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);
  font-family:inherit;font-size:13px;font-weight:600;color:var(--w70);transition:.16s}
.ldgc em{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.7}
.ldgc:hover{color:var(--w);box-shadow:inset 0 0 0 1px rgba(254,209,29,.5)}
.ldgc.on{background:var(--y);color:var(--y-ink);box-shadow:none}
.ldgc.on em{opacity:.75}
.ldg__q{flex:1 1 260px;min-width:200px;padding:11px 16px;border:0;border-radius:var(--rp);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);color:var(--w);
  font-family:inherit;font-size:13.5px;outline:none}
:root[data-theme="light"] .ldg__q{background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(17,17,20,.14)}
.ldg__q:focus{box-shadow:inset 0 0 0 2px var(--y)}
.ldg__q::placeholder{color:var(--w25)}

.ldg__hd,.ldg__r{display:grid;grid-template-columns:78px minmax(0,2.1fr) minmax(0,1.3fr) minmax(0,1.3fr);
  gap:16px;align-items:baseline}
.ldg__hd{padding:0 18px 10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--w45);border-bottom:1px solid var(--hair)}
.ldg{display:flex;flex-direction:column}
.ldg__r{padding:15px 18px;border-bottom:1px solid var(--hair);transition:background .16s}
.ldg__r:hover{background:var(--s-1)}
:root[data-theme="light"] .ldg__r:hover{background:rgba(254,209,29,.12)}
.ldg__y{font-size:12px;color:var(--yt);font-weight:600;white-space:nowrap}
.ldg__t{font-size:14.5px;font-weight:600;letter-spacing:-.02em;line-height:1.55}
.ldg__b{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:99px;vertical-align:middle;
  font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.06em;font-weight:500;
  background:var(--s-2);color:var(--w70);white-space:nowrap}
.ldg__b--lecture{background:rgba(254,209,29,.20);color:var(--yt)}
.ldg__b--eval{background:rgba(96,165,250,.16);color:#93C5FD}
.ldg__b--mentor{background:rgba(74,222,128,.14);color:#86EFAC}
.ldg__b--award{background:rgba(244,114,182,.14);color:#F9A8D4}
:root[data-theme="light"] .ldg__b{background:rgba(9,9,11,.06);color:rgba(9,9,11,.70)}
:root[data-theme="light"] .ldg__b--lecture{background:rgba(254,209,29,.34);color:#7A5F00}
:root[data-theme="light"] .ldg__b--eval{background:rgba(29,78,216,.10);color:#1D4ED8}
:root[data-theme="light"] .ldg__b--mentor{background:rgba(21,128,61,.10);color:#14602F}
:root[data-theme="light"] .ldg__b--award{background:rgba(190,24,93,.09);color:#9D1049}
.ldg__c{font-size:12.5px;color:var(--w70);line-height:1.6}
.ldg__n{font-size:12px;color:var(--w45);line-height:1.6}
.ldg__empty{padding:34px 18px;text-align:center;color:var(--w45);font-size:13.5px}

/* 연도 머리글 — 위에 붙어 따라옵니다 */
.ldg__yh{position:sticky;top:calc(var(--nav-h) + 6px);z-index:3;
  display:flex;align-items:baseline;gap:10px;
  margin:26px 0 0;padding:9px 18px;border-radius:var(--rp);
  background:linear-gradient(90deg,rgba(254,209,29,.22),rgba(254,209,29,.04));
  backdrop-filter:blur(10px)}
:root[data-theme="light"] .ldg__yh{
  background:linear-gradient(90deg,rgba(254,209,29,.42),rgba(255,255,255,.86))}
.ldg__yh:first-child{margin-top:0}
.ldg__yh b{font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:.02em}
.ldg__yh i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--w45)}
:root[data-theme="light"] .ldg__yh i{color:rgba(17,17,20,.6)}

/* 기관 이름 모음 — 섭외 담당자가 자기 기관을 먼저 찾습니다 */
.orgs{display:flex;flex-wrap:wrap;gap:8px}
.orgc{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--rp);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);
  font-size:13.5px;font-weight:500;letter-spacing:-.01em;color:var(--w70);transition:.16s}
.orgc:hover{color:var(--w);box-shadow:inset 0 0 0 1px rgba(254,209,29,.55)}
.orgc em{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:700;
  padding:2px 7px;border-radius:99px;background:var(--y);color:var(--y-ink)}
:root[data-theme="light"] .orgc{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair);
  color:rgba(17,17,20,.80)}
:root[data-theme="light"] .orgc:hover{box-shadow:inset 0 0 0 1px rgba(180,140,0,.55)}
@media(max-width:640px){
  .orgc{font-size:12.5px;padding:8px 12px}
  .ldg__yh{top:8px;padding:8px 12px}
}
.ldg__more{margin-top:18px;width:100%}
.btn-o{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border:0;border-radius:var(--rp);cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:600;color:var(--w70);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair);transition:.16s}
.btn-o:hover{color:var(--w);box-shadow:inset 0 0 0 1px rgba(254,209,29,.55)}

@media(max-width:820px){
  .ldg__hd{display:none}
  .ldg__r{grid-template-columns:1fr;gap:4px;padding:15px 4px}
  .ldg__y{font-size:11px;letter-spacing:.06em}
  .ldg__t{font-size:14px}
  .ldg__c{font-size:12px}
  .ldg__c::before{content:"";}
  .ldg__bar{gap:9px}
  .ldg__q{flex:1 1 100%}
}

/* 강의 페이지 — 한 줄로 각인시키는 노란 박스 */
.callout{margin:0 0 22px;padding:20px 24px;border-radius:var(--r2);
  font-size:clamp(15px,1.4vw,18px);font-weight:600;line-height:1.75;letter-spacing:-.02em;
  background:linear-gradient(140deg,rgba(254,209,29,.22),rgba(254,209,29,.06));
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.34);color:var(--w)}
:root[data-theme="light"] .callout{
  background:linear-gradient(140deg,rgba(254,209,29,.46),rgba(254,209,29,.14));
  box-shadow:inset 0 0 0 1px rgba(180,140,0,.30);color:var(--ink)}

/* ══════════════════════════════════════════════════════════════
   40. 본문 서체 — 관리자 설정에서 고릅니다
   ──────────────────────────────────────────────────────────────
   sans  : 프리텐다드 — 화면에서 또렷합니다 (기본)
   serif : 본명조 — 긴 글을 종이처럼 읽게 합니다
   ────────────────────────────────────────────────────────────── */
:root[data-read="serif"]{
  --read-font:"Noto Serif KR","Nanum Myeongjo",Georgia,"Apple SD Gothic Neo",serif;
  --read-size:clamp(17px,1.2vw + 4px,19px);
}
:root[data-read="serif"] .art__b{line-height:1.95;letter-spacing:0}
:root[data-read="serif"] .art__b>p b,
:root[data-read="serif"] .art__b li b{font-weight:700}

/* 제목·인용은 어느 쪽이든 브랜드 서체를 씁니다 */
.art__b h2,.art__b h3,.art__b h4,.art__b blockquote p{font-family:var(--display)}

/* 문단 사이 호흡 — 국내 블로그 기준으로 조금 넓힙니다 */
.art__b>p{margin-bottom:1.65em}
.art__b h2{margin:2.4em 0 .9em}
.art__b h3{margin:2em 0 .7em}
.art__b ul,.art__b ol{margin-bottom:1.9em}
.art__b li{line-height:1.85}
@media(max-width:720px){
  .art__b{line-height:1.85;padding-top:38px}
  .art__b>p{margin-bottom:1.5em}
}

/* 본문 글자색 — 긴 글은 회색보다 진해야 눈이 덜 피로합니다 */
:root[data-theme="light"] .art__b{color:rgba(14,14,17,.90)}
.art__b>p b,.art__b li b,.art__b strong{color:var(--w)}
:root[data-theme="light"] .art__b>p b,
:root[data-theme="light"] .art__b li b,
:root[data-theme="light"] .art__b strong{color:var(--ink)}
.art__b a:not(.cta):not(.btn){color:var(--yt);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}

/* ══════════════════════════════════════════════════════════════
   41. 긴 글 조판 — 소제목 · 표 · 번호목록 · 코드 · 요약상자
   ══════════════════════════════════════════════════════════════ */
.art__b h3{
  font-size:clamp(18px,1.9vw,23px);font-weight:800;letter-spacing:-.03em;
  line-height:1.4;color:var(--w);word-break:keep-all;
}
:root[data-theme="light"] .art__b h3{color:var(--ink)}
.art__b h4{font-size:clamp(16px,1.5vw,18px);font-weight:700;color:var(--w);
  margin:1.8em 0 .5em;letter-spacing:-.02em}

/* 번호 목록 */
.art__b ol{list-style:none;counter-reset:n;display:flex;flex-direction:column;gap:12px;margin-left:0}
.art__b ol>li{counter-increment:n;position:relative;padding-left:40px}
.art__b ol>li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.12em;
  display:grid;place-items:center;min-width:26px;height:22px;padding:0 6px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;line-height:1;
  color:var(--y-ink);background:var(--y);border-radius:7px;
}
.art__b ol>li::after{display:none}

/* 표 */
.art__b table{width:100%;border-collapse:collapse;margin:2em 0;font-size:.92em;line-height:1.7}
.art__b thead th{
  text-align:left;padding:12px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--w45);border-bottom:1.5px solid var(--hair);white-space:nowrap;
}
.art__b tbody td{padding:14px;border-bottom:1px solid var(--hair);vertical-align:top;word-break:keep-all}
.art__b tbody tr:hover{background:var(--s-1)}
:root[data-theme="light"] .art__b tbody tr:hover{background:rgba(254,209,29,.10)}
.art__b tbody td:first-child{font-weight:600;color:var(--w);white-space:nowrap}
:root[data-theme="light"] .art__b tbody td:first-child{color:var(--ink)}

/* 코드 · 예시 */
.art__b code{font-family:var(--mono);font-size:.88em;padding:2px 6px;border-radius:5px;
  background:var(--s-2);color:var(--w)}
:root[data-theme="light"] .art__b code{background:rgba(17,17,20,.07);color:var(--ink)}
.art__b pre{margin:1.8em 0;padding:20px 22px;border-radius:var(--r2);overflow-x:auto;
  background:#0E0E12;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  font-family:var(--mono);font-size:13px;line-height:1.85;color:#D9D9E0;white-space:pre}
.art__b pre code{background:none;padding:0;color:inherit;font-size:inherit}

/* 구분선 */
.art__b hr{border:0;height:1px;background:var(--hair);margin:3em 0}

/* 요약 · 체크 상자 — 긴 글 중간에 숨 돌리는 자리 */
.box-n{margin:2.2em 0;padding:22px 26px;border-radius:var(--r2);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair)}
:root[data-theme="light"] .box-n{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair)}
.box-n>b:first-child{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yt);margin-bottom:12px}
.box-n p:last-child,.box-n ul:last-child{margin-bottom:0}
.box-y{margin:2.2em 0;padding:22px 26px;border-radius:var(--r2);
  background:linear-gradient(140deg,rgba(254,209,29,.16),rgba(254,209,29,.04));
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.30)}
:root[data-theme="light"] .box-y{
  background:linear-gradient(140deg,rgba(254,209,29,.34),rgba(254,209,29,.10));
  box-shadow:inset 0 0 0 1px rgba(180,140,0,.26)}
.box-y>b:first-child{display:block;font-size:15px;margin-bottom:10px;color:var(--w)}
:root[data-theme="light"] .box-y>b:first-child{color:var(--ink)}
.box-y p:last-child,.box-y ul:last-child{margin-bottom:0}

/* 본문 안 이미지 — figure 없이 img 만 있어도 예쁘게 */
.art__b>img{width:100%;height:auto;border-radius:var(--r3);box-shadow:var(--sh-2);margin:2.2em 0}
.art__b figure figcaption{text-align:left;font-family:var(--sans);font-size:13px;
  color:var(--w45);line-height:1.7;padding-left:2px}

/* 두 장 나란히 */
.fig2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:2.2em 0}
.fig2 img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  border-radius:var(--r2);box-shadow:var(--sh-1)}
.fig2+figcaption,.fig2 .cap{grid-column:1/-1;font-size:13px;color:var(--w45);line-height:1.7}
@media(max-width:640px){
  .fig2{grid-template-columns:1fr}
  .art__b ol>li{padding-left:34px}
  .box-n,.box-y{padding:18px 18px}
}

/* 목차 */
.toc{margin:0 0 2.6em;padding:22px 26px;border-radius:var(--r2);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair)}
:root[data-theme="light"] .toc{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair)}
.toc>b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yt);margin-bottom:12px}
.toc ol{counter-reset:t;margin:0;gap:8px}
.toc ol>li{counter-increment:t;padding-left:30px;font-size:.95em}
.toc ol>li::before{content:counter(t,decimal-leading-zero);background:none;color:var(--w45);
  padding:0;font-size:11.5px;top:.25em}
.toc a{color:inherit;text-decoration:none;font-weight:500}
.toc a:hover{color:var(--yt);text-decoration:underline;text-underline-offset:3px}

/* ═══════════════════════════════════════════════════════════════════
   42. 개인정보 수집 안내 · 처리방침
   ─────────────────────────────────────────────────────────────────── */
.pv{margin:6px 0 14px;padding:16px 18px;border-radius:var(--r2);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair)}
.pv__h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.pv__h b{font-size:13.5px;letter-spacing:-.02em}
.pv__h a{margin-left:auto;font-size:12px;color:var(--yt);text-decoration:underline;
  text-underline-offset:3px}
.pv__t{width:100%;border-collapse:collapse;font-size:12.5px;line-height:1.65}
.pv__t th{width:88px;text-align:left;vertical-align:top;padding:6px 12px 6px 0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--w45);font-weight:400;
  white-space:nowrap}
.pv__t td{padding:6px 0;color:var(--w70);vertical-align:top}
.pv__t tr+tr th,.pv__t tr+tr td{border-top:1px solid var(--hair)}
.pv__n{margin-top:10px;font-size:11.5px;color:var(--w45);line-height:1.7}
@media(max-width:560px){
  .pv__t th{display:block;width:auto;padding:8px 0 2px}
  .pv__t td{display:block;padding:0 0 8px}
  .pv__t tr+tr th{border-top:1px solid var(--hair)}
  .pv__t tr+tr td{border-top:0}
  .pv__h a{margin-left:0}
}

.pvw{max-width:72ch;margin-inline:auto;display:flex;flex-direction:column;gap:2px}
.pvs{padding:clamp(20px,2.4vw,28px) 0;border-top:1px solid var(--hair)}
.pvs:first-child{border-top:0}
.pvs h2{font-size:clamp(15px,1.5vw,18px);letter-spacing:-.025em;margin-bottom:10px;
  display:flex;gap:10px;align-items:baseline}
.pvs p{font-size:14.5px;line-height:1.9;color:var(--w70);word-break:keep-all}
.pvs p+p{margin-top:8px}
.pvs a{color:var(--yt);text-decoration:underline;text-underline-offset:3px}
.pvs b{color:var(--w)}

/* ═══════════════════════════════════════════════════════════════════
   43. 자료실 (Toolkit)
   ─────────────────────────────────────────────────────────────────── */
.kitin{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);align-items:start}
.kitin__l h2{font-size:clamp(21px,2.4vw,31px);letter-spacing:-.035em;margin-bottom:16px}
.kitin__l p{font-size:15px;line-height:1.95;color:var(--w70);word-break:keep-all}
.kitin__l p+p{margin-top:12px}
.kitin__l b{color:var(--w)}
.kitin__r{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kitin__i{padding:20px 20px 17px;border-radius:var(--r1);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair)}
.kitin__i b{display:block;font-family:var(--display);font-size:clamp(24px,3vw,34px);
  font-weight:600;letter-spacing:-.04em;line-height:1.1}
.kitin__i span{display:block;margin-top:5px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;color:var(--w45);text-transform:uppercase}

.kts{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
  gap:clamp(12px,1.5vw,18px)}
.kt{position:relative;display:flex;flex-direction:column;
  padding:clamp(20px,2.2vw,26px);border-radius:var(--r3);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);
  transition:box-shadow .3s var(--ez),transform .4s var(--sp2)}
.kt:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--w25),var(--sh-2)}
.kt__h{display:flex;align-items:center;gap:8px;margin-bottom:13px}
.kt__no{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--w45)}
.kt__b{margin-left:auto;padding:3px 9px;border-radius:99px;font-size:10.5px;
  background:rgba(254,209,29,.16);color:var(--yt)}
.kt__t{font-size:clamp(16px,1.7vw,19px);letter-spacing:-.028em;line-height:1.38;
  margin-bottom:9px;word-break:keep-all}
.kt__d{font-size:13.5px;line-height:1.75;color:var(--w45);word-break:keep-all;
  margin-bottom:18px}
.kt__f{margin-top:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--hair)}
.kt__c{font-family:var(--mono);font-size:10.5px;color:var(--w45)}
.kt__p{font-size:13.5px;font-weight:700;letter-spacing:-.02em;color:var(--w)}
.kt__p--free{color:var(--yt)}
.kt__p--soon{font-weight:400;font-size:12px;color:var(--w45)}
.kt__go{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--w45)}
.kt:hover .kt__go{color:var(--yt)}
.banner--free{background:linear-gradient(120deg,rgba(254,209,29,.16),rgba(254,209,29,.05))}

/* 상세 */
.kd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(20px,3vw,42px);align-items:start}
.kd__blk{margin-bottom:clamp(28px,3.4vw,44px)}
.kd__blk .k{margin-bottom:14px}
.kd__ul{display:flex;flex-direction:column;gap:2px}
.kd__ul li{position:relative;padding:13px 0 13px 30px;font-size:14.5px;line-height:1.75;
  color:var(--w70);border-top:1px solid var(--hair);word-break:keep-all;list-style:none}
.kd__ul li:first-child{border-top:0}
.kd__ul li::before{content:"";position:absolute;left:8px;top:22px;width:6px;height:6px;
  border-radius:50%;background:var(--y)}
.kd__ul--w li::before{background:var(--w25)}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
/* 구성 선택. 누르면 오른쪽 값과 버튼이 그 등급으로 바뀝니다. */
.tier{padding:18px 18px 16px;border-radius:var(--r1);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair);
  text-align:left;border:0;font-family:inherit;cursor:pointer;width:100%;
  display:flex;flex-direction:column;gap:0;position:relative;
  transition:box-shadow .22s var(--sp),transform .22s var(--sp),background .22s var(--sp)}
.tier:hover{background:var(--s-2)}
.tier--mid{box-shadow:inset 0 0 0 1.5px rgba(254,209,29,.45)}
.tier.on{box-shadow:inset 0 0 0 2px var(--y);background:var(--s-2);transform:translateY(-2px)}
.tier.on::after{content:"선택함";position:absolute;top:12px;right:12px;
  padding:3px 9px;border-radius:999px;background:var(--y);color:var(--y-ink);
  font-size:10px;font-weight:800;letter-spacing:.02em}
.tier__p{display:block;margin-top:12px;font-size:17px;font-weight:800;
  letter-spacing:-.03em;color:var(--w)}
:root[data-theme="light"] .tier.on{background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--y),var(--sh-2)}
.tier__n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--yt);margin-bottom:8px;text-transform:uppercase}
.tier p{font-size:13px;line-height:1.7;color:var(--w70);word-break:keep-all}
.kd__tn{margin-top:10px;font-size:12px;color:var(--w45)}
.kd__r{position:sticky;top:calc(var(--nav-h) + 18px);display:flex;flex-direction:column;gap:14px}
.kd__buy{padding:22px;border-radius:var(--r2);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair);display:flex;flex-direction:column;gap:13px}
.kd__price{font-size:22px;font-weight:800;letter-spacing:-.03em}
.kd__price .kt__p{font-size:inherit}
.cta--lg{justify-content:center;padding:15px 22px;font-size:15px}
.kd__bn{font-size:11.5px;line-height:1.7;color:var(--w45)}
.kd__spec{width:100%;border-collapse:collapse;font-size:12.5px;
  border-radius:var(--r2);overflow:hidden;background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair)}
.kd__spec th{width:82px;text-align:left;padding:12px 10px 12px 16px;vertical-align:top;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--w45);
  font-weight:400;white-space:nowrap}
.kd__spec td{padding:12px 16px 12px 0;color:var(--w70);line-height:1.6;vertical-align:top}
.kd__spec tr+tr th,.kd__spec tr+tr td{border-top:1px solid var(--hair)}
.kd__ref{padding:18px 20px;border-radius:var(--r2);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair)}
.kd__ref b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--w45);margin-bottom:8px;text-transform:uppercase}
.kd__ref p{font-size:12.5px;line-height:1.75;color:var(--w70)}
.banner--n{background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair)}

@media(max-width:900px){
  .kitin{grid-template-columns:1fr}
  .kd{grid-template-columns:1fr}
  .kd__r{position:static}
}
@media(max-width:520px){.kitin__r{grid-template-columns:1fr 1fr}}
.kts--few{grid-template-columns:repeat(auto-fill,minmax(288px,380px))}

/* ═══════════════════════════════════════════════════════════════════
   44. 함께 일한 기관 (클라이언트 월)
   ─────────────────────────────────────────────────────────────────── */
.cls{display:flex;flex-direction:column;gap:2px}
.clg{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px 24px;
  align-items:start;padding:clamp(18px,2vw,24px) 0;border-top:1px solid var(--hair)}
.clg:first-child{border-top:0}
.clg__k{font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--w45);
  padding-top:9px;text-transform:uppercase}
.clg__w{display:flex;flex-wrap:wrap;gap:8px}
.cln{display:inline-flex;align-items:center;padding:9px 15px;border-radius:var(--rp);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);
  font-size:13.5px;font-weight:500;letter-spacing:-.02em;color:var(--w70);
  white-space:nowrap;transition:color .25s,box-shadow .25s,transform .3s var(--sp2)}
.cln:hover{color:var(--w);box-shadow:inset 0 0 0 1px var(--w25);transform:translateY(-1px)}
.cls__n{margin-top:clamp(18px,2.2vw,26px);font-size:12px;line-height:1.8;color:var(--w45);
  word-break:keep-all}
.sbar__s{margin-top:7px;font-size:13.5px;color:var(--w45);word-break:keep-all}
@media(max-width:720px){
  .clg{grid-template-columns:1fr;gap:9px}
  .clg__k{padding-top:0}
  .cln{font-size:12.5px;padding:8px 13px}
}

/* 라이트 모드에서 '어두운 판' 위에 얹힌 카드 — 흰색으로 칠하면 글자가 사라집니다.
   위에서 흰 배경을 지정한 규칙들을 여기서 되돌립니다. */
:root[data-theme="light"] :is(.hero,.ph--img,.ai,.tile--img,.card__i,.co__i,.sl,.hui,.art__h--img)
 :is(.empty,.form,.card,.tile,.cred__c,.co__st>div,.recs>div,.rows>a,.rows>div,
     .idt__i,.wk,.pgrp,.arc__i,.bg__m1,.ccd,.fs,.cal__m,.pn,.toc,.box-n,.share,.tier),
:root[data-theme="light"] :is(.hero,.ph--img,.ai,.tile--img,.card__i,.co__i,.sl,.hui,.art__h--img)
 .stat>div{
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);
}
:root[data-theme="light"] :is(.hero,.ph--img,.ai,.co__i,.sl,.hui) :is(.pill,.chip,.more,.btn--ghost){
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
}

/* ── 홈 · 자료실 미리보기 ── */
.khs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:clamp(12px,1.5vw,18px)}
.khc{display:flex;flex-direction:column;padding:clamp(22px,2.4vw,30px);
  border-radius:var(--r3);background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);
  transition:box-shadow .3s var(--ez),transform .4s var(--sp2)}
.khc:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--w25),var(--sh-2)}
.khc__n{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--w45);
  margin-bottom:13px}
.khc__t{font-size:clamp(16px,1.8vw,20px);letter-spacing:-.03em;line-height:1.38;
  margin-bottom:9px;word-break:keep-all}
.khc__d{font-size:13.5px;line-height:1.75;color:var(--w45);word-break:keep-all;margin-bottom:20px}
.khc__go{margin-top:auto;font-family:var(--mono);font-size:11.5px;color:var(--yt);
  padding-top:14px;border-top:1px solid var(--hair)}
.khs__n{margin-top:clamp(16px,2vw,24px);font-size:13px;color:var(--w45)}
.khs__n a{color:var(--yt);text-decoration:underline;text-underline-offset:3px}

/* ── 히어로 진행 표시 (점 + 채워지는 막대) ── */
.hui__p i{transition:none}          /* 진행은 자바스크립트가 매 프레임 그립니다 */
.hdots{display:flex;gap:7px;flex:none;align-items:center}
.hdot{width:34px;height:14px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;align-items:center}
.hdot::before{content:"";display:block;height:3px;border-radius:3px;
  background:rgba(255,255,255,.24);transition:background .3s}
/* 점은 「몇 번째인가」만 알려 줍니다. 차오르는 건 왼쪽 노란 줄 하나로 충분합니다. */
.hdot i{display:none}
.hdot:hover::before{background:rgba(255,255,255,.42)}
.hdot.on::before{background:var(--y);height:4px}
@media(max-width:720px){.hdots{display:none}}

/* ── 자료실 · 다른 분류 ── */
.kcxs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.kcx{display:flex;align-items:center;gap:10px;padding:15px 18px;border-radius:var(--r1);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);
  transition:box-shadow .25s,transform .3s var(--sp2)}
.kcx:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--w25),var(--sh-1)}
.kcx span{font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--w)}
.kcx em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--w45)}
.kt--next{background:linear-gradient(150deg,rgba(254,209,29,.13),rgba(254,209,29,.03));
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.30)}
.kt--next .kt__no{color:var(--yt)}
.kt--next:hover{box-shadow:inset 0 0 0 1px rgba(254,209,29,.55),var(--sh-2)}
.kt--next .kt__f{border-top-color:rgba(254,209,29,.24)}

/* ─── 라이트 모드 · 결 만들기 ────────────────────────────────────────
   흰 종이가 회색 바탕 위에 놓이고, 손이 닿으면 한 단 떠오릅니다.
   옐로는 「글자」로는 안 쓰지만 「표식」으로는 그대로 씁니다 — 다크와 같은 결. */
:root[data-theme="light"] :is(.empty,.form,.card,.tile,.cred__c,.stat>div,.co__st>div,
  .recs>div,.rows>a,.rows>div,.idt__i,.wk,.pgrp,.arc__i,.ccd,.fs,.cal__m,.pn,.toc,
  .box-n,.share,.tier,.kt,.bg__w,.bg__m1){
  background:#FFFFFF;
  box-shadow:inset 0 0 0 1px var(--hair), var(--sh-1);
}
:root[data-theme="light"] :is(a.card,a.tile,.rows>a,.kt,.recs>div,.tier){
  transition:box-shadow .32s var(--sp), transform .32s var(--sp);
}
:root[data-theme="light"] :is(a.card:hover,a.tile:hover,.rows>a:hover,.kt:hover,.tier:hover){
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(9,9,11,.14), var(--sh-2);
}
/* 옐로 점 · 표식 — 라이트에서도 옐로 그대로 (글자가 아니라 도형이라 대비 규정 밖입니다) */
:root[data-theme="light"] :is(.k,.tile__k)::before{
  background:var(--y) !important;
  box-shadow:0 0 0 3px rgba(254,209,29,.22) !important;
}
:root[data-theme="light"] .cred__c li::before{background:var(--y)}
/* 구획 번호 — 흐릿해서 안 보이던 걸 옐로로 채웁니다 */
:root[data-theme="light"] .sbar__g{
  color:rgba(254,209,29,.30);-webkit-text-stroke-color:rgba(9,9,11,.66)}

/* ★ 「한 사람이 네 자리를 동시에」 구간은 통째로 잉크 면으로 뒤집습니다.
      흰 면만 이어지면 인쇄물처럼 보입니다. 한 구간이 어두워지면 스크롤에 마디가 생깁니다. */
:root[data-theme="light"] .co{
  position:relative;
  /* .co 는 원래 max-width + margin-inline:auto 로 가운데 섭니다.
     여기서 margin-inline 을 건드리면 왼쪽으로 몰립니다. 가운데는 그대로 두고
     좌우에 숨 쉴 틈만 줍니다. */
  margin-inline:auto;
  max-width:min(calc(100% - 2 * clamp(8px, 2vw, 26px)), var(--max));
  padding-block:clamp(52px,7vw,96px);
  background:#0D0D11;
  border-radius:clamp(22px,3vw,40px);
  box-shadow:0 18px 50px rgba(9,9,11,.20);
  color:#FBFBFD;
  --w:#FBFBFD; --w70:rgba(251,251,253,.78); --w45:rgba(251,251,253,.60);
  --w25:rgba(251,251,253,.47); --yt:#FED11D; --ink:#FED11D;
  --s-1:rgba(255,255,255,.05); --s-2:rgba(255,255,255,.09); --s-3:rgba(255,255,255,.14);
  --hair:rgba(255,255,255,.12); --hair-2:rgba(255,255,255,.08);
  --sh-1:0 2px 8px rgba(0,0,0,.30); --sh-2:0 12px 40px rgba(0,0,0,.45);
}
:root[data-theme="light"] .co :is(h1,h2,h3,h4,b,strong){color:#FBFBFD}
:root[data-theme="light"] .co p{color:rgba(251,251,253,.78)}
:root[data-theme="light"] .co :is(.card,.tile,.co__st>div,.rows>a,.rows>div,.stat>div){
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);
}
:root[data-theme="light"] .co :is(a.card:hover,a.tile:hover,.rows>a:hover){
  transform:translateY(-3px);
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);
}
:root[data-theme="light"] .co :is(.pill,.chip,.more,.btn--ghost){
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  color:rgba(251,251,253,.78);
}
:root[data-theme="light"] .co :is(.pill:hover,.more:hover,.btn--ghost:hover){
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32); color:#FBFBFD}
:root[data-theme="light"] .co .sbar__g{
  color:rgba(255,255,255,.05);-webkit-text-stroke-color:rgba(255,255,255,.50)}
:root[data-theme="light"] .co .k{color:#FED11D}
:root[data-theme="light"] .co :is(.k,.tile__k)::before{
  background:#FED11D !important; box-shadow:0 0 12px rgba(254,209,29,.55) !important}
:root[data-theme="light"] .co .co__i{box-shadow:0 20px 60px rgba(0,0,0,.45)}


/* ─── 자료실 미리보기 갤러리 ───────────────────────────────────────
   사기 전에 안을 볼 수 있어야 합니다. 큰 사진 한 장 + 아래 작은 사진들. */
.shot{border-radius:var(--r2);background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);
 padding:clamp(16px,2vw,26px)}
.shot__h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.shot__c{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--w45)}
.shot__c b{color:var(--w);font-size:13px}
.shot__st{position:relative;border-radius:var(--r1);overflow:hidden;background:var(--bg-2);
 aspect-ratio:16/10;box-shadow:inset 0 0 0 1px var(--hair)}
.shot__b{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
 opacity:0;transition:opacity .35s var(--sp);background:var(--bg-2)}
.shot__b.on{opacity:1}
.shot__a{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
 display:grid;place-items:center;border:0;cursor:pointer;font-size:15px;
 background:rgba(10,10,13,.62);color:#FBFBFD;backdrop-filter:blur(8px)}
.shot__a:hover{background:rgba(10,10,13,.86)}
.shot__a--p{left:12px}.shot__a--n{right:12px}
.shot__ts{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.shot__t{flex:none;width:96px;aspect-ratio:4/3;border-radius:9px;overflow:hidden;border:0;padding:0;
 cursor:pointer;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--hair);opacity:.55;
 transition:opacity .2s,box-shadow .2s}
.shot__t img{width:100%;height:100%;object-fit:cover}
.shot__t:hover{opacity:.85}
.shot__t.on{opacity:1;box-shadow:0 0 0 2px var(--y)}
.shot__n{margin-top:12px;font-size:11.5px;color:var(--w25);line-height:1.7}
@media(max-width:640px){.shot__t{width:72px}.shot__a{width:34px;height:34px}}
:root[data-theme="light"] .shot{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair),var(--sh-1)}
:root[data-theme="light"] .shot__st,
:root[data-theme="light"] .shot__t{background:#F7F7F9}

/* 상단 메뉴가 고정이라, 앵커로 이동하면 제목이 가려집니다. 그만큼 띄워 둡니다. */
[id]{scroll-margin-top:calc(var(--nav-h, 76px) + 26px)}

/* ═══════════════════════════════════════════════════════════════════
   48. 인사이트 강화 — 핵심 요약 · 자주 묻는 질문 · 글쓴이 · 찾기 · 현재 위치
   ─────────────────────────────────────────────────────────────────── */

/* 48-1. 핵심 요약 — 사람도 AI 검색도 여기부터 읽습니다 */
.tldr{margin:0 0 2.4em;padding:22px 26px 20px;border-radius:var(--r2);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);
  border-left:3px solid var(--y)}
:root[data-theme="light"] .tldr{background:#FFFFFF;
  box-shadow:inset 0 0 0 1px var(--hair), var(--sh-1)}
.tldr__k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yt);margin-bottom:12px;font-weight:700}
.tldr ul{margin:0;display:grid;gap:9px}
.tldr ul>li{padding-left:22px;font-size:.97em;line-height:1.72;color:var(--w70)}
.tldr ul>li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;
  border-radius:50%;background:var(--y);padding:0}

/* 48-2. 자주 묻는 질문 */
.faqs{margin:3em 0 2.6em}
.faqs__h{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.faqs__h h2{margin:0;font-size:clamp(19px,2.2vw,24px);letter-spacing:-.02em}
.faqs__h .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--yt)}
.fq{border-radius:var(--r1);background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);
  margin-bottom:9px;overflow:hidden}
:root[data-theme="light"] .fq{background:#FFFFFF;
  box-shadow:inset 0 0 0 1px var(--hair), var(--sh-1)}
.fq>summary{list-style:none;cursor:pointer;padding:17px 48px 17px 20px;position:relative;
  font-weight:600;font-size:.98em;line-height:1.6;color:var(--w);letter-spacing:-.01em}
.fq>summary::-webkit-details-marker{display:none}
.fq>summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:19px;font-weight:400;color:var(--yt);transition:transform .2s ease}
.fq[open]>summary::after{content:"−"}
.fq>summary:hover{color:var(--yt)}
.fq__a{padding:0 20px 18px;border-top:1px solid var(--hair-2)}
.fq__a p{margin:14px 0 0;font-size:.95em;line-height:1.78;color:var(--w70)}

/* 48-3. 글쓴이 상자 */
.abox{display:flex;gap:20px;align-items:flex-start;margin:2.6em 0 0;padding:24px;
  border-radius:var(--r2);background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair)}
:root[data-theme="light"] .abox{background:#FFFFFF;
  box-shadow:inset 0 0 0 1px var(--hair), var(--sh-1)}
.abox__p{flex:0 0 84px;width:84px;height:84px;border-radius:50%;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--hair)}
.abox__p img{width:100%;height:100%;object-fit:cover;display:block}
.abox__c{flex:1;min-width:0}
.abox__c .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--yt)}
.abox__c h3{margin:6px 0 8px;font-size:18px;letter-spacing:-.02em}
.abox__c h3 em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--w45);
  margin-left:6px;letter-spacing:.02em}
.abox__c>p{margin:0;font-size:14.5px;line-height:1.75;color:var(--w70)}
.abox__l{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.abox__l a{padding:6px 12px;border-radius:99px;font-size:12.5px;font-weight:600;
  color:var(--w70);background:var(--tint);text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--hair-2);transition:color .15s ease, background .15s ease}
.abox__l a:hover{color:var(--y-ink);background:var(--y);box-shadow:none}
.abox__n{margin:12px 0 0;font-size:12.5px;line-height:1.7;color:var(--w45)}
@media (max-width:560px){
  .abox{flex-direction:column;gap:14px;padding:20px}
  .abox__p{flex:0 0 64px;width:64px;height:64px}
}

/* 48-4. 글 찾기 상자 */
.tools--srch{justify-content:space-between}
.srch{position:relative;display:flex;align-items:center;min-width:min(100%,300px);flex:0 1 340px}
.srch__i{position:absolute;left:14px;width:16px;height:16px;color:var(--w45);pointer-events:none}
.srch input{width:100%;padding:11px 78px 11px 38px;border-radius:99px;border:0;
  background:var(--s-1);color:var(--w);font:inherit;font-size:13.5px;
  box-shadow:inset 0 0 0 1px var(--hair);outline:none;
  transition:box-shadow .15s ease, background .15s ease}
:root[data-theme="light"] .srch input{background:#FFFFFF}
.srch input::placeholder{color:var(--w45)}
.srch input:focus{box-shadow:inset 0 0 0 2px var(--y)}
.srch input::-webkit-search-cancel-button{display:none}
.srch__x{position:absolute;right:10px;width:22px;height:22px;border:0;border-radius:50%;
  background:var(--tint);color:var(--w45);font-size:14px;line-height:1;cursor:pointer;
  display:grid;place-items:center}
.srch__x:hover{color:var(--w);background:var(--s-2)}
.srch__n{position:absolute;right:40px;font-family:var(--mono);font-size:11px;color:var(--w45);
  pointer-events:none}
.fl button em{font-style:normal;font-family:var(--mono);font-size:10.5px;opacity:.62;
  margin-left:4px}
@media (max-width:640px){
  .srch{flex:1 1 100%}
}

/* 48-5. 현재 위치 */
.crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-block:clamp(14px,1.8vw,22px);font-size:12.5px;color:var(--w45)}
.crumb a{color:var(--w45);text-decoration:none}
.crumb a:hover{color:var(--yt);text-decoration:underline;text-underline-offset:3px}
.crumb i{font-style:normal;opacity:.5}
.crumb b{color:var(--w70);font-weight:600}

/* 48-6. 머리말 분류를 누르면 그 분류 글 모음으로 */
a.k--l{text-decoration:none;transition:color .15s ease}
a.k--l:hover{color:var(--y);text-decoration:underline;text-underline-offset:4px}
.srch__z{margin:26px 0 0;text-align:center;font-size:14px;color:var(--w45)}
.ctas{display:flex;gap:9px;flex-wrap:wrap}

/* 코드 블록 안의 글자는 검은 바탕 위에 있으므로 라이트 모드에서도 밝게 둡니다 */
:root[data-theme="light"] .art__b pre code{background:none;padding:0;color:inherit}
/* 차례 링크는 본문 링크처럼 노랗게 밑줄 치지 않습니다 */
.art__b .toc a:not(.cta):not(.btn){color:var(--w);font-weight:500;text-decoration:none}
.art__b .toc a:not(.cta):not(.btn):hover{color:var(--yt);text-decoration:underline;text-underline-offset:3px}
/* 라이트 모드에서 「연결됨」 배지가 너무 옅게 보이던 것 */
:root[data-theme="light"] .cs--on{background:rgba(21,128,61,.10);color:#166534;
  box-shadow:inset 0 0 0 1px rgba(21,128,61,.28)}
/* ═══════════════════════════════════════════════════════════════════
   49. 휴대폰에서 손가락으로 누를 수 있는 크기 맞추기
   손가락 끝은 대략 9mm 입니다. 세로 40px 아래로는 잘 안 눌립니다.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  /* 아래 링크 묶음 */
  .ft ul{gap:2px}
  .ft ul a{display:flex;align-items:center;min-height:42px;padding:2px 0;font-size:15px}
  .ft__l{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .ft__l a{min-height:40px;display:inline-flex;align-items:center;padding:0 15px;font-size:13.5px}

  /* 맨 위 로고 */
  .hd__in .lg{min-height:42px}

  /* 달력 날짜 칸 */
  .cal__d button.cd{min-height:42px}

  /* 사례 카드 아래 링크 · 글 머리말 분류 */
  .case__x a{min-height:42px;display:inline-flex;align-items:center}
  .art__hi a.k{min-height:42px;display:inline-flex;align-items:center;padding-right:4px}

  /* 쪽 번호 · 분류 칩 · 원장 필터 · 링크 묶음 · 사진 넘김 단추 */
  .pager .pgb{min-width:42px;min-height:42px}
  .chips .chip{min-height:44px;display:flex;align-items:center}
  .ldg__chips .ldgc{min-height:42px}
  .links a{min-height:42px;display:inline-flex;align-items:center}
  .shot__st .shot__a{width:42px;height:42px}
}
/* 보도 아카이브 줄 (누르면 원문으로) */
.row--l{text-decoration:none;transition:background .25s var(--ez), transform .3s var(--sp)}
.row--l:hover{background:var(--s-2);transform:translateX(3px)}
.row--l .s{color:var(--yt);white-space:nowrap}
:root[data-theme="light"] .row--l:hover{background:var(--tint)}

/* ═══════════════════════════════════════════════════════════════════
   50. 언론 보도 — 대표 보도 카드 · 같이 이름이 오른 곳
   ─────────────────────────────────────────────────────────────────── */
.pcds{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.pcd{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--r3);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);text-decoration:none;
  transition:transform .45s var(--sp), box-shadow .45s var(--ez), background .3s}
:root[data-theme="light"] .pcd{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair), var(--sh-1)}
.pcd:hover{transform:translateY(-4px);background:var(--s-2);
  box-shadow:inset 0 0 0 1px rgba(254,209,29,.30), var(--sh-2)}
.pcd__k{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--yt)}
.pcd__k i{font-style:normal;color:var(--w45);letter-spacing:.06em}
.pcd h3{margin:0;font-size:16px;line-height:1.55;letter-spacing:-.025em;color:var(--w)}
.pcd__q{margin:2px 0 0;padding:12px 14px;border-left:2px solid var(--y);border-radius:0 8px 8px 0;
  background:var(--tint);font-size:13.5px;line-height:1.75;color:var(--w70)}
.pcd__p{display:flex;flex-wrap:wrap;gap:5px}
.pcd__p span{padding:4px 9px;border-radius:99px;font-size:11px;font-weight:600;color:var(--w70);
  background:var(--tint);box-shadow:inset 0 0 0 1px var(--hair-2)}
.pcd__a{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;color:var(--w45)}
.pcd:hover .pcd__a{color:var(--yt)}

.pws{display:grid;gap:20px}
.pwg>b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yt);margin-bottom:12px}
.pwl{display:flex;flex-wrap:wrap;gap:7px}
.pw1{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:99px;
  font-size:13.5px;font-weight:600;color:var(--w);background:var(--s-1);
  box-shadow:inset 0 0 0 1px var(--hair)}
:root[data-theme="light"] .pw1{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair), var(--sh-1)}
.pw1 em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--w45)}
.row--l .pw{display:block;margin-top:3px;font-style:normal;font-size:11.5px;color:var(--yt);opacity:.85}
/* 기사에 실린 말 */
.pqs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.pq{display:flex;flex-direction:column;gap:12px;padding:24px 26px;border-radius:var(--r3);
  background:var(--s-1);box-shadow:inset 0 0 0 1px var(--hair);text-decoration:none;
  transition:transform .45s var(--sp), box-shadow .45s var(--ez)}
:root[data-theme="light"] .pq{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair), var(--sh-1)}
.pq:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(254,209,29,.30), var(--sh-2)}
.pq blockquote{margin:0;padding:0;border:0;background:none;position:relative;
  font-size:15.5px;line-height:1.8;letter-spacing:-.02em;color:var(--w);font-weight:500}
.pq blockquote::before{content:"“";display:block;font-size:34px;line-height:.6;color:var(--y);
  margin-bottom:10px;font-family:Georgia,serif}
.pq cite{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--w45);margin-top:auto}
.pq:hover cite{color:var(--yt)}
.ldg__cnt{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--yt);
  white-space:nowrap;padding-left:2px}
@media (max-width:720px){.ldg__cnt{width:100%;padding-top:2px}}

/* 휴대폰에서 남아 있던 작은 조작 · 작은 글자 */
@media (max-width:720px){
  .ct__reset{min-height:40px;padding-inline:16px}
  input[type="checkbox"], input[type="radio"]{width:20px;height:20px}
  /* 자료 상세의 규격 라벨 (제공 형식 · 분량 · 갱신 · 사용 범위 · 환불) */
  .kd__ref b, .kd__ref p b, .wk__m span i, .ft__w i{font-size:11.5px}
  .co__st>div>span, .arc__k, .idt__k, .pgrp__h span, .kitin__i span,
  .cal__w span, .bg__syms>div>span, .ct__meta>div>span, .ai__k, .wk__t{font-size:11px}
  tbody>tr>th{font-size:11px}
  .ldg__b{font-size:10.5px}
}
@media (max-width:720px){
  .kd__spec th{font-size:11.5px;width:74px}
  .kd__spec{font-size:13px}
}

/* ═══════════════════════════════════════════════════════════════════
   51. 모바일 메뉴 — 자바스크립트 없이도 열립니다
   미리보기 뷰어처럼 클릭 이벤트가 막히는 곳에서도 동작해야 합니다.
   ─────────────────────────────────────────────────────────────────── */
.navtog{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
  clip:rect(0 0 0 0);overflow:hidden}
.bgr{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  user-select:none;-webkit-user-select:none}

/* 열린 상태 — body.op(자바스크립트) 와 :checked(순수 CSS) 둘 다 받습니다 */
.navtog:checked ~ .sheet{opacity:1;visibility:visible}
.navtog:checked ~ .sheet a{transform:none;opacity:1}
.navtog:checked ~ .sheet a:nth-child(1){transition-delay:.05s}
.navtog:checked ~ .sheet a:nth-child(2){transition-delay:.10s}
.navtog:checked ~ .sheet a:nth-child(3){transition-delay:.15s}
.navtog:checked ~ .sheet a:nth-child(4){transition-delay:.20s}
.navtog:checked ~ .sheet a:nth-child(5){transition-delay:.25s}
.navtog:checked ~ .hd .bgr i:first-child{transform:translateY(3.3px) rotate(45deg)}
.navtog:checked ~ .hd .bgr i:last-child{transform:translateY(-3.3px) rotate(-45deg)}

/* 시트 안 아코디언도 라디오로 — 자바스크립트 없이 한 묶음만 열립니다 */
.shg{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
  clip:rect(0 0 0 0);overflow:hidden}
.sh__b{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none}
/* 라디오가 켜진 묶음도 열린 것으로 봅니다 */
.shg:checked + .sh__g .sh__b i{background:var(--y)}
.shg:checked + .sh__g .sh__b i::before,
.shg:checked + .sh__g .sh__b i::after{background:var(--y-ink)}
.shg:checked + .sh__g .sh__b i::after{transform:translate(-50%,-50%) rotate(0)}
.shg:checked + .sh__g .sh__l{grid-template-rows:1fr}
/* 메뉴 안 닫기 단추 */
.sh__x{position:absolute;top:calc(var(--nav-h, 76px) + 10px);right:20px;z-index:2;
  width:42px;height:42px;border-radius:50%;display:none;place-items:center;cursor:pointer;
  background:var(--s-2);color:var(--w);font-size:16px;line-height:1;
  box-shadow:inset 0 0 0 1px var(--hair);touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.sh__x:hover{background:var(--s-3);color:var(--yt)}
@media (max-width:900px){ .navtog:checked ~ .sheet .sh__x{display:grid} }