/* ═══════════════════════════════════════════════════════════
   지식 아카이브 · KNOWLEDGE ARCHIVE — Design System
   Technical Minimalism / Glassmorphism / Neon Cyan
   ═══════════════════════════════════════════════════════════ */

/* ───────── 1. Tokens ───────── */
:root{
  --cyan:#00F0FF;
  --cyan-d:#00B8C4;
  --lime:#B6FF3C;
  --violet:#8E7BFF;
  --red:#FF7A6B;
  --amber:#F2C94C;
  --blue:#5B9BFF;

  --bg:#121212;
  --bg-2:#171718;
  --bg-3:#1D1E20;
  --sheet:#222428;              /* 프로젝트 페이지(종이) 배경 */
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.18);

  --txt:#EDEEF0;
  --txt-2:#B3B7BD;
  --muted:#868C95;

  --glow:0 0 24px rgba(0,240,255,.35);
  --glow-s:0 0 12px rgba(0,240,255,.28);
  --shadow:0 18px 50px rgba(0,0,0,.55);

  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:28px;
  --gnb-h:74px;
  --fs:1;                     /* 설정에서 조절되는 글자 배율 */
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

:root[data-theme="light"]{
  --bg:#F4F6F8; --bg-2:#FFFFFF; --bg-3:#EDF1F5; --sheet:#FFFFFF;
  --panel:rgba(10,20,30,.035); --panel-2:rgba(10,20,30,.06);
  --line:rgba(10,20,30,.10); --line-strong:rgba(10,20,30,.20);
  --txt:#14181D; --txt-2:#454C55; --muted:#6C757D;
  --cyan:#0093A6; --cyan-d:#00707E;
  --glow:0 0 22px rgba(0,147,166,.22); --glow-s:0 0 10px rgba(0,147,166,.2);
  --shadow:0 16px 40px rgba(20,40,60,.14);
}

:root[data-font="system"]{ --font:system-ui,-apple-system,'Segoe UI','Malgun Gothic',sans-serif; }
:root[data-font="serif"] { --font:'Nanum Myeongjo',Batang,'Times New Roman',serif; }
:root[data-font="mono"]  { --font:'D2Coding','Cascadia Mono',Consolas,'Courier New',monospace; }
:root[data-font="round"] { --font:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo',sans-serif; letter-spacing:-.01em; }

/* 애니메이션 끄기 */
:root[data-motion="off"] *{ animation:none!important; transition:none!important; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition-duration:.01ms!important; } }

/* ───────── 2. Reset ───────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--font); font-size:calc(16px * var(--fs));
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{ /* 미세 테크 그리드 */
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 20%,transparent 78%);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; line-height:1.25; letter-spacing:-.02em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--cyan); color:#04181B; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; border-radius:6px; }

.wrap{ width:min(1280px,92vw); margin-inline:auto; position:relative; z-index:1; }
/* hidden 속성은 어떤 클래스의 display 보다 우선해야 한다
   (예: .field{display:grid} 가 [hidden] 을 덮어써 칸이 그대로 보이던 문제) */
[hidden]{ display:none !important; }
.c-cyan{ color:var(--cyan); }
.muted{ color:var(--muted); }
.center{ text-align:center; }

/* 스크롤바 */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--cyan-d); }

/* ───────── 3. GNB ───────── */
#gnb{
  position:fixed; inset:0 0 auto 0; z-index:120; height:var(--gnb-h);
  display:flex; align-items:center;
  transition:background .3s,backdrop-filter .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
#gnb.stuck{
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.gnb-inner{ width:min(1280px,94vw); margin-inline:auto; display:flex; align-items:center; gap:20px; }
.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand-mark{
  width:42px; height:42px; display:grid; place-items:center; color:var(--cyan);
  border-radius:13px; background:var(--panel); border:1px solid var(--line);
  box-shadow:var(--glow-s); transition:transform .35s var(--spring);
}
.brand:hover .brand-mark{ transform:scale(1.08) rotate(-6deg); }
.brand-txt{ display:flex; flex-direction:column; line-height:1.12; }
.brand-txt b{ font-size:1.06rem; font-weight:800; letter-spacing:-.02em; }
.brand-txt i{ font-style:normal; font-size:.62rem; letter-spacing:.22em; color:var(--muted); font-weight:600; }

.gnb-nav{
  display:flex; align-items:center; gap:4px; padding:6px;
  background:var(--panel); border:1px solid var(--line); border-radius:99px;
  backdrop-filter:blur(10px);
}
.gnb-nav a{
  padding:9px 18px; border-radius:99px; font-size:.92rem; font-weight:600; color:var(--txt-2);
  transition:.22s var(--ease); white-space:nowrap;
}
.gnb-nav a:hover{ color:var(--txt); background:var(--panel-2); }
.gnb-nav a.active{ color:#05191C; background:var(--cyan); box-shadow:var(--glow-s); }
:root[data-theme="light"] .gnb-nav a.active{ color:#fff; }
.gnb-nav a.nav-login{
  border:1px solid color-mix(in srgb,var(--cyan) 55%,transparent); color:var(--cyan);
}
.gnb-nav a.nav-login.logged{ border-color:var(--lime); color:var(--lime); }
.gnb-burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); }
.gnb-burger span{ display:block; width:18px; height:2px; margin:3px auto; background:var(--txt); border-radius:2px; transition:.25s; }

#main{ position:relative; z-index:1; }

/* ───────── 4. Reveal (스프링 스크롤) ───────── */
.reveal{ opacity:0; will-change:transform,opacity; }
.reveal[data-reveal="up"]{ transform:translateY(46px); }
.reveal[data-reveal="right"]{ transform:translateX(-52px); }
.reveal[data-reveal="left"]{ transform:translateX(52px); }
.reveal[data-reveal="pop"]{ transform:scale(.86); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .55s ease,transform .82s var(--spring);
}

/* ───────── 5. 버튼 ───────── */
.btn-cta{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:17px 34px; border-radius:99px; font-weight:800; font-size:1.02rem; letter-spacing:-.01em;
  color:#04181B; background:linear-gradient(135deg,var(--cyan),#57FFE0);
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 10px 34px rgba(0,240,255,.32);
  transition:transform .35s var(--spring),box-shadow .35s var(--ease),filter .3s;
  position:relative; overflow:hidden;
}
:root[data-theme="light"] .btn-cta{ color:#fff; }
.btn-cta::after{
  content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 50%,rgba(255,255,255,.6),transparent 60%);
  opacity:0; transition:opacity .35s;
}
.btn-cta:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 0 44px rgba(0,240,255,.6); }
.btn-cta:hover::after{ opacity:.35; }
.btn-cta:active{ transform:translateY(0) scale(.99); }
.btn-cta.sm{ padding:13px 24px; font-size:.94rem; }

.btn-ghost{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:99px;
  border:1px solid var(--line-strong); color:var(--txt); font-weight:600; font-size:.92rem;
  background:var(--panel); transition:.25s var(--ease);
}
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); box-shadow:var(--glow-s); transform:translateY(-2px); }

