:root{
  /* ── 화이트 톤 팔레트 (2026-07-07 웜크림→중립 전환) ── */
  /* 종이 면 */
  --paper:#f7f8fa;          /* 화이트 바탕 */
  --paper-2:#eef0f4;        /* hover wash */
  /* 잉크(텍스트) 3단 — 따뜻한 near-black 계열 */
  --ink:#141a24;
  --ink-2:#3b4658;
  --ink-3:#5c6980;          /* muted — 크림 위 대비 확보 위해 시안보다 반 톤 다운 */
  /* 면·선 (기존 토큰명 유지, 값만 웜으로) */
  --bg:var(--paper);
  --card:#ffffff;
  --line:rgba(20,26,36,.09);
  --line-2:rgba(20,26,36,.07);
  --line-strong:rgba(20,26,36,.16);   /* 헤어라인 룰선·경계 */
  /* 브랜드 블루 (신뢰 블루 유지) */
  --brand:#1f52c4;
  --brand-ink:#1a45a6;
  --brand-tint:#e9effa;
  --brand-tint-2:#dbe6f8;
  /* 보조 웜 악센트 — 컬러 dot 칩용 */
  --clay:#ad552e;   --clay-tint:#f6ebe1;   /* 테라코타 */
  --moss:#68713b;   --moss-tint:#edf0e0;   /* 모스 */
  /* 의미색 — 색=의미 고정(초록=검증/가동, 앰버=준비, 보라=오리지널), 틴트만 웜 종이에 맞춰 미세 조정 */
  --verify:#0b7a4d;  --verify-tint:#e7f2e8;
  --amber:#8a5f16;   --amber-tint:#f9f0da;
  --orig:#5f3fe0;    --orig-tint:#eeeafb;
  /* 그림자 — 부드러운 웜 3겹 */
  --shadow:
    0 1px 1px rgba(20,26,36,.03),
    0 2px 6px rgba(20,26,36,.05),
    0 16px 32px -14px rgba(20,26,36,.13);
  --shadow-sm:0 1px 2px rgba(20,26,36,.05);
  --shadow-card:
    0 1px 1px rgba(20,26,36,.03),
    0 2px 6px rgba(20,26,36,.05),
    0 12px 26px -14px rgba(20,26,36,.12);
  --shadow-btn:
    0 1px 2px rgba(18,44,104,.22),
    0 10px 22px -10px rgba(31,82,196,.5);
  --radius:16px;
  --radius-sm:12px;
  --tabbar-h:64px;
  /* 타입 스케일 — 고정 정수, 전 페이지 공유 (반픽셀 제거) */
  --fs-title:30px;
  --fs-h2:22px;
  --fs-card:17px;
  --fs-body:15px;
  --fs-note:13px;
  --fs-cap:12px;
  --fs-label:11px;
  --font:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,
         "Apple SD Gothic Neo",system-ui,"Segoe UI","Malgun Gothic",sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.6;
  letter-spacing:-.01em;
  /* 한국어 줄바꿈: 어절(단어) 단위로만 끊고, 불가피할 때만 문자 단위 */
  word-break:keep-all;
  overflow-wrap:break-word;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* 아주 옅은 종이결 (하이브리드 시안 — 절제) */
body::before{
  content:"";
  position:fixed;inset:0;z-index:80;pointer-events:none;
  opacity:0;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
::selection{background:var(--brand);color:#fff}
/* 제목=균형 줄바꿈(고아 글자 방지), 본문=예쁜 줄바꿈 */
h1,h2,h3,.section-title,.board-head h1{text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button,input{font:inherit}

/* 인라인 SVG 아이콘 공통 */
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}

/* 접근성: 키보드 포커스 링 */
a:focus-visible,button:focus-visible,.card:focus-visible{
  outline:2.5px solid var(--brand);outline-offset:2px;border-radius:12px}

.shell{max-width:1120px;margin:0 auto;padding:0 18px}

/* ── 상단 앱바 ── */
.appbar{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(247,248,250,.86);
  border-bottom:1px solid var(--line-strong);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
}
.appbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:62px;
}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
/* 하이브리드 브랜드 = 워드마크 + 작은 블루 점(.) — 사각 마크는 사용 안 함 */
.brand-mark{display:none}
.brand-name{display:flex;align-items:baseline;gap:8px;font-size:21px;font-weight:800;letter-spacing:-.04em}
.brand-name::after{content:".";color:var(--brand);font-weight:800;margin-left:-6px}
.beta{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:3px 8px;
  background:var(--brand-tint);
  color:var(--brand-ink);
  font-size:var(--fs-label);
  font-weight:800;
  letter-spacing:0;
}
.top-links{display:none;align-items:center;gap:6px;color:var(--ink-2);font-size:14px;font-weight:600}
.top-links a{padding:8px 12px;border-radius:999px;transition:background .15s ease,color .15s ease}
.top-links a:hover{color:var(--brand-ink)}
.top-links a[aria-current="page"]{background:var(--brand-tint);color:var(--brand-ink);font-weight:700}

/* ── 배지 (컬러 dot 칩 어휘 — 의미색 유지) ── */
.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  width:max-content;
  border-radius:999px;
  padding:4px 10px;
  font-size:var(--fs-label);
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  box-shadow:0 1px 2px rgba(20,26,36,.04);
}
.badge .ic{width:12px;height:12px;stroke-width:2.5;margin-left:-1px}
.badge-share{background:var(--brand-tint);color:#27519e}
.badge-orig{background:var(--orig-tint);color:var(--orig)}
.badge-verify{background:var(--verify-tint);color:var(--verify)}
.badge-live{background:var(--verify-tint);color:var(--verify)}
.badge-soon{background:var(--amber-tint);color:var(--amber)}

/* ── 버튼 ── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:42px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  padding:0 16px;
  background:transparent;
  color:var(--ink);
  font-size:14px;
  font-weight:650;
  letter-spacing:-.01em;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.btn:hover{border-color:var(--ink);background:var(--ink);color:var(--paper);box-shadow:0 6px 14px -6px rgba(20,26,36,.35)}
.btn-primary{border-color:var(--brand);background:var(--brand);color:#fff;box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff;box-shadow:0 2px 3px rgba(18,44,104,.24),0 14px 26px -10px rgba(31,82,196,.55)}
.btn-soft{border-color:var(--brand-tint-2);background:var(--brand-tint);color:var(--brand-ink);box-shadow:none}
.btn-soft:hover{background:var(--brand-tint-2);color:var(--brand-ink)}

/* ── 아이콘 컨테이너 (전 페이지 공통, 페이지별 정의 대체) ── */
.icon{
  display:grid;place-items:center;flex:none;
  width:48px;height:48px;border-radius:12px;
  background:var(--brand-tint);color:var(--brand-ink);
  box-shadow:inset 0 0 0 1px rgba(20,26,36,.05);
}
.icon .ic{width:24px;height:24px}

/* ── 카드 그리드/카드 (전 페이지 공통) — 웜 카드 + 3겹 그림자 ── */
.grid{display:grid;grid-template-columns:1fr;gap:14px}
.card{
  display:flex;flex-direction:column;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:13px;
  background:var(--card);
  box-shadow:var(--shadow-sm);
}
a.card{box-shadow:var(--shadow-card);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card h2,.card h3{margin:10px 0 5px;font-size:var(--fs-card);line-height:1.3;font-weight:750;letter-spacing:-.02em}
.card p{margin:0;color:var(--ink-2);font-size:var(--fs-note);font-weight:400;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto;padding-top:10px}
.card{position:relative;overflow:hidden}
.card .thumb{position:relative;height:64px;border-radius:12px 12px 0 0;margin:-13px -13px 10px;display:grid;place-items:center;overflow:hidden}
.card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px 12px 0 0}
.card .thumb .ic{width:34px;height:34px;color:#fff;opacity:.92}
.tbadge{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.92);border-radius:999px;padding:3px 9px;font-size:10.5px;font-weight:700;color:var(--ink-2);box-shadow:0 1px 2px rgba(20,26,36,.08)}
.tool-badge{display:inline-flex;margin-bottom:8px;font-size:10.5px;font-weight:700;color:var(--brand-ink);background:var(--brand-tint);border-radius:999px;padding:3px 9px}
.runlink{display:inline-flex;margin-top:8px;font-size:12px;font-weight:700;color:var(--brand-ink);text-decoration:none}
@media (hover:hover){
  a.card:hover{border-color:rgba(20,26,36,.24);transform:translateY(-3px);
    box-shadow:0 1px 2px rgba(20,26,36,.04),0 6px 14px rgba(20,26,36,.06),0 28px 48px -18px rgba(20,26,36,.2)}
  a.card:active{transform:translateY(0)}
}

/* 준비 중 카드 — 라이브 카드와 시각적으로 구분(점선·뮤트) */
.placeholder-card{background:transparent;border:1.5px dashed var(--line-strong);box-shadow:none}
.placeholder-card .icon{background:transparent;border:1.5px dashed var(--line-strong);color:var(--ink-3);box-shadow:none}
.placeholder-card h2,.placeholder-card h3{color:var(--ink-2)}
.placeholder-card p{color:var(--ink-3)}

/* ── 섹션 / 게시판 헤더 (공통) — 에디토리얼 타이포 ── */
.section{padding-top:32px}
.section-title{margin:0 0 12px;font-size:var(--fs-h2);line-height:1.22;font-weight:800;letter-spacing:-.03em}
.board{padding-top:32px}
.board-head{display:grid;gap:8px;margin-bottom:18px}
.board-head h1{margin:0;font-size:clamp(30px,4.5vw,40px);line-height:1.12;font-weight:800;letter-spacing:-.04em}
.board-head p{max-width:640px;margin:0;color:var(--ink-2);font-size:var(--fs-body);font-weight:400;line-height:1.7}

/* ── 신뢰 라인 ── */
.trust-line{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--verify);
  font-size:var(--fs-cap);
  font-weight:600;
}
.trust-line .ic{width:15px;height:15px;stroke-width:2.4}

/* ── 푸터 — 절제된 작은 마감 ── */
.site-footer{padding-top:34px}
.footer-box{display:grid;gap:14px;border-top:1px solid var(--line-strong);padding-top:20px;color:var(--ink-3);font-size:var(--fs-cap);font-weight:400}
.footer-links{display:flex;flex-wrap:wrap;gap:14px}
.footer-links a{color:var(--ink-2);font-weight:600;border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:color .15s ease,border-color .15s ease}
.footer-links a:hover{color:var(--brand);border-color:var(--brand)}

/* ── 하단 탭바 ── */
.tabbar{
  position:fixed;
  right:0;
  bottom:0;
  left:0;
  z-index:40;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding:0 max(10px,env(safe-area-inset-left)) env(safe-area-inset-bottom) max(10px,env(safe-area-inset-right));
  background:rgba(255,255,255,.92);
  border-top:1px solid var(--line-strong);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
.tabbar-inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:430px;
  height:var(--tabbar-h);
  margin:0 auto;
}
.tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:var(--ink-3);
  font-size:var(--fs-label);
  font-weight:700;
}
.tab-icon{display:grid;place-items:center}
.tab-icon .ic{width:23px;height:23px;stroke-width:1.7}
.tab[aria-current="page"],
.tab.is-active{color:var(--brand)}

@media (min-width:760px){
  .shell{padding:0 32px}
  .top-links{display:flex}
  /* 상단 메뉴가 뜨는 순간 하단 탭바는 숨긴다(태블릿 이중 메뉴 방지 — UX 감사) */
  .tabbar{display:none}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .grid{grid-template-columns:repeat(3,1fr)}
}