/* ═══════════════════════════════════════════════════════════════ 퇴사각 디자인 토큰 + 공통 컴포넌트 모든 페이지가 이 파일 하나를 공유한다. 색은 두 개로만 간다. 노랑과 검정. 노랑은 "지금 여기를 보라"는 뜻으로만 쓴다. 장식으로 쓰면 의미가 죽는다. ═══════════════════════════════════════════════════════════════ */ :root{ --yel:#FFCF3F; --yel-deep:#F0B400; --yel-soft:#FFF2C4; --yel-wash:#FFFAEB; --ink:#17181A; --ink-2:#3A3C40; --ink-3:#6E7278; --ink-4:#9A9EA4; --ink-5:#C3C6CA; --cream:#FAF7F0; --card:#FFFFFF; --line:#E9E5DC; --line-2:#F1EDE4; --red:#EF4E4E; --red-soft:#FDECEC; --green:#12B76A; --r-xl:24px; --r-lg:20px; --r-md:16px; --r-sm:12px; --safe:env(safe-area-inset-bottom,0px); --tab-h:60px; --spring:cubic-bezier(.16,1,.3,1); --snap:cubic-bezier(.34,1.56,.64,1); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--cream)} body{ margin:0;background:var(--cream);color:var(--ink); font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif; font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;letter-spacing:-0.015em; word-break:keep-all;overflow-wrap:anywhere; /* 한글이 단어 중간에서 끊기지 않게 */ } button{font-family:inherit;letter-spacing:inherit} a{color:inherit;text-decoration:none} /* ── 페이지 전환 ───────────────────────────────────────── ⚠ 예전에는 링크를 누르면 JS로 body 를 투명하게 만든 뒤 이동했다. 그런데 브라우저는 뒤로가기 때 페이지를 "떠날 때 모습 그대로" 복원한다(bfcache). 그래서 투명한 채로 돌아와 빈 화면만 보였다. 다시는 JS로 페이지를 숨기지 않는다. 브라우저 기본 기능(View Transitions)으로 교차 페이드만 한다. 지원하지 않는 브라우저는 그냥 평소처럼 넘어간다. */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:.18s} /* ── 레이아웃 ── */ .page{max-width:460px;margin:0 auto;padding:0 24px} body.has-tabs{padding-bottom:calc(var(--tab-h) + var(--safe))} /* ── 헤더 ── */ .top{position:sticky;top:0;z-index:30;background:rgba(250,247,240,.9); backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid transparent;transition:border-color .25s} .top.stuck{border-bottom-color:var(--line)} .top-in{max-width:460px;margin:0 auto;height:58px;padding:0 24px;display:flex;align-items:center;gap:4px} .back{width:38px;height:38px;margin-left:-11px;display:flex;align-items:center;justify-content:center; border-radius:10px;color:var(--ink-2)} .back:active{background:var(--line-2)} /* ── 로고 ────────────────────────────────────────────── 로고는 이미지 세 장으로 쓴다. 손으로 다시 그리지 않는다. assets/logo-full.webp 그림 + 글자 — 전체 탭 카드, 소개, 공유 이미지 assets/logo-mark.webp 그림만 — 헤더, 파비콘 assets/logo-typo.webp 글자만 — 헤더, 푸터 글자 로고는 검정이라 어두운 배경 위에는 .logo-tile(크림색 타일) 안에 넣는다. */ .brand{display:inline-flex;align-items:center;gap:7px} .brand .mk{height:30px;width:auto;display:block} .brand .ty{height:21px;width:auto;display:block;margin-top:2px} .logo-tile{display:flex;align-items:center;justify-content:center;background:var(--cream); border-radius:26%;overflow:hidden} .logo-tile img{width:78%;height:auto;display:block} /* ── 하단 탭 바 (app.js 가 그린다) ── */ .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;view-transition-name:tabbar; background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-top:1px solid var(--line);padding-bottom:var(--safe)} .tabbar-in{max-width:460px;margin:0 auto;height:var(--tab-h);display:grid;grid-template-columns:repeat(4,1fr)} .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; font-size:11px;font-weight:700;color:var(--ink-4);letter-spacing:-0.02em} .tab svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;transition:transform .12s var(--spring)} .tab:active svg{transform:scale(.88)} .tab.on{color:var(--ink);font-weight:800} .tab.on svg{stroke-width:2.1} .tab.on svg .f{fill:var(--yel)} /* ── 탭 화면 제목 ── */ .ptitle{padding:12px 0 0} .ptitle h1{font-size:27px;font-weight:800;letter-spacing:-0.045em;line-height:1.3;margin:0 0 7px} .ptitle p{font-size:14.5px;line-height:1.65;font-weight:500;color:var(--ink-3);margin:0} /* ── 섹션 ── */ .sec{padding:34px 0 0} .sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 13px} .sec-h h2{font-size:19px;font-weight:800;letter-spacing:-0.035em;margin:0} .sec-h a{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--ink-3);padding:4px 0} .sec-h a:hover{color:var(--ink)} .sec > .sub{font-size:14px;line-height:1.65;font-weight:500;color:var(--ink-3);margin:-6px 0 14px} /* ── 목록 행 (토스식) ── */ .rows{background:var(--card);border-radius:var(--r-lg);padding:4px 0;overflow:hidden} .row{display:flex;align-items:center;gap:14px;padding:13px 18px;transition:background .15s} a.row:active{background:var(--yel-wash)} .row .ic{width:40px;height:40px;border-radius:12px;background:var(--yel-soft);flex:0 0 auto; display:flex;align-items:center;justify-content:center;color:var(--ink)} .row .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round} .row .tx{flex:1;min-width:0} .row .t{display:block;font-size:15.5px;font-weight:800;letter-spacing:-0.025em} .row .d{display:block;font-size:13px;font-weight:500;color:var(--ink-3);margin-top:2px;line-height:1.5} .row .chev{flex:0 0 auto;color:var(--ink-5)} .row .badge{flex:0 0 auto;font-size:11px;font-weight:800;padding:4px 8px;border-radius:6px;background:#EFEBE2;color:var(--ink-4)} .row.dim{opacity:.55} .row.plain{padding:15px 18px} .row.plain .t{font-weight:700;font-size:15px} /* ── 법령 신선도 ── */ .fresh{display:flex;gap:10px;align-items:flex-start;margin-top:26px;padding:14px 16px;background:var(--card); border-radius:var(--r-sm);font-size:12.5px;font-weight:500;line-height:1.65;color:var(--ink-3)} .fresh i{width:7px;height:7px;border-radius:50%;background:var(--green);margin-top:6px;flex:0 0 auto} .fresh.warn{background:var(--red-soft);color:#A33A3A} .fresh.warn i{background:var(--red)} /* ── 문서 (소개·문의·정책 페이지) ── */ .doc{padding:10px 0 0} .doc h1{font-size:27px;font-weight:800;letter-spacing:-0.045em;line-height:1.3;margin:0 0 8px} .doc .meta{font-size:13px;font-weight:600;color:var(--ink-4);margin:0 0 22px} .doc .lead{font-size:15px;line-height:1.75;font-weight:500;color:var(--ink-2);margin:0 0 18px} .doc h2{font-size:18px;font-weight:800;letter-spacing:-0.035em;line-height:1.45;margin:40px 0 12px;scroll-margin-top:72px} .doc h3{font-size:15px;font-weight:800;letter-spacing:-0.02em;margin:24px 0 8px} .doc p,.doc li{font-size:14.5px;line-height:1.8;font-weight:500;color:var(--ink-2)} .doc p{margin:0 0 12px} .doc ul,.doc ol{margin:0 0 12px;padding-left:20px} .doc li{margin-bottom:6px} .doc strong{font-weight:800;color:var(--ink)} .doc a.ln{font-weight:700;border-bottom:1.5px solid var(--ink-5)} .doc a.ln:hover{border-bottom-color:var(--ink)} .kv{background:var(--card);border-radius:var(--r-md);padding:2px 18px;margin:0 0 12px} .kv > h3{margin:16px 0 2px} .kv dl{margin:0} .kv dl > div{display:grid;grid-template-columns:82px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2)} .kv dl > div:last-child{border-bottom:0} .kv dt{font-size:12.5px;font-weight:800;color:var(--ink-3);line-height:1.65} .kv dd{margin:0;font-size:14px;line-height:1.65;font-weight:500;color:var(--ink-2)} .sum{background:var(--yel-wash);border:1.5px solid var(--yel);border-radius:var(--r-md);padding:4px 18px;margin:0 0 20px} .sum dl > div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid #F5E6B4} .sum dl > div:last-child{border-bottom:0} .sum dl{margin:0} .sum dt{font-size:13px;font-weight:800;color:var(--ink)} .sum dd{margin:0;font-size:13.5px;line-height:1.6;font-weight:600;color:var(--ink-2)} .toc{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 6px} .toc a{font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:999px;background:#F0ECE3;color:var(--ink-2)} .toc a:hover{background:var(--yel-soft)} .doc ol.art{list-style:none;padding:0;counter-reset:a} .doc ol.art > li{counter-increment:a;position:relative;padding-left:26px} .doc ol.art > li::before{content:counter(a) ".";position:absolute;left:2px;font-weight:800;color:var(--ink-3)} mark.todo{background:var(--yel);color:var(--ink);font-weight:800;padding:1px 6px;border-radius:4px;font-size:.92em} /* ── 공통 푸터 ── */ .site-foot{margin-top:48px;padding:24px 0 36px;border-top:1px solid var(--line)} .site-foot .fb{display:block;margin-bottom:12px;opacity:.5} .site-foot .fb img{height:19px;width:auto;display:block} .site-foot p{font-size:12px;line-height:1.8;font-weight:500;color:var(--ink-4);margin:0} .site-foot .links{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 10px} .site-foot .links a{font-size:12.5px;font-weight:700;color:var(--ink-3)} .site-foot .links a b{font-weight:800;color:var(--ink-2)} .site-foot .links a:hover{color:var(--ink)} /* ── 버튼 ── */ .btn{ display:inline-flex;align-items:center;justify-content:center; width:100%;height:56px;border:0;border-radius:var(--r-md); background:var(--yel);color:var(--ink);font-size:17px;font-weight:800; letter-spacing:-0.025em;cursor:pointer; transition:background .15s, transform .12s var(--spring); } .btn:hover{background:var(--yel-deep)} .btn:active{transform:scale(.975)} .btn:disabled{background:#EFEBE2;color:var(--ink-5);cursor:default;transform:none} .btn.dark{background:var(--ink);color:#fff} .btn.dark:hover{background:#000} .btn.ghost{background:none;border:1.5px solid var(--line);color:var(--ink-3);height:52px;font-size:15px;font-weight:700} .btn.ghost:hover{background:var(--yel-wash)} /* ── 공유 카드 미리보기 (share.js 가 만든다) ── 폰에서는 아래에서 올라오는 시트, PC 에서는 가운데 창 */ html.ss-lock{overflow:hidden} .share-sheet{padding:0;border:0;background:var(--cream);color:var(--ink); width:100%;max-width:100%;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0;overflow:auto} .share-sheet::backdrop{background:rgba(23,24,26,.55)} .share-sheet[open]{animation:riseIn .42s var(--spring) both} .ss-in{max-width:460px;margin:0 auto;padding:18px 24px calc(22px + var(--safe))} .ss-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px} .ss-head h2{font-size:18px;font-weight:800;letter-spacing:-0.03em;margin:0} .ss-x{width:40px;height:40px;margin-right:-8px;border:0;background:none;border-radius:10px;color:var(--ink-3); display:flex;align-items:center;justify-content:center;cursor:pointer} .ss-x:hover{background:var(--line-2);color:var(--ink)} .ss-img{position:relative;aspect-ratio:1;max-width:340px;margin:0 auto;border-radius:18px;overflow:hidden; background:var(--yel-soft);box-shadow:0 6px 24px rgba(23,24,26,.12)} .ss-img img{display:block;width:100%;height:100%;-webkit-touch-callout:default} .ss-img.loading::after{content:'카드를 그리는 중…';position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:14px;font-weight:700;color:var(--ink-3)} .ss-note{font-size:12.5px;line-height:1.6;font-weight:500;color:var(--ink-3);text-align:center;margin:14px 0 14px} .ss-btns{display:flex;flex-direction:column;gap:8px} .ss-btns .btn{height:52px;font-size:16px} .ss-btns .btn[hidden]{display:none} .ss-msg{min-height:20px;margin:10px 0 0;text-align:center;font-size:13px;font-weight:700;color:var(--ink-2);word-break:break-all} @media (min-width:640px){ .share-sheet{width:440px;max-width:calc(100% - 32px);margin:auto;border-radius:24px} .ss-in{padding:22px 28px 26px} .share-sheet[open]{animation:popIn .32s var(--spring) both} } /* ═══════════════════════════════════════════════════════════════ 반응형 — 폰이 기준이고, 넓은 화면에서만 아래를 덧입힌다 ~639px 폰. 위의 스타일 그대로 (460px 한 줄) 640~959px 태블릿. 폭을 넓히고, 옆으로 밀던 카드는 두 줄로 편다 (마우스로는 옆으로 못 민다) 960px~ PC. 하단 탭 바 대신 헤더에 메뉴, 넓은 화면에 여러 칸으로 놓는다 글(문서·가이드)은 읽기 좋은 폭(760px)으로 가운데에 둔다 각 페이지만의 PC 배치는 그 페이지의