.btn-sm{
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel); font-size:.85rem; font-weight:600;
  transition:.2s;
}
.btn-sm:hover{ background:var(--panel-2); border-color:var(--line-strong); }
.btn-sm.primary{ background:var(--cyan); color:#04181B; border-color:transparent; }
:root[data-theme="light"] .btn-sm.primary{ color:#fff; }
.btn-sm.danger{ color:var(--red); border-color:color-mix(in srgb,var(--red) 40%,transparent); }
.btn-sm.on{ background:var(--cyan); color:#04181B; border-color:transparent; box-shadow:var(--glow-s); }
:root[data-theme="light"] .btn-sm.on{ color:#fff; }

.glass{
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:var(--r-l);
  backdrop-filter:blur(14px); box-shadow:var(--shadow);
}

/* ───────── 6. 섹션 공통 ───────── */
.sec{ position:relative; padding:110px 0; }
.sec-hero{ padding-top:calc(var(--gnb-h) + 26px); padding-bottom:40px; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.h2{ font-size:clamp(1.9rem,3.6vw,3rem); font-weight:850; }
.h2 em{ font-style:normal; color:var(--cyan); text-shadow:var(--glow-s); }
.eyebrow{ display:inline-block; font-size:.72rem; letter-spacing:.28em; color:var(--cyan); font-weight:700; margin-bottom:14px; }
.lead{ color:var(--txt-2); font-size:1.02rem; margin-top:20px; }

.orb{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; }
.orb-a{ width:520px; height:520px; background:rgba(0,240,255,.13); top:-120px; left:-100px; }
.orb-b{ width:460px; height:460px; background:rgba(142,123,255,.11); bottom:-140px; right:-90px; }
.grid-floor{
  position:absolute; left:50%; bottom:-4%; width:170%; height:52%; transform:translateX(-50%) perspective(560px) rotateX(70deg);
  background:
    repeating-linear-gradient(90deg,transparent 0 62px,rgba(0,240,255,.16) 62px 63px),
    repeating-linear-gradient(0deg,transparent 0 62px,rgba(0,240,255,.13) 62px 63px);
  mask-image:linear-gradient(to top,#000,transparent 72%); pointer-events:none;
}

/* ───────── 7. HERO ───────── */
.hero-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero-title{ font-size:clamp(2.1rem,5.4vw,4.15rem); font-weight:900; letter-spacing:-.035em; }
.hero-title em{ font-style:normal; color:var(--cyan); text-shadow:0 0 30px rgba(0,240,255,.55); }
.hero-sub{ margin-top:16px; color:var(--txt-2); font-size:clamp(.95rem,1.5vw,1.12rem); }

.hero-stage{ position:relative; width:min(940px,96vw); margin:8px auto -6px; }
.hero-svg{ width:100%; height:auto; display:block; }
.pulse-core{ transform-origin:450px 185px; animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(.92); opacity:.8 } 50%{ transform:scale(1.18); opacity:1 } }
.wave-set path{ animation:wv 2.6s ease-in-out infinite; transform-origin:450px 185px; }
.wave-set path:nth-child(2){ animation-delay:.22s } .wave-set path:nth-child(3){ animation-delay:.44s }
@keyframes wv{ 0%,100%{ opacity:.25 } 45%{ opacity:1 } }

.folder-float{
  position:absolute; width:120px; height:86px; border-radius:12px;
  display:grid; place-items:center; font-weight:800; font-size:1.28rem; color:#08282C;
  box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.22) inset;
  animation:float 6s ease-in-out infinite; z-index:2;
}
.folder-float::before{ content:''; position:absolute; top:-9px; left:10px; width:44px; height:12px; border-radius:6px 6px 0 0; background:inherit; filter:brightness(.9); }
.f-2024a{ left:2%;  top:20%; background:linear-gradient(150deg,#C8F86B,#8FD53B); animation-delay:.2s; }
.f-2024b{ left:-1%; top:52%; background:linear-gradient(150deg,#7FB6F0,#4E7FD0); color:#F0F8FF; animation-delay:1.1s; }
.f-2025{ right:2%; top:16%; background:linear-gradient(150deg,#9FC5FF,#5D82E8); color:#F0F8FF; animation-delay:.6s; }
.f-2026{ right:-1%; top:50%; background:linear-gradient(150deg,#D8FF7A,#9FE04A); animation-delay:1.5s; }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(-2deg) } 50%{ transform:translateY(-18px) rotate(2deg) } }

.scroll-hint{
  margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--muted); font-size:.84rem; letter-spacing:.05em;
}
.scroll-hint svg{ animation:bob 1.9s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.55 } 50%{ transform:translateY(7px); opacity:1 } }

/* ───────── 8. Feature cards ───────── */
.sec-feat{ padding-top:20px; }
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card-feat{ padding:26px 24px 24px; transition:transform .4s var(--spring),border-color .3s,box-shadow .3s; }
.card-feat:hover{ transform:translateY(-8px); border-color:color-mix(in srgb,var(--cyan) 45%,transparent); box-shadow:0 22px 60px rgba(0,240,255,.14); }
.feat-top{ display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.feat-ico{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:1rem; }
.ico-cyan{ background:rgba(0,240,255,.15); box-shadow:0 0 0 1px rgba(0,240,255,.35) inset; }
.ico-lime{ background:rgba(182,255,60,.14); box-shadow:0 0 0 1px rgba(182,255,60,.3) inset; }
.ico-violet{ background:rgba(142,123,255,.16); box-shadow:0 0 0 1px rgba(142,123,255,.35) inset; }
.feat-no{ font-size:.74rem; letter-spacing:.16em; color:var(--muted); font-weight:700; }
.card-feat h3{ font-size:1.24rem; font-weight:800; }
.card-feat p{ margin-top:12px; color:var(--txt-2); font-size:.9rem; }
.feat-mini{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.mini-folders i{ width:42px; height:30px; border-radius:6px; background:var(--c); opacity:.85; }
.mini-pairs span{ font-size:.76rem; padding:5px 9px; border-radius:7px; background:var(--panel-2); }
.mini-pairs em{ font-style:normal; color:var(--cyan); }
.mini-windows i{ width:52px; height:36px; border-radius:6px; border:1px solid var(--line-strong); background:var(--panel-2); }

/* ───────── 9. 2-column 섹션 ───────── */
.two-col{ display:grid; grid-template-columns:1.02fr 1.15fr; gap:56px; align-items:center; }
.tick-list{ margin-top:22px; display:grid; gap:10px; }
.tick-list li{ position:relative; padding-left:26px; color:var(--txt-2); font-size:.94rem; }
.tick-list li::before{
  content:''; position:absolute; left:0; top:.55em; width:12px; height:6px;
  border-left:2px solid var(--cyan); border-bottom:2px solid var(--cyan); transform:rotate(-45deg);
}
.btn-row{ margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; }

/* 아이소메트릭 스테이지 */
.iso-stage{ position:relative; height:440px; perspective:1000px; }
.iso-plate{
  position:absolute; left:6%; top:46%; width:60%; height:180px; border-radius:16px;
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  border:1px solid var(--line); transform:rotateX(62deg) rotateZ(-42deg); box-shadow:var(--shadow);
}
.iso-folder{
  position:absolute; width:118px; height:92px; border-radius:12px; display:grid; place-items:center;
  font-weight:900; font-size:1.3rem; color:#062226; transform:rotateX(18deg) rotateZ(-12deg);
  box-shadow:0 18px 38px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.24) inset;
  animation:float 7s ease-in-out infinite;
}
.iso-folder::before{ content:''; position:absolute; top:-9px; left:10px; width:42px; height:12px; border-radius:6px 6px 0 0; background:inherit; filter:brightness(.92); }
.if-1{ left:8%;  top:34%; background:linear-gradient(150deg,#5CF2D6,#22C9AE); }
.if-2{ left:22%; top:44%; background:linear-gradient(150deg,#D9FF7A,#A5E24A); animation-delay:.4s; }
.if-3{ left:36%; top:22%; background:linear-gradient(150deg,#9DDCFF,#4FA9E8); animation-delay:.8s; }
.if-4{ left:50%; top:12%; background:linear-gradient(150deg,#A9B6FF,#6E7BE8); color:#F2F5FF; animation-delay:1.2s; }
.iso-chip{
  position:absolute; right:16%; top:28%; padding:9px 18px; border-radius:99px; font-weight:700; font-size:.88rem;
  border:1px solid var(--cyan); color:var(--cyan); background:color-mix(in srgb,var(--cyan) 12%,transparent);
  box-shadow:var(--glow-s);
}
.iso-panel{
  position:absolute; right:0; top:44%; width:56%; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:var(--bg-3); box-shadow:var(--shadow);
  transform:rotateY(-16deg) rotateX(6deg);
}
.ip-head{ display:flex; align-items:center; gap:6px; padding:9px 12px; background:var(--panel-2); border-bottom:1px solid var(--line); }
.ip-head i{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); }
.ip-head span{ margin-left:8px; font-size:.72rem; color:var(--muted); }
.ip-body{ padding:12px; }
.ip-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.ip-thumbs i{ height:38px; border-radius:6px; background:linear-gradient(135deg,var(--panel-2),transparent); border:1px solid var(--line); }
.ip-lines{ margin-top:10px; display:grid; gap:6px; }
.ip-lines i{ height:6px; border-radius:99px; background:var(--line-strong); }
.iso-small{
  position:absolute; bottom:2%; padding:10px 14px; border-radius:12px; font-size:.74rem;
  background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(8px);
}
.is-1{ left:4%; } .is-2{ left:34%; }

/* 지구본 / 큐브 */
.panel-wide{ padding:56px 48px; }
.globe-stage{ position:relative; height:400px; display:grid; place-items:center; }
.globe{
  position:absolute; left:8%; top:16%; width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(0,240,255,.22),transparent 62%);
  border:1px solid color-mix(in srgb,var(--cyan) 35%,transparent); box-shadow:0 0 60px rgba(0,240,255,.2) inset;
  animation:spin 26s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.g-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid color-mix(in srgb,var(--cyan) 28%,transparent); }
.r1{ transform:rotateY(66deg) } .r2{ transform:rotateY(0) scaleX(.42) } .r3{ transform:rotateX(70deg) scaleY(.3) }
.g-dot{ position:absolute; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:var(--glow-s); }
.d1{ left:22%; top:30% } .d2{ left:66%; top:22% } .d3{ left:38%; top:70% } .d4{ left:74%; top:60% }

.cube{ position:absolute; right:14%; top:30%; width:150px; height:150px; transform-style:preserve-3d; animation:float 7s ease-in-out infinite; }
.cube-face{ position:absolute; display:grid; place-items:center; font-weight:800; letter-spacing:-.02em; }
.cf-left{
  width:150px; height:150px; border-radius:14px; font-size:1.24rem; color:var(--cyan);
  background:linear-gradient(150deg,rgba(0,240,255,.2),rgba(0,240,255,.05));
  border:1px solid color-mix(in srgb,var(--cyan) 55%,transparent); box-shadow:0 0 44px rgba(0,240,255,.3);
}
.cf-right{ right:-30px; top:34px; width:64px; height:64px; border-radius:12px; font-size:1.5rem;
  background:rgba(242,201,76,.16); border:1px solid rgba(242,201,76,.5); }
.cf-top{ left:8px; top:-14px; width:134px; height:26px; border-radius:10px; background:var(--panel-2); border:1px solid var(--line); }
.hexi{
  position:absolute; width:56px; height:56px; display:grid; place-items:center; font-size:1.1rem;
  border-radius:16px; background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(6px);
  animation:float 6s ease-in-out infinite;
}
.hx-1{ left:2%;  top:8%;  color:var(--lime); animation-delay:.2s }
.hx-2{ left:0;   top:52%; color:var(--violet); animation-delay:.9s }
.hx-3{ left:16%; top:82%; color:var(--cyan); animation-delay:1.4s }
.hx-4{ right:2%; top:6%;  color:var(--amber); animation-delay:.5s }
.glabel{ position:absolute; font-size:.78rem; color:var(--cyan); line-height:1.4; }
.gl-1{ right:0; top:12% } .gl-2{ right:0; bottom:6%; color:var(--txt-2); text-align:right }

.maker{ display:flex; gap:14px; align-items:center; margin:26px 0 22px; padding:16px; border-radius:var(--r-m); background:var(--panel); border:1px solid var(--line); }
.maker-avatar{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-weight:900; font-size:1.2rem;
  background:linear-gradient(135deg,var(--cyan),var(--violet)); color:#06181B; flex:none;
}
.maker b{ display:block; font-size:.98rem } .maker span{ font-size:.82rem; color:var(--muted) }

/* ───────── 10. Tips ───────── */
.tips-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:44px; }
.tip-panel{ padding:26px; }
.win-head{ display:flex; gap:7px; margin-bottom:16px; }
.win-head i{ width:11px; height:11px; border-radius:50%; }
.win-head i:nth-child(1){ background:#FF5F57 } .win-head i:nth-child(2){ background:#FEBC2E } .win-head i:nth-child(3){ background:#28C840 }
.tip-panel h3{ font-size:1.32rem; font-weight:850 }
.tip-panel h3 em{ font-style:normal; color:var(--cyan) }
.tip-panel .muted{ margin-top:8px; font-size:.88rem }
.sub-h{ margin-top:22px; font-size:1.02rem; color:var(--cyan); font-weight:800 }
.foot-note{ margin-top:16px; font-size:.82rem; color:var(--muted) }

.mock{ position:relative; margin-top:18px; border-radius:var(--r-m); border:1px solid var(--line); background:var(--bg-3); padding:14px; overflow:hidden; }
.mock-search{ display:grid; grid-template-columns:150px 1fr; gap:14px; }
.mock-side{ display:grid; gap:8px; align-content:start; font-size:.78rem; color:var(--muted) }
.mock-side b{ font-weight:600; padding:7px 10px; border-radius:8px }
.mock-side b.on{ background:var(--panel-2); color:var(--txt) }
.mock-searchbar{ padding:11px 14px; border-radius:10px; border:1px solid var(--cyan); color:var(--txt-2); font-size:.84rem; box-shadow:var(--glow-s) }
.chips{ display:flex; gap:7px; margin-top:10px; flex-wrap:wrap }
.chips span{ padding:5px 12px; border-radius:99px; font-size:.76rem; background:var(--panel-2); border:1px solid var(--line) }
.chips .chip-on{ background:color-mix(in srgb,var(--cyan) 18%,transparent); border-color:var(--cyan); color:var(--cyan) }
.mock-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px }
.mock-cards i{ height:56px; border-radius:8px; background:linear-gradient(135deg,var(--panel-2),transparent); border:1px solid var(--line) }
.tag-bubble{ position:absolute; right:12px; top:10px; padding:5px 12px; border-radius:99px; font-size:.7rem; color:var(--cyan); border:1px solid var(--cyan); background:var(--bg-3) }
.tag-bubble.tb2{ top:auto; bottom:14px }
.team-row{ display:flex; align-items:center; gap:-6px; font-size:.82rem; color:var(--muted) }
.ava{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:.74rem; font-weight:700; color:#06181B; margin-right:-8px; border:2px solid var(--bg-3) }
.a1{ background:#7FE5C9 } .a2{ background:#9DBCFF } .a3{ background:#FFC98A } .a4{ background:var(--panel-2); color:var(--txt) }
.team-row b{ margin-left:18px; font-weight:600 }
.chat-pop{ margin-top:12px; padding:12px; border-radius:10px; background:var(--panel); border:1px solid var(--line); display:grid; gap:6px; font-size:.78rem; color:var(--muted) }
.chat-pop b{ color:var(--txt); font-size:.82rem }
.shields{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; text-align:center; font-size:.72rem; color:var(--txt-2) }
.shields span{ display:block; font-size:1.5rem; margin-bottom:6px }

.final-cta{ margin-top:56px; text-align:center; display:grid; gap:18px; justify-items:center }
.final-cta p{ color:var(--txt-2) }

/* ───────── 11. Footer ───────── */
.site-footer{ border-top:1px solid var(--line); padding:40px 0; margin-top:60px; position:relative; z-index:1 }
.foot-inner{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; font-size:.85rem; color:var(--muted) }
.foot-inner b{ display:block; color:var(--txt) }
.foot-inner nav{ display:flex; gap:18px }
.foot-inner nav a:hover{ color:var(--cyan) }

/* ═══════════════ 12. 서브 페이지 공통 ═══════════════ */
.page{ padding:calc(var(--gnb-h) + 46px) 0 90px }
.page-head{ margin-bottom:34px }
.page-head h1{ font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:900 }
.page-head p{ color:var(--muted); margin-top:10px }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--muted); margin-bottom:18px; flex-wrap:wrap }
.breadcrumb a:hover{ color:var(--cyan) }
.breadcrumb span{ opacity:.5 }
.breadcrumb b{ color:var(--txt); font-weight:600 }

.stack{ display:grid; gap:22px }
.card{ padding:26px; border-radius:var(--r-l); background:var(--panel); border:1px solid var(--line) }
.card h3{ font-size:1.16rem; margin-bottom:10px }
.card p{ color:var(--txt-2); font-size:.94rem }

.use-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:18px }
.use-grid>div{ padding:16px; border-radius:var(--r-m); background:var(--bg-3); border:1px solid var(--line) }
.use-grid b{ display:block; color:var(--cyan); font-size:.92rem; margin-bottom:7px }
.use-grid span{ font-size:.85rem; color:var(--txt-2); line-height:1.55 }

/* 폼 */
.field{ display:grid; gap:7px; margin-bottom:16px }
.field label{ font-size:.85rem; font-weight:600; color:var(--txt-2) }
.field .hint{ font-size:.76rem; color:var(--muted) }
.input,select.input,textarea.input{
  width:100%; padding:12px 14px; border-radius:11px; background:var(--bg-3);
  border:1px solid var(--line); transition:.2s; font-size:.94rem;
}
.input:focus{ outline:none; border-color:var(--cyan); box-shadow:var(--glow-s) }
textarea.input{ resize:vertical; min-height:90px }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }

.seg{ display:inline-flex; padding:4px; border-radius:12px; background:var(--bg-3); border:1px solid var(--line); gap:4px }
.seg button{ padding:9px 16px; border-radius:9px; font-size:.86rem; font-weight:600; color:var(--muted); transition:.2s }
.seg button.on{ background:var(--cyan); color:#04181B }
:root[data-theme="light"] .seg button.on{ color:#fff }

.range{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; background:var(--line-strong) }
.range::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--cyan); box-shadow:var(--glow-s); cursor:pointer }
.range::-moz-range-thumb{ width:20px; height:20px; border:0; border-radius:50%; background:var(--cyan); cursor:pointer }

.tagbox{ display:flex; flex-wrap:wrap; gap:7px; padding:9px; border-radius:11px; background:var(--bg-3); border:1px solid var(--line) }
.tagbox .tag{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px; background:var(--panel-2); font-size:.8rem }
.tagbox .tag b{ cursor:pointer; color:var(--muted) }
.tagbox input{ flex:1; min-width:110px; background:none; border:0; outline:none; font-size:.86rem }

/* ═══════════════ 13. 대시보드 ═══════════════ */
.dash-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:26px }
.dash-top .grow{ flex:1 }
.new-wrap{ position:relative }
.btn-new{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:99px; font-weight:700;
  background:linear-gradient(135deg,#3E8BFF,#5B9BFF); color:#fff; box-shadow:0 8px 24px rgba(59,130,246,.35);
  transition:transform .3s var(--spring)
}
.btn-new:hover{ transform:translateY(-2px) scale(1.03) }

.new-menu{
  position:absolute; right:0; top:calc(100% + 12px); width:430px; padding:14px; z-index:60;
  border-radius:var(--r-l); background:color-mix(in srgb,var(--bg-2) 96%,transparent);
  border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:blur(20px);
  transform-origin:top right; animation:menuIn .28s var(--spring);
}
.new-menu.inline{ position:static; width:100%; padding:0; background:none; border:0; box-shadow:none; backdrop-filter:none; animation:none }
@keyframes menuIn{ from{ opacity:0; transform:scale(.9) translateY(-8px) } to{ opacity:1; transform:none } }

.nm-hero{
  display:flex; gap:13px; align-items:center; width:100%; text-align:left; margin-bottom:14px;
  padding:16px; border-radius:15px; background:var(--panel); border:1px solid var(--line); transition:.2s;
}
.nm-hero:hover{ border-color:var(--cyan); background:color-mix(in srgb,var(--cyan) 9%,transparent) }
.nm-hero-ico{ font-size:1.7rem; flex:none }
.nm-hero b{ display:block; font-size:.94rem; margin-bottom:3px }
.nm-hero span span{ font-size:.76rem; color:var(--muted); line-height:1.5; display:block }
.nm-arrow{ margin-left:auto; color:var(--muted); font-size:1.3rem; flex:none }

.nm-sec{ font-size:.72rem; font-weight:700; letter-spacing:.08em; color:var(--muted); margin:4px 0 9px }
.nm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px }
.nm-tile{
  padding:15px 8px; border-radius:13px; background:var(--panel); border:1px solid var(--line);
  text-align:center; font-size:.78rem; font-weight:600; transition:.2s; display:grid; gap:8px; justify-items:center;
}
.nm-tile:hover{ background:var(--panel-2); border-color:var(--cyan); transform:translateY(-2px) }
.nm-tile em{ font-style:normal; font-size:1.3rem }
.nm-list{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px; display:grid; gap:2px }
.nm-item{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:10px; font-size:.86rem; transition:.18s; width:100%; text-align:left }
.nm-item:hover{ background:var(--panel-2) }
.nm-item em{ font-style:normal; width:20px; text-align:center }

/* 색상 선택 그리드 */
.color-grid{ display:grid; grid-template-columns:repeat(10,1fr); gap:9px }
.color-grid.tight{ grid-template-columns:repeat(10,1fr); gap:7px; flex:1 }
.color-grid button{
  aspect-ratio:1; border-radius:50%; background:var(--c); border:2px solid transparent;
  transition:.18s; box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.color-grid button:hover{ transform:scale(1.16) }
.color-grid button.on{ border-color:var(--txt); box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 65%,transparent) }

/* 새 폴더 만들기 */
.nf-wrap{ display:grid; grid-template-columns:180px 1fr; gap:26px; align-items:start }
.nf-preview{ text-align:center }
.nf-preview .folder-art{ width:100%; aspect-ratio:10/8; filter:drop-shadow(0 12px 22px rgba(0,0,0,.45)) }
.nf-preview b{ display:block; margin-top:12px; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.icon-color-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.icon-input{ width:72px; text-align:center; font-size:1.3rem; flex:none }

/* ── 아이템 그리드 (아이패드 파일앱 스타일) ── */
.item-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:30px 22px; padding:6px 0 40px }
.item-grid.is-empty{ display:block }

.item{
  display:block; width:100%; text-align:center; cursor:pointer; background:none; border:0;
  padding:0; border-radius:16px; transition:transform .28s var(--spring);
}
.item:hover{ transform:translateY(-5px) }
.item:focus-visible{ outline:2px solid var(--cyan); outline-offset:6px }

.item-art{ position:relative; width:100%; aspect-ratio:10/8; display:grid; place-items:center }
.folder-art{ width:100%; height:100%; filter:drop-shadow(0 10px 18px rgba(0,0,0,.42)) }
.folder-svg{ width:100%; height:100%; display:block }
.item:hover .folder-art{ filter:drop-shadow(0 14px 26px rgba(0,0,0,.55)) }

/* 프로젝트 = 노트 모양 */
.note-art{ position:relative; width:74%; height:100%; margin-inline:auto; filter:drop-shadow(0 10px 18px rgba(0,0,0,.42)) }
.note-pages{
  position:absolute; inset:4% -5% 2% 8%; border-radius:3px 7px 7px 3px;
  background:linear-gradient(90deg,#d9dde3,#fbfcfe);
}
.note-cover{
  position:absolute; inset:0 0 0 0; border-radius:5px 9px 9px 5px; overflow:hidden;
  background:linear-gradient(120deg,color-mix(in srgb,var(--c) 88%,#fff 12%),var(--c) 55%,color-mix(in srgb,var(--c) 82%,#000 18%));
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset;
}
.note-cover img{ width:100%; height:100%; object-fit:cover; opacity:.92 }
.note-strap{
  position:absolute; top:0; bottom:0; right:16%; width:7%;
  background:linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.26),rgba(0,0,0,.05));
}
.note-ico{ position:absolute; left:14%; top:50%; transform:translateY(-50%); font-size:1.5rem; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)) }

.item-star{
  position:absolute; top:16%; right:9%; z-index:3; font-size:1.05rem; line-height:1;
  color:rgba(255,255,255,.55); text-shadow:0 1px 3px rgba(0,0,0,.4); cursor:pointer; transition:.2s;
}
.item-star:hover{ transform:scale(1.25) }
.item-star.on{ color:#FFF3C4; text-shadow:0 0 10px rgba(255,220,120,.7) }

.item-label{ margin-top:10px; padding:0 4px }
.item-label b{
  display:inline-flex; align-items:center; gap:3px; max-width:100%;
  font-size:.9rem; font-weight:600; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.item-chev{
  font-style:normal; color:var(--muted); font-size:.9rem; line-height:1; padding:2px 4px;
  border-radius:5px; flex:none; transition:.18s;
}
.item-chev:hover{ background:var(--panel-2); color:var(--txt) }
.item-label small{ display:block; color:var(--muted); font-size:.74rem; margin-top:3px }

.item-ghost .ghost-box{
  width:100%; height:100%; border-radius:14px; border:2px dashed var(--line-strong);
  display:grid; place-items:center; color:var(--muted); transition:.25s;
}
.item-ghost .ghost-box em{ font-style:normal; font-size:2rem }
.item-ghost:hover .ghost-box{ border-color:var(--cyan); color:var(--cyan); background:color-mix(in srgb,var(--cyan) 7%,transparent) }

/* 빈 보관소 */
.empty-hero{
  grid-column:1/-1; text-align:center; padding:64px 24px;
  border:1px dashed var(--line); border-radius:var(--r-xl); background:var(--panel);
  display:grid; gap:14px; justify-items:center;
}
.empty-ico{ font-size:3.2rem; opacity:.9 }
.empty-hero h3{ font-size:1.28rem; font-weight:800 }
.empty-hero p{ color:var(--muted); font-size:.92rem; line-height:1.7 }
.empty-hero .btn-cta{ margin-top:10px }

/* 컨텍스트 메뉴 */
.ctx{
  position:fixed; z-index:400; min-width:210px; padding:8px; border-radius:14px;
  background:color-mix(in srgb,var(--bg-2) 96%,transparent); border:1px solid var(--line);
  box-shadow:var(--shadow); backdrop-filter:blur(18px); animation:menuIn .18s var(--spring);
}
.ctx button{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border-radius:9px; font-size:.86rem; text-align:left; transition:.16s }
.ctx button:hover{ background:var(--panel-2) }
.ctx button.danger{ color:var(--red) }
.ctx hr{ border:0; border-top:1px solid var(--line); margin:6px 4px }
.ctx .swatches{ display:flex; gap:6px; padding:8px 10px; flex-wrap:wrap }
.ctx .swatches i{ width:24px; height:24px; border-radius:7px; cursor:pointer; border:2px solid transparent; transition:.15s }
.ctx .swatches i:hover{ transform:scale(1.15) }
.ctx .swatches i.on{ border-color:#fff; box-shadow:0 0 0 2px var(--cyan) }

/* ═══════════════ 14. 모달 ═══════════════ */
.modal-back{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px;
  background:rgba(0,0,0,.62); backdrop-filter:blur(6px); animation:fade .22s ease;
}
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
.modal{
  width:min(680px,96vw); max-height:88vh; overflow:auto; padding:28px;
  border-radius:var(--r-xl); background:var(--bg-2); border:1px solid var(--line);
  box-shadow:var(--shadow); animation:menuIn .34s var(--spring);
}
.modal.wide{ width:min(1020px,96vw) }
.modal-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:22px }
.modal-head h3{ font-size:1.34rem; flex:1 }
.modal-head p{ font-size:.85rem; color:var(--muted); margin-top:6px }
.modal-x{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:var(--muted); flex:none }
.modal-x:hover{ background:var(--panel-2); color:var(--txt) }
.modal-foot{ display:flex; gap:10px; justify-content:flex-end; margin-top:24px; flex-wrap:wrap }

/* 위저드 */
.wiz{ display:grid; grid-template-columns:1fr 300px; gap:26px }
.steps{ display:flex; align-items:center; gap:10px; margin-bottom:24px; flex-wrap:wrap }
.step{ display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:99px; font-size:.84rem; font-weight:600; color:var(--muted); background:var(--panel); border:1px solid var(--line) }
.step.on{ color:var(--cyan); border-color:var(--cyan); box-shadow:var(--glow-s) }
.step.done{ color:var(--lime); border-color:color-mix(in srgb,var(--lime) 50%,transparent) }
.step-line{ flex:1; height:2px; background:var(--line); min-width:16px }
.wiz-summary{ padding:20px; border-radius:var(--r-m); background:var(--panel); border:1px solid var(--line); align-self:start }
.wiz-summary h4{ color:var(--red); font-size:.92rem; margin-bottom:14px }
.wiz-thumb{ height:130px; border-radius:12px; background:var(--c,var(--panel-2)); margin-bottom:12px; display:grid; place-items:center; font-size:2.2rem; overflow:hidden }
.wiz-thumb img{ width:100%; height:100%; object-fit:cover }
.wiz-summary b{ font-size:.92rem } .wiz-summary small{ display:block; color:var(--muted); font-size:.76rem; margin-top:4px }
.tpl-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.tpl-pick button{ padding:16px 10px; border-radius:12px; border:1px solid var(--line); background:var(--panel); font-size:.8rem; display:grid; gap:8px; justify-items:center; transition:.2s }
.tpl-pick button:hover{ border-color:var(--cyan) }
.tpl-pick button.on{ border-color:var(--cyan); background:color-mix(in srgb,var(--cyan) 12%,transparent); box-shadow:var(--glow-s) }
.tpl-pick em{ font-style:normal; font-size:1.6rem }

/* 토스트 */
#toast-root{ position:fixed; left:50%; bottom:34px; transform:translateX(-50%); z-index:500; display:grid; gap:10px; justify-items:center; pointer-events:none }
.toast{
  padding:13px 22px; border-radius:99px; font-size:.88rem; font-weight:600;
  background:color-mix(in srgb,var(--bg-2) 94%,transparent); border:1px solid var(--line);
  box-shadow:var(--shadow); backdrop-filter:blur(14px); animation:toastIn .34s var(--spring);
}
.toast.ok{ border-color:color-mix(in srgb,var(--lime) 60%,transparent) }
.toast.err{ border-color:color-mix(in srgb,var(--red) 60%,transparent) }
@keyframes toastIn{ from{ opacity:0; transform:translateY(18px) scale(.9) } to{ opacity:1; transform:none } }

/* ═══════════════ 15. 프로젝트 에디터 ═══════════════ */
/* 에디터는 화면 전체를 덮으므로 상단 GNB 를 숨긴다 (겹침·클릭 차단 방지) */
body.editor-mode{ overflow:hidden }
body.editor-mode #gnb{ display:none }
body.editor-mode::before{ display:none }
.editor{ position:fixed; inset:0; display:flex; flex-direction:column; background:var(--bg); z-index:100; overflow:hidden }
.ed-top{
  height:60px; flex:none; display:flex; align-items:center; gap:14px; padding:0 16px;
  border-bottom:1px solid var(--line); background:var(--bg-2);
}
.ed-back{ display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px; font-size:.88rem; font-weight:600 }
.ed-back:hover{ background:var(--panel-2) }
.ed-title{ font-weight:800; font-size:1rem; max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ed-title input{ background:none; border:0; font-weight:800; font-size:1rem; width:100%; outline:none }
.ed-tabs{ margin-inline:auto; display:flex; gap:4px; padding:4px; border-radius:11px; background:var(--bg-3); border:1px solid var(--line) }
.ed-tabs button{ padding:7px 16px; border-radius:8px; font-size:.85rem; font-weight:600; color:var(--muted) }
.ed-tabs button.on{ background:var(--panel-2); color:var(--txt) }
.ed-top .right{ display:flex; gap:8px; align-items:center }
.ed-more{ display:none }

.ed-body{ flex:1; display:flex; min-height:0 }
.ed-side{
  width:210px; flex:none; border-right:1px solid var(--line); background:var(--bg-2);
  overflow-y:auto; padding:14px 12px;
}
.side-h{ font-size:.76rem; font-weight:700; color:var(--muted); letter-spacing:.06em; margin:4px 0 10px }
.pg-thumb{
  border-radius:10px; border:2px solid transparent; background:var(--bg-3);
  overflow:hidden; margin-bottom:10px; cursor:pointer; position:relative;
  width:max-content; max-width:100%; transition:border-color .2s,box-shadow .2s;
}
.pg-thumb:hover{ border-color:var(--line-strong) }
.pg-thumb.on{ border-color:var(--cyan); box-shadow:var(--glow-s) }

/* 실제 페이지를 그대로 축소해 보여주는 미니 렌더 */
.pg-thumb .ph-canvas{
  position:relative; overflow:hidden; background:var(--sheet); display:block;
}
.pg-thumb .ph-inner{
  position:absolute; left:0; top:0; transform-origin:top left; pointer-events:none;
}
.pg-thumb .ph-strokes{ position:absolute; left:0; top:0; pointer-events:none }
.pg-thumb .ph-empty{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:.66rem; color:var(--muted); pointer-events:none;
}
/* 미니 렌더 안에서는 상호작용 스타일을 모두 끈다 */
.ph-inner .el{ cursor:default!important; outline:none!important; box-shadow:none!important }
.ph-inner .el .rz{ display:none!important }
.ph-inner .el-video{ display:grid; place-items:center }
.ph-inner .vph{ font-size:44px; color:rgba(255,255,255,.7) }

.pg-thumb b{ display:block; padding:6px 8px; font-size:.72rem; font-weight:600; color:var(--muted) }
.pg-thumb .ph-del{ position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:6px; background:rgba(0,0,0,.5); color:#fff; font-size:.7rem; display:none }
.pg-thumb:hover .ph-del{ display:grid; place-items:center }
.media-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px }
.media-grid .m{ aspect-ratio:1; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--bg-3); display:grid; place-items:center; font-size:1.1rem; cursor:grab }
.media-grid .m img{ width:100%; height:100%; object-fit:cover }

.ed-canvas-area{ flex:1; overflow:auto; padding:20px; display:grid; place-items:start center; background:var(--bg) }
.sheet-stack{ display:block }
.sheet-scaler{ position:relative; overflow:hidden }
.page-sheet{
  position:relative; width:920px; border-radius:14px;
  background:var(--sheet); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden;
}
.page-sheet.grid-bg{ background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:28px 28px }
.page-sheet.dot-bg{ background-image:radial-gradient(var(--line-strong) 1.2px,transparent 1.2px); background-size:24px 24px }
.page-sheet.line-bg{ background-image:linear-gradient(var(--line) 1px,transparent 1px); background-size:100% 34px }
.draw-layer{ position:absolute; inset:0; z-index:5; touch-action:none }
.draw-layer.off{ pointer-events:none }
.el-layer{ position:absolute; inset:0; z-index:4 }
.el-layer.locked{ pointer-events:none }
.add-page-btn{ width:100%; margin:18px 0 40px; padding:16px; border-radius:14px; border:1px dashed var(--line); color:var(--muted); font-size:.9rem; transition:.2s }
.add-page-btn:hover{ border-color:var(--cyan); color:var(--cyan) }

.el{ position:absolute; cursor:move; border-radius:8px; outline:2px solid transparent; transition:outline-color .15s }
.el:hover{ outline-color:color-mix(in srgb,var(--cyan) 45%,transparent) }
.el.sel{ outline-color:var(--cyan); box-shadow:0 0 0 4px rgba(0,240,255,.14) }
.el .rz{ position:absolute; right:-7px; bottom:-7px; width:15px; height:15px; border-radius:4px; background:var(--cyan); border:2px solid var(--bg-3); cursor:nwse-resize; display:none }
.el.sel .rz{ display:block }
.el-text{ padding:8px 10px; font-size:15px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; background:transparent }
.el-text[contenteditable="true"]{ cursor:text; outline-color:var(--cyan) }
.el-img img{ width:100%; height:100%; object-fit:cover; border-radius:8px; pointer-events:none }
/* 페이지 안의 요소는 글자 크기 설정(--fs)의 영향을 받지 않도록 px 고정
   → 설정을 바꿔도 페이지 레이아웃이 절대 깨지지 않는다. */
.el-note{
  padding:12px 14px; font-size:14px; line-height:1.5; border-radius:4px;
  background:var(--nc,#FFE99B); color:#3A2F00; box-shadow:0 8px 20px rgba(0,0,0,.35);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.el-link{ padding:12px 14px; border-radius:10px; background:var(--panel-2); border:1px solid var(--line); font-size:13.5px; display:grid; gap:4px }
.el-link b{ color:var(--cyan); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.el-link span{ color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.el-video{ background:#000; border-radius:10px; overflow:hidden; display:grid; place-items:center }
.el-video video,.el-video iframe{ width:100%; height:100%; border:0 }
.el-figure{ display:grid; place-items:center; color:var(--cyan) }
.el-figure svg{ width:100%; height:100%; opacity:.9 }

/* ── 번호 섹션 라벨 (인포그래픽의 노란 라벨) ── */
.el-sect{
  display:flex; align-items:center; gap:10px; padding:9px 16px 9px 10px;
  border-radius:10px; width:max-content; max-width:100%;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 26%,transparent),color-mix(in srgb,var(--ac) 8%,transparent));
  border-left:4px solid var(--ac);
}
.el-sect .sn{
  flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:8px;
  background:var(--ac); color:#231A00; font-size:14px; font-weight:900; line-height:1;
}
.el-sect b{ font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--txt); white-space:nowrap }
:root[data-theme="light"] .el-sect b{ color:#141A20 }

/* ── 정보 카드 ── */
.el-card{
  padding:16px 18px 17px; border-radius:14px; overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 11%,transparent),color-mix(in srgb,var(--ac) 4%,transparent));
  border:1px solid color-mix(in srgb,var(--ac) 34%,transparent);
}
.el-card h4{
  display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; line-height:1.35;
  color:var(--ac); margin-bottom:11px; letter-spacing:-.01em;
}
.el-card h4 .ci{ font-size:16px; flex:none }
.el-card .cbody{ font-size:14px; line-height:1.78; color:#C9D0D8; white-space:pre-wrap; overflow-wrap:anywhere }
.el-card .cbody:focus{ outline:none }
:root[data-theme="light"] .el-card .cbody{ color:#3A424C }

/* 변형 */
.el-card.card-plain{ background:var(--panel); border-color:var(--line) }
.el-card.card-plain h4{ color:var(--txt) }
.el-card.card-quote{ border-left:4px solid var(--ac) }
.el-card.card-quote .cbody{ font-size:15px; color:#DDE3EA }
.el-card.card-step h4{ font-size:14px }
.el-card.card-use{ text-align:left }
.el-card.card-use h4{ font-size:14.5px }
.el-card.card-use .cbody{ font-size:13.5px; line-height:1.7 }

/* ── 표 ── */
.el-table{ border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--panel) }
.el-table table{ width:100%; border-collapse:collapse; font-size:13px }
.el-table th{
  padding:9px 10px; text-align:left; font-weight:800; font-size:12.5px;
  background:color-mix(in srgb,var(--cyan) 16%,transparent); color:var(--txt);
  border-bottom:1px solid var(--line-strong); white-space:nowrap;
}
.el-table td{ padding:8px 10px; border-top:1px solid var(--line); color:#C2C9D2; line-height:1.5 }
.el-table td.k{ font-weight:700; color:var(--txt) }
.el-table tbody tr:nth-child(even){ background:rgba(255,255,255,.025) }
:root[data-theme="light"] .el-table td{ color:#414951 }
:root[data-theme="light"] .el-table tbody tr:nth-child(even){ background:rgba(0,0,0,.025) }

/* ── 도해(SVG) ── */
.el-svg{
  display:grid; grid-template-rows:1fr auto; gap:6px;
  padding:12px; border-radius:14px; background:var(--panel); border:1px solid var(--line);
}
.el-svg svg{ width:100%; height:100%; min-width:0; min-height:0; display:block }
.el-svg .cap{ font-size:11.5px; color:var(--muted); text-align:center }
/* 도해는 어두운 배경 기준으로 그려져 있으므로, 라이트 모드에서도
   도해 카드만 어둡게 유지해 라벨이 항상 또렷하게 보이도록 한다. */
:root[data-theme="light"] .el-svg{ background:#1B1E23; border-color:rgba(0,0,0,.18) }
:root[data-theme="light"] .el-svg .cap{ color:#9AA4B2 }

.ed-tools{ width:250px; flex:none; border-left:1px solid var(--line); background:var(--bg-2); overflow-y:auto; padding:16px 14px }
.tool-sec{ margin-bottom:20px }
.tool-sec h5{ font-size:.74rem; font-weight:700; color:var(--muted); letter-spacing:.06em; margin:0 0 10px }
.tool-btn{
  display:flex; align-items:center; gap:10px; width:100%; padding:11px 13px; border-radius:11px;
  border:1px solid var(--line); background:var(--panel); font-size:.86rem; font-weight:600; margin-bottom:7px; transition:.18s; text-align:left;
}
.tool-btn:hover{ background:var(--panel-2); border-color:var(--line-strong) }
.tool-btn.on{ border-color:var(--cyan); background:color-mix(in srgb,var(--cyan) 14%,transparent); color:var(--cyan); box-shadow:var(--glow-s) }
.tool-btn em{ font-style:normal; font-size:1.05rem; width:20px; text-align:center }
.tool-row{ display:grid; grid-template-columns:1fr 1fr; gap:7px }
.tool-row .tool-btn{ margin-bottom:0; justify-content:center; padding:11px 6px; font-size:.8rem }
.palette{ display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin-bottom:12px }
.palette i{ aspect-ratio:1; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:.15s }
.palette i:hover{ transform:scale(1.18) }
.palette i.on{ border-color:var(--txt); box-shadow:0 0 0 2px var(--cyan) }
.width-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:11px; background:var(--bg-3); border:1px solid var(--line) }
.width-row .prev{ width:34px; height:34px; display:grid; place-items:center; flex:none }
.width-row .prev i{ display:block; border-radius:99px; background:var(--pc,var(--cyan)) }
.pen-toggle{ display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:11px; background:var(--bg-3); border:1px solid var(--line); font-size:.82rem; cursor:pointer }
.pen-toggle input{ accent-color:var(--cyan); width:16px; height:16px }
.ed-hint{ font-size:.72rem; color:var(--muted); line-height:1.5; padding:10px; border-radius:10px; background:var(--panel); border:1px dashed var(--line) }

/* 보기 모드 */
.editor.view-mode .ed-tools,.editor.view-mode .ed-side .add-only{ display:none }
.editor.view-mode .el{ cursor:default }

/* ═══════════════ 16. 템플릿/센서 백과 ═══════════════ */
.tpl-hero{ padding:30px; border-radius:var(--r-xl); background:linear-gradient(135deg,rgba(0,240,255,.12),transparent 60%); border:1px solid var(--line); margin-bottom:30px }
.sensor-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px }
.sensor-card{ padding:22px; border-radius:var(--r-m); background:var(--panel); border:1px solid var(--line); cursor:pointer; transition:.3s var(--spring) }
.sensor-card:hover{ transform:translateY(-6px); border-color:var(--cyan); box-shadow:0 18px 40px rgba(0,240,255,.12) }
.sensor-card .ico{ font-size:1.9rem }
.sensor-card h4{ margin:12px 0 6px; font-size:1.06rem }
.sensor-card p{ font-size:.84rem; color:var(--muted) }
.sensor-card .analogy{ margin-top:12px; padding:9px 12px; border-radius:9px; background:var(--bg-3); font-size:.78rem; color:var(--cyan) }

/* ═══════════════ 16-b. 추가 UI ═══════════════ */
.wrap.narrow{ width:min(860px,92vw) }
.dash-top h1{ font-size:clamp(1.5rem,3vw,2.1rem); font-weight:900 }
.dash-top .muted{ margin-top:7px; font-size:.88rem }
.dash-search{ max-width:240px }

.guest-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between;
  margin:-14px 0 26px; padding:14px 18px; border-radius:var(--r-m);
  background:color-mix(in srgb,var(--cyan) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--cyan) 32%,transparent);
  font-size:.88rem; color:var(--txt-2);
}
.guest-bar b{ color:var(--txt) }
.guest-bar .btn-sm{ flex:none }

.tpl-hero h1{ font-size:clamp(1.6rem,3vw,2.3rem); font-weight:900; margin-top:6px }
.tpl-hero p{ color:var(--txt-2); margin-top:12px; max-width:720px; line-height:1.75; font-size:.95rem }

/* 계정 */
.acct-row{ display:flex; align-items:center; gap:14px; margin-top:14px; padding:16px; border-radius:var(--r-m); background:var(--bg-3); border:1px solid var(--line) }
.acct-info b{ display:block; font-size:1.02rem }
.acct-info span{ font-size:.82rem; color:var(--muted) }
.maker-avatar.big{ width:64px; height:64px; font-size:1.6rem; margin-inline:auto }
.inline-form{ display:flex; gap:9px; align-items:center }
.inline-form .input{ flex:1 }
.inline-form .btn-sm{ flex:none; white-space:nowrap }

/* 동기화 상태 */
.sync-box{
  margin-top:16px; padding:14px 16px; border-radius:var(--r-m);
  background:var(--panel); border:1px solid var(--line);
}
.sync-box b{ display:block; font-size:.92rem; margin-bottom:6px }
.sync-box span{ display:block; font-size:.82rem; color:var(--muted); line-height:1.6 }
.sync-box code{
  font-family:Consolas,'D2Coding',monospace; font-size:.78rem;
  background:var(--bg-3); padding:1px 6px; border-radius:5px; border:1px solid var(--line);
}
/* 세션 복원 중에는 깜빡임 방지 */
body.booting #main{ opacity:0 }
body.booting::after{
  content:'☁️ 계정 정보를 불러오는 중…'; position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; background:var(--bg); color:var(--muted); font-size:.92rem;
}

.pw-form{ display:grid; gap:2px }
.pw-msg{ min-height:1.2em; font-size:.83rem; margin:2px 0 0 }
.pw-msg.err{ color:var(--red) }
.pw-msg.ok{ color:var(--lime) }

.seg.full{ width:100%; display:grid; grid-template-columns:1fr 1fr; margin-bottom:20px }
.seg.full button{ text-align:center }
.btn-cta.full{ width:100%; margin-top:6px }

.info-card{ margin-top:14px; padding:16px; border-radius:var(--r-m); background:var(--panel); border:1px solid var(--line) }
.info-card b{ font-size:.9rem }
.info-card p{ margin-top:8px; font-size:.82rem; color:var(--muted); line-height:1.65 }
.wiz-h{ margin-bottom:16px; font-size:1.06rem }

/* ═══════════════ 17. 반응형 ═══════════════ */
@media (max-width:1180px){
  .ed-side{ width:170px } .ed-tools{ width:220px }
}
/* 태블릿 세로(아이패드 768) 이하 : 캔버스를 최대한 넓게 쓰도록 상·하 배치 */
@media (max-width:900px){
  .ed-body{ flex-direction:column }
  .ed-side{ width:100%; height:148px; display:flex; gap:10px; border-right:0; border-bottom:1px solid var(--line); overflow-x:auto; align-items:flex-start }
  .ed-side .side-h,.ed-side .media-grid{ display:none }
  .pg-thumb{ flex:none; margin-bottom:0 }
  .ed-tools{
    width:100%; max-height:210px; border-left:0; border-top:1px solid var(--line);
    display:grid; grid-template-columns:repeat(2,1fr); gap:0 14px; align-content:start;
  }
  .ed-title{ max-width:26vw }
  .ed-tabs{ display:none }
  .ed-more{ display:grid; place-items:center }
}
@media (max-width:980px){
  .two-col{ grid-template-columns:1fr; gap:36px }
  .feat-grid,.tips-grid{ grid-template-columns:1fr }
  .wiz{ grid-template-columns:1fr }
  .panel-wide{ padding:34px 22px }
  .globe-stage,.iso-stage{ height:340px }
}
@media (max-width:760px){
  :root{ --gnb-h:66px }
  .gnb-burger{ display:block }
  .gnb-nav{
    position:fixed; right:3vw; top:calc(var(--gnb-h) + 6px); flex-direction:column; align-items:stretch;
    width:210px; border-radius:18px; padding:10px; background:color-mix(in srgb,var(--bg-2) 96%,transparent);
    box-shadow:var(--shadow); display:none;
  }
  .gnb-nav.open{ display:flex; animation:menuIn .24s var(--spring) }
  .sec{ padding:70px 0 }
  .folder-float{ width:82px; height:60px; font-size:.94rem }
  .new-menu{ width:min(94vw,420px); position:fixed; right:3vw; top:auto; bottom:20px; max-height:78vh; overflow:auto }
  .new-menu.inline{ position:static; width:100%; max-height:none }
  .nm-grid{ grid-template-columns:repeat(2,1fr) }
  .item-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:24px 16px }
  .nf-wrap{ grid-template-columns:1fr; gap:18px }
  .nf-preview .folder-art{ width:52%; margin-inline:auto }
  .color-grid{ grid-template-columns:repeat(5,1fr) }
  .dash-search{ max-width:none; width:100% }
  .inline-form{ flex-wrap:wrap }
  .ed-tabs{ display:none }
  .shields{ grid-template-columns:repeat(2,1fr) }
  .mock-search{ grid-template-columns:1fr } .mock-side{ display:none }
  .row2{ grid-template-columns:1fr }
}
/* 세로가 짧은 노트북 화면에서 히어로가 잘리지 않도록 */
@media (max-height:840px) and (min-width:761px){
  .sec-hero{ min-height:auto; padding-bottom:64px }
  .hero-stage{ width:min(760px,92vw) }
}

@media print{ #gnb,.ed-side,.ed-tools,.ed-top,.site-footer{ display:none!important } }