/* 감자 홈페이지 시안 2: 움직임이 있는 버전 (스크롤에 따라 화면이 바뀌고, 글자가 채워지고, 빛이 떠다닌다) */
:root { --bg:#fbfaf7; --soft:#f2f0ea; --fg:#16140f; --muted:#6d6a62; --line:#e7e3d9; --card:#fff; --accent:#ffd500; --accent2:#ffb300; --accent-fg:#16140f; --dark:#14120d; --glow1:#ffe66b; --glow2:#ffc2d9; --glow3:#b9e6ff; --hdr:rgba(251,250,247,.82); --shadow:0 30px 80px rgba(60,45,0,.18); }
[data-theme="dark"] { --bg:#0e0d0a; --soft:#17150f; --fg:#f6f3ea; --muted:#a29e92; --line:#2a271e; --card:#19170f; --dark:#000; --glow1:#6b5a00; --glow2:#5a2340; --glow3:#12435f; --hdr:rgba(14,13,10,.8); --shadow:0 30px 80px rgba(0,0,0,.6); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:"Pretendard",-apple-system,"Segoe UI","Noto Sans KR",sans-serif; background:var(--bg); color:var(--fg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
svg.i { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.wrap { max-width:1160px; margin:0 auto; padding:0 24px; }

/* 머리글 */
header { position:fixed; top:0; left:0; right:0; z-index:30; background:var(--hdr); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid transparent; transition:border-color .3s; }
header.scrolled { border-bottom-color:var(--line); }
.bar { display:flex; align-items:center; height:60px; gap:26px; }
.brand { font-weight:900; font-size:21px; letter-spacing:-.5px; display:flex; align-items:center; gap:8px; }
.brand i { width:28px; height:28px; border-radius:9px; background:var(--accent); display:grid; place-items:center; font-style:normal; font-size:15px; color:var(--accent-fg); }
nav.main { display:flex; gap:24px; font-size:14.5px; font-weight:600; margin-right:auto; }
nav.main a { color:var(--muted); transition:color .2s; } nav.main a:hover { color:var(--fg); }
.tools { display:flex; align-items:center; gap:6px; }
.icon-btn { min-width:38px; height:38px; padding:0 8px; border-radius:99px; border:0; background:transparent; color:var(--fg); font:inherit; font-size:14px; font-weight:800; display:grid; place-items:center; cursor:pointer; }
.icon-btn svg.i { font-size:20px; } .icon-btn:hover { background:var(--soft); }
.pill { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:99px; background:var(--accent); color:var(--accent-fg); font-weight:800; font-size:15px; border:0; cursor:pointer; font-family:inherit; transition:transform .2s, box-shadow .2s; }
.pill:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,190,0,.4); }
.pill.big { padding:17px 32px; font-size:17px; }
.pill.line { background:transparent; border:1.5px solid var(--line); color:var(--fg); }
.pill.line:hover { box-shadow:none; background:var(--soft); }
#menuBtn { display:none; }

/* 움직임: 나타나기 */
.rv { opacity:0; transform:translateY(36px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s); }
.rv.in { opacity:1; transform:none; }
.rv.zoom { transform:scale(.92) translateY(30px); } .rv.zoom.in { transform:none; }

/* 첫 화면 */
.hero { position:relative; min-height:100vh; display:grid; align-content:center; justify-items:center; text-align:center; padding:110px 0 60px; overflow:hidden; }
.glow { position:absolute; border-radius:50%; filter:blur(70px); opacity:.75; pointer-events:none; will-change:transform; }
.glow.a { width:520px; height:520px; background:var(--glow1); top:-120px; left:-120px; animation:drift 14s ease-in-out infinite alternate; }
.glow.b { width:460px; height:460px; background:var(--glow2); top:30%; right:-140px; animation:drift 17s ease-in-out infinite alternate-reverse; }
.glow.c { width:420px; height:420px; background:var(--glow3); bottom:-160px; left:30%; animation:drift 19s ease-in-out infinite alternate; }
@keyframes drift { from { transform:translate(0,0) scale(1); } to { transform:translate(60px,-40px) scale(1.15); } }
.hero .wrap { position:relative; z-index:1; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:var(--muted); padding:7px 14px; border-radius:99px; background:var(--card); border:1px solid var(--line); margin:0 0 22px; }
.eyebrow::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent2); box-shadow:0 0 0 0 rgba(255,179,0,.6); animation:ping 2s infinite; }
@keyframes ping { 0% { box-shadow:0 0 0 0 rgba(255,179,0,.6); } 80%,100% { box-shadow:0 0 0 12px rgba(255,179,0,0); } }
h1 { font-size:clamp(46px,10vw,118px); line-height:1.04; letter-spacing:-.045em; font-weight:900; margin:0 0 22px; }
h1 .g { background:linear-gradient(100deg,#ffb300,#ff6a3d 50%,#ff3d8b); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .sub { font-size:clamp(17px,2.6vw,24px); color:var(--muted); margin:0 0 34px; }
.cta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.small { font-size:13px; color:var(--muted); margin-top:16px; }
.scrollcue { position:relative; width:26px; height:42px; margin:34px auto 0; border:2px solid var(--muted); border-radius:14px; opacity:.55; }
.scrollcue::after { content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--muted); animation:wheel 1.6s infinite; }
@keyframes wheel { 0% { transform:translateY(0); opacity:1; } 100% { transform:translateY(14px); opacity:0; } }

/* 폰 모형 */
.phone { position:relative; width:290px; height:590px; border-radius:46px; background:#0d0c09; padding:10px; box-shadow:var(--shadow), inset 0 0 0 2px #2b2820; flex:none; }
.phone::before { content:""; position:absolute; top:18px; left:50%; width:88px; height:24px; margin-left:-44px; border-radius:14px; background:#000; z-index:5; }
.screen-wrap { position:relative; width:100%; height:100%; border-radius:37px; overflow:hidden; background:var(--bg); }
.screen { position:absolute; inset:0; padding:54px 14px 16px; display:flex; flex-direction:column; gap:8px; opacity:0; transform:scale(.97); filter:blur(6px); transition:opacity .6s ease, transform .6s ease, filter .6s ease; pointer-events:none; }
.screen.on { opacity:1; transform:none; filter:none; }
.screen .top { font-size:21px; font-weight:900; letter-spacing:-.5px; margin:0 2px 4px; }
.crow { display:flex; align-items:center; gap:11px; padding:9px 4px; font-size:14.5px; font-weight:700; }
.crow small { display:block; font-weight:400; color:var(--muted); font-size:12px; }
.av { width:42px; height:42px; border-radius:15px; background:var(--soft); display:grid; place-items:center; font-size:21px; flex:none; }
.av.y { background:var(--accent); color:var(--accent-fg); }
.bub { max-width:84%; padding:10px 13px; border-radius:18px; font-size:13px; line-height:1.45; background:var(--card); border:1px solid var(--line); }
.bub.me { align-self:flex-end; background:var(--accent); border-color:var(--accent); color:var(--accent-fg); font-weight:600; }
.typing { display:inline-flex; gap:4px; padding:12px 14px; }
.typing i { width:6px; height:6px; border-radius:50%; background:var(--muted); animation:bounce 1.1s infinite; }
.typing i:nth-child(2) { animation-delay:.15s; } .typing i:nth-child(3) { animation-delay:.3s; }
@keyframes bounce { 0%,60%,100% { transform:translateY(0); opacity:.4; } 30% { transform:translateY(-5px); opacity:1; } }
.rescard { border-radius:20px; background:var(--card); border:1px solid var(--line); overflow:hidden; }
.rescard .hd { height:120px; background:linear-gradient(135deg,var(--accent),#ff8a3d); display:grid; place-items:center; font-size:40px; color:#16140f; }
.rescard .bd { padding:12px 14px; font-size:13px; } .rescard b { font-size:15px; display:block; }
.rescard .bt { margin-top:10px; padding:9px; border-radius:12px; background:var(--fg); color:var(--bg); text-align:center; font-weight:800; font-size:13px; }
.notif { margin-top:30px; padding:13px 14px; border-radius:22px; background:color-mix(in srgb,var(--card) 90%,transparent); border:1px solid var(--line); display:flex; gap:11px; align-items:center; box-shadow:0 8px 22px rgba(0,0,0,.08); font-size:13px; }
.notif b { display:block; font-size:13.5px; } .notif small { color:var(--muted); font-size:12px; }
.lock { text-align:center; margin-top:20px; } .lock .t { font-size:60px; font-weight:300; letter-spacing:-2px; line-height:1; } .lock .d { color:var(--muted); font-size:13px; margin-top:6px; }

/* 첫 화면 폰: 말풍선이 차례로 나타난다 */
.hero .phone { margin:30px auto 0; animation:rise 1.2s cubic-bezier(.2,.8,.2,1) both .3s; }
@keyframes rise { from { opacity:0; transform:translateY(120px) rotate(2deg); } to { opacity:1; transform:none; } }
.seq > * { opacity:0; transform:translateY(12px) scale(.96); animation:pop .5s ease forwards; }
.seq > :nth-child(1) { animation-delay:1.4s; } .seq > :nth-child(2) { animation-delay:2.3s; } .seq > :nth-child(3) { animation-delay:3.6s; }
.seq > :nth-child(4) { animation-delay:4.6s; } .seq > :nth-child(5) { animation-delay:6s; }
@keyframes pop { to { opacity:1; transform:none; } }
.seq .typing-b { animation:pop .4s ease forwards 2.3s, vanish .3s ease forwards 3.5s; }
@keyframes vanish { to { opacity:0; height:0; padding:0; margin:-4px 0; border:0; } }

/* 스크롤 이야기: 폰이 가운데 붙어 있고, 글을 내리면 화면이 바뀐다 */
.story { position:relative; padding:0 0 40px; }
.story .grid { display:grid; grid-template-columns:1fr 360px; gap:60px; align-items:start; }
.story .steps { padding:0 0 16vh; }
.story .step:first-child { min-height:30vh; }
/* 폰 화면이 바뀔 때 안의 내용도 차례로 나타난다 (4단계의 알림은 위에서 내려오고 종이 흔들린다) */
.story .screen.on > * { animation:rise-in .7s cubic-bezier(.2,.7,.2,1) both; }
.story .screen.on > *:nth-child(2) { animation-delay:.12s; } .story .screen.on > *:nth-child(3) { animation-delay:.24s; }
.story .screen.on > *:nth-child(4) { animation-delay:.36s; } .story .screen.on > *:nth-child(5) { animation-delay:.48s; } .story .screen.on > *:nth-child(6) { animation-delay:.6s; }
@keyframes rise-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.story .screen.on .notif { animation:drop-in .8s cubic-bezier(.2,.8,.2,1) .35s both; }
.story .screen.on .notif + .notif { animation-delay:1s; }
.story .screen.on .notif .av.y svg { animation:ring 1.1s ease .7s; transform-origin:50% 10%; }
@keyframes drop-in { from { opacity:0; transform:translateY(-34px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes ring { 0%,100% { transform:rotate(0); } 15% { transform:rotate(18deg); } 35% { transform:rotate(-16deg); } 55% { transform:rotate(10deg); } 75% { transform:rotate(-6deg); } }
.story .step { min-height:56vh; display:flex; flex-direction:column; justify-content:center; opacity:.42; transition:opacity .6s ease; }
.story .step.on { opacity:1; }
.story .step h3, .story .step p, .story .step .no { transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.story .step:not(.on) h3, .story .step:not(.on) p, .story .step:not(.on) .no { transform:translateY(12px); }
.story .step .no { display:inline-block; align-self:flex-start; font-size:13px; font-weight:900; color:var(--accent-fg); background:var(--accent); letter-spacing:.04em; padding:5px 12px; border-radius:99px; margin-bottom:16px; }
.dots { position:absolute; bottom:0; left:0; right:0; display:none; justify-content:center; gap:7px; }
.dots i { width:7px; height:7px; border-radius:4px; background:var(--line); transition:width .5s ease, background .5s ease; }
.dots i.on { width:26px; background:var(--accent2); }
.story .step h3 { font-size:clamp(30px,4.6vw,52px); line-height:1.15; letter-spacing:-.035em; margin:0 0 14px; font-weight:900; }
.story .step p { font-size:clamp(16px,2vw,20px); color:var(--muted); margin:0; max-width:460px; }
.story .sticky { position:sticky; top:calc(50vh - 295px); display:grid; place-items:center; height:590px; }
.story .sticky .halo { position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,var(--glow1),transparent 65%); filter:blur(20px); opacity:.8; transition:background .6s; }
.story .sticky .phone { z-index:1; }

/* 글자가 스크롤에 따라 채워진다 */
.fillsec { padding:130px 0 24px; }
.fill { font-size:clamp(30px,6vw,72px); line-height:1.22; letter-spacing:-.04em; font-weight:900; max-width:1000px; margin:0 auto; text-align:center; }
.fill span { color:color-mix(in srgb,var(--fg) 16%,transparent); transition:color .35s; }
.fill span.on { color:var(--fg); }
.fill span.on.hl { color:#ff8a00; }

/* 흐르는 크루 */
.marquee { overflow:hidden; padding:20px 0; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.track { display:flex; gap:14px; width:max-content; animation:slide 38s linear infinite; }
.marquee.rev .track { animation-direction:reverse; animation-duration:46s; }
.marquee:hover .track { animation-play-state:paused; }
@keyframes slide { to { transform:translateX(-50%); } }
.chip { display:inline-flex; align-items:center; gap:12px; padding:14px 22px 14px 14px; border-radius:99px; background:var(--card); border:1px solid var(--line); font-weight:800; font-size:17px; white-space:nowrap; }
.chip .ic { width:40px; height:40px; border-radius:14px; background:var(--accent); color:var(--accent-fg); display:grid; place-items:center; font-size:20px; }
.chip small { font-weight:500; color:var(--muted); font-size:14px; }

/* 공통 섹션 */
section.sec { padding:120px 0; }
section.soft { background:var(--soft); }
h2 { font-size:clamp(32px,5.6vw,64px); line-height:1.1; letter-spacing:-.04em; font-weight:900; margin:0 0 14px; }
.lead { font-size:clamp(16px,2.2vw,21px); color:var(--muted); margin:0 0 52px; max-width:620px; }
.center { text-align:center; } .center .lead { margin-left:auto; margin-right:auto; }

/* 칸 나눈 소개 (벤토) */
.bento { display:grid; gap:16px; grid-template-columns:repeat(6,1fr); }
.bx { position:relative; overflow:hidden; border-radius:32px; padding:34px; padding-top:190px; background:var(--card); border:1px solid var(--line); min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; transition:transform .4s, box-shadow .4s; }
.bx:hover { transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,0,0,.1); }
.bx h3 { margin:0 0 6px; font-size:clamp(22px,2.6vw,30px); letter-spacing:-.03em; font-weight:900; position:relative; }
.bx p { margin:0; color:var(--muted); font-size:15.5px; position:relative; max-width:380px; }
.bx.w3 { grid-column:span 3; } .bx.w2 { grid-column:span 2; } .bx.w4 { grid-column:span 4; }
.bx.dark { background:var(--dark); color:#f6f3ea; border-color:var(--dark); } .bx.dark p { color:#b8b3a6; }
.bx.yel { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#16140f; border:0; } .bx.yel p { color:#4a3d00; }
.bx .art { position:absolute; top:0; left:0; right:0; height:170px; display:grid; place-items:center; }
.ring { position:relative; width:90px; height:90px; border-radius:50%; background:var(--accent); display:grid; place-items:center; font-size:38px; color:#16140f; }
.ring::before, .ring::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--accent2); animation:wave 2.4s infinite; }
.ring::after { animation-delay:1.2s; }
@keyframes wave { from { transform:scale(1); opacity:.8; } to { transform:scale(2.3); opacity:0; } }
.bar-art { width:70%; display:grid; gap:12px; }
.bar-art i { display:block; height:12px; border-radius:6px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transform-origin:left; animation:grow 3s ease-in-out infinite alternate; }
.bar-art i:nth-child(2) { width:70%; animation-delay:.4s; } .bar-art i:nth-child(3) { width:45%; animation-delay:.8s; }
@keyframes grow { from { transform:scaleX(.2); } to { transform:scaleX(1); } }
.lockart { font-size:72px; color:var(--accent); animation:float 3.5s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(-10px); } }
.code { font:600 13px/1.7 ui-monospace,Menlo,monospace; color:#d8d4c8; text-align:left; }
.code b { color:var(--accent); }
.spin { font-size:64px; color:#16140f; animation:turn 6s linear infinite; }
@keyframes turn { to { transform:rotate(360deg); } }
.tools-art { display:flex; gap:12px; } .tools-art span { width:58px; height:58px; border-radius:18px; background:var(--soft); display:grid; place-items:center; font-size:26px; animation:float 3s ease-in-out infinite; } .tools-art span:nth-child(2) { animation-delay:.4s; } .tools-art span:nth-child(3) { animation-delay:.8s; }

/* 시작 3단계 */
.steps3 { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.s3 { padding:34px; border-radius:32px; background:var(--card); border:1px solid var(--line); }
.s3 .no { font-size:72px; font-weight:900; line-height:1; letter-spacing:-.05em; background:linear-gradient(135deg,var(--accent),#ff6a3d); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:18px; }
.s3 b { display:block; font-size:22px; margin-bottom:8px; letter-spacing:-.02em; } .s3 span { color:var(--muted); font-size:15.5px; }
.note { margin-top:26px; font-size:14px; color:var(--muted); }

/* 요금 */
.plans { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.plan { border-radius:34px; padding:40px; background:var(--card); border:1px solid var(--line); }
.plan.pro { background:var(--dark); color:#f6f3ea; border-color:var(--dark); }
.plan .tag { display:inline-block; padding:4px 13px; border-radius:99px; background:var(--accent); color:var(--accent-fg); font-weight:800; font-size:12.5px; }
.plan h3 { font-size:32px; margin:16px 0 4px; letter-spacing:-.04em; } .plan .price { color:var(--muted); margin-bottom:22px; } .plan.pro .price { color:#b8b3a6; }
.plan ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; font-size:16px; } .plan li { display:flex; gap:10px; align-items:flex-start; } .plan li .i { color:var(--accent2); margin-top:5px; stroke-width:2.6; }

/* 자주 묻는 질문 */
.faq { max-width:780px; display:grid; gap:10px; margin:0 auto; }
.faq details { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:2px 24px; transition:background .3s; }
.faq summary { cursor:pointer; list-style:none; font-weight:800; font-size:18px; padding:18px 0; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:"+"; font-size:24px; color:var(--muted); transition:transform .3s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { margin:0 0 20px; color:var(--muted); font-size:16px; }

/* 마무리 */
.final { position:relative; overflow:hidden; text-align:center; padding:140px 0; background:var(--dark); color:#f6f3ea; }
.final h2 { color:#fff; font-size:clamp(36px,7vw,84px); } .final p { color:#b8b3a6; font-size:20px; margin:0 0 34px; }
.final .glow { opacity:.35; }
footer { background:var(--soft); padding:44px 0 56px; font-size:13.5px; color:var(--muted); }
.flinks { display:flex; flex-wrap:wrap; gap:8px 22px; font-weight:700; color:var(--fg); margin-bottom:20px; } footer p { margin:6px 0; max-width:760px; }

@media (max-width:860px) {
  nav.main { display:none; }
  nav.main.open { display:flex; position:fixed; top:60px; left:0; right:0; flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:8px 24px 16px; }
  nav.main.open a { padding:14px 0; font-size:17px; color:var(--fg); border-bottom:1px solid var(--line); }
  #menuBtn { display:grid; } .bar { gap:8px; } .brand { margin-right:auto; } .tools .pill { display:none; }
  /* 폰 화면: 폰 모형이 화면 아래쪽에 붙어 있고, 글은 그 위쪽 공간에서 폰 뒤로부터 올라와 위로 지나간다 */
  .story .grid { display:block; }
  .story .sticky { position:sticky; top:auto; bottom:0; height:46vh; min-height:330px; z-index:2; display:block; overflow:hidden; background:linear-gradient(to bottom,transparent,var(--bg) 20%); }
  .story .sticky .phone { position:absolute; top:8px; left:50%; margin-left:-145px; transform-origin:center top; }
  .story .sticky .halo { width:280px; height:280px; left:50%; top:20px; margin-left:-140px; }
  .dots { display:flex; padding-bottom:6px; }
  .story .steps { padding:0; } .story .step { min-height:38vh; padding:0 4px; } .story .step:last-child { min-height:18vh; }
  /* 첫 글(01)은 폰 모형 바로 위 칸에 두어서, 둘이 한 덩어리로 함께 올라오다가 폰이 아래에 붙으면 02, 03, 04가 이어진다 */
  .story .grid { position:relative; padding-top:30vh; }
  .story .step:first-child { position:absolute; top:0; left:24px; right:24px; height:30vh; min-height:0; }
  .bento { grid-template-columns:1fr; } .bx.w3,.bx.w2,.bx.w4 { grid-column:auto; } .bx { min-height:250px; }
  section.sec { padding:80px 0; } .fillsec { padding:80px 0 0; } .story .step:first-child { min-height:30vh; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .rv { opacity:1; transform:none; } .seq > * { opacity:1; transform:none; } .screen { opacity:0; } .screen.on { opacity:1; }
  .fill span { color:var(--fg); } html { scroll-behavior:auto; }
}

/* 글 페이지 (개인정보처리방침·이용약관) */
.doc { max-width:760px; padding:110px 24px 80px; margin:0 auto; }
.doc h1 { font-size:clamp(28px,5vw,40px); letter-spacing:-1px; margin-bottom:8px; }
.doc .meta { color:var(--muted); font-size:14px; margin:0 0 32px; }
.doc h2 { font-size:21px; letter-spacing:-.3px; margin:34px 0 8px; }
.doc p, .doc li { font-size:15.5px; }
.doc ul { padding-left:20px; }
.doc table { width:100%; border-collapse:collapse; font-size:14.5px; margin:10px 0; }
.doc th, .doc td { border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
.doc th { background:var(--soft); }
.doc a.u, footer a.u { text-decoration:underline; }

/* 방문 통계(구글 애널리틱스) 동의 창: 측정 ID를 넣었을 때만 나타난다 */
#consent { position:fixed; left:12px; right:12px; bottom:12px; z-index:50; max-width:620px; margin:0 auto; padding:16px 18px; border-radius:20px; background:var(--dark); color:#f2f3f5; box-shadow:0 10px 30px rgba(0,0,0,.25); display:none; gap:14px; align-items:center; flex-wrap:wrap; font-size:14px; }
#consent p { margin:0; flex:1 1 260px; color:#d6d9de; }
#consent a { text-decoration:underline; }
#consent button { border:0; border-radius:99px; padding:10px 18px; font:inherit; font-weight:800; cursor:pointer; }
#consent .yes { background:var(--accent); color:var(--accent-fg); }
#consent .no { background:transparent; color:#d6d9de; border:1px solid #4a4e55; }