:root {
  --ink: #18201c;
  --muted: #697069;
  --paper: #f4f1ea;
  --card: #fffdf8;
  --line: #d9d5cc;
  --green: #1d5845;
  --green-2: #2f7660;
  --lime: #b9cf72;
  --gold: #c68a2d;
  --coral: #c95c45;
  --rose: #f1d5ce;
  --navy: #1f3443;
  --shadow: 0 16px 44px rgba(31, 52, 67, .09);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 86% 2%, rgba(185,207,114,.22), transparent 22rem),
    linear-gradient(180deg, #f8f6f1 0, var(--paper) 40rem);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  line-height: 1.55;
  word-break: keep-all;
}
button, a { font: inherit; }
a { color: inherit; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; background: #fff; padding: 10px 14px; }
.skip-link:focus { top: 12px; }
.topbar {
  height: 66px; padding: 0 clamp(20px, 4vw, 68px); display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 50; background: rgba(248,246,241,.88); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(24,32,28,.09);
}
.brand { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.brand-mark { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:white; font-family:Georgia,serif; font-size:16px; }
.topbar nav { display:flex; gap:28px; }
.topbar nav a { text-decoration:none; color:#515852; font-size:13px; font-weight:650; }
.topbar nav a:hover { color:var(--green); }
.status-dot { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.status-dot i { width:7px; height:7px; border-radius:50%; background:#54a87c; box-shadow:0 0 0 4px rgba(84,168,124,.13); }
main { overflow:hidden; }
.hero { min-height: 720px; padding: 78px clamp(20px, 6vw, 98px) 0; display:grid; grid-template-columns:minmax(0, 1.03fr) minmax(360px,.97fr); position:relative; max-width:1500px; margin:0 auto; }
.hero-copy { padding: 54px 0 110px; position:relative; z-index:2; }
.eyebrow { margin:0 0 18px; color:var(--green-2); font-size:11px; font-weight:850; letter-spacing:.19em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:24px; font-family:Georgia, "Noto Serif KR", serif; font-size:clamp(51px,6.2vw,92px); line-height:1.02; letter-spacing:-.055em; font-weight:500; }
h1 em { color:var(--green); font-style:normal; }
.hero-lead { max-width:640px; font-size:clamp(17px,1.6vw,22px); line-height:1.75; color:#4f5751; }
.hero-lead strong { color:var(--ink); box-shadow:inset 0 -.42em rgba(185,207,114,.42); }
.hero-actions { display:flex; align-items:center; gap:22px; margin-top:34px; }
.primary-button { display:inline-flex; align-items:center; min-height:48px; padding:0 22px; border-radius:999px; background:var(--green); color:#fff; text-decoration:none; font-weight:750; font-size:14px; box-shadow:0 10px 24px rgba(29,88,69,.22); }
.text-link { font-size:13px; color:var(--muted); font-weight:700; }
.hero-visual { position:relative; min-height:580px; align-self:center; }
.orbit { position:absolute; border:1px solid rgba(29,88,69,.18); border-radius:50%; left:50%; top:46%; transform:translate(-50%,-50%); }
.orbit-a { width:470px; height:470px; }
.orbit-b { width:620px; height:620px; border-style:dashed; opacity:.65; }
.core { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:270px; height:270px; padding:56px 34px; border-radius:50%; background:var(--green); color:#fff; text-align:center; box-shadow:0 28px 70px rgba(29,88,69,.27); }
.core span,.core small { display:block; font-size:11px; color:rgba(255,255,255,.65); letter-spacing:.1em; }
.core strong { display:block; margin:11px 0; font-family:Georgia,"Noto Serif KR",serif; font-weight:500; font-size:29px; line-height:1.25; }
.satellite { position:absolute; min-width:142px; padding:14px 16px; border:1px solid rgba(24,32,28,.1); border-radius:16px; background:rgba(255,253,248,.92); box-shadow:var(--shadow); }
.satellite b,.satellite span { display:block; }
.satellite b { font-family:Georgia,serif; color:var(--green); font-size:25px; }
.satellite span { font-size:11px; color:var(--muted); }
.sat-a { left:3%; top:16%; }
.sat-b { right:-2%; top:35%; }
.sat-c { left:8%; bottom:5%; }
.kpi-strip { position:absolute; left:clamp(20px,6vw,98px); right:clamp(20px,6vw,98px); bottom:0; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:18px 18px 0 0; background:rgba(255,253,248,.86); backdrop-filter:blur(12px); overflow:hidden; }
.kpi-strip div { padding:20px 24px; border-right:1px solid var(--line); }
.kpi-strip div:last-child { border:0; }
.kpi-strip span,.kpi-strip small { display:block; color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.kpi-strip strong { display:inline-block; margin:4px 5px 0 0; font-family:Georgia,serif; font-size:30px; font-weight:500; color:var(--green); }
.section { max-width:1320px; margin:0 auto; padding:112px clamp(20px,4vw,48px); }
.section-heading { margin-bottom:42px; display:flex; align-items:end; justify-content:space-between; gap:30px; }
.section-heading h2 { margin:0; font-family:Georgia,"Noto Serif KR",serif; font-size:clamp(35px,4vw,58px); line-height:1.1; letter-spacing:-.045em; font-weight:500; }
.section-heading > p { max-width:440px; color:var(--muted); font-size:14px; text-align:right; }
.priority-section { max-width:none; padding-left:max(clamp(20px,4vw,48px), calc((100vw - 1224px)/2)); padding-right:max(clamp(20px,4vw,48px), calc((100vw - 1224px)/2)); background:#e9e6df; }
.priority-grid { display:grid; grid-template-columns:1.08fr .96fr .96fr; gap:16px; }
.priority-card { min-height:440px; padding:30px; display:flex; flex-direction:column; border:1px solid rgba(24,32,28,.1); border-radius:var(--radius); background:var(--card); box-shadow:0 8px 24px rgba(31,52,67,.05); }
.priority-card.priority-main { background:var(--navy); color:#fff; }
.priority-number { align-self:flex-end; width:48px; height:48px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-family:Georgia,serif; opacity:.55; }
.priority-label { margin:22px 0 8px; color:var(--green-2); font-size:11px; font-weight:800; letter-spacing:.13em; }
.priority-main .priority-label { color:var(--lime); }
.priority-card h3 { font-family:Georgia,"Noto Serif KR",serif; font-size:clamp(24px,2.5vw,36px); line-height:1.25; font-weight:500; letter-spacing:-.035em; }
.priority-card > p:not(.priority-label) { color:var(--muted); font-size:14px; line-height:1.75; }
.priority-main > p:not(.priority-label) { color:rgba(255,255,255,.68); }
.priority-card h3 strong { color:var(--green); font-weight:650; }
.priority-main h3 strong { color:var(--lime); }
.metric-line { margin-top:auto; padding:14px 0; display:flex; align-items:end; justify-content:space-between; border-top:1px solid rgba(105,112,105,.25); }
.metric-line span { font-size:11px; color:var(--muted); }
.metric-line b { color:var(--green); font-family:Georgia,serif; font-size:30px; }
.priority-main .metric-line b { color:var(--lime); }
.decision { padding:15px; border-radius:12px; background:#f1eee7; }
.priority-main .decision { background:rgba(255,255,255,.08); }
.decision span { display:block; margin-bottom:4px; color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.1em; }
.decision b { display:block; font-size:13px; line-height:1.55; }
.toggle-group { display:flex; padding:4px; border:1px solid var(--line); background:#ebe8e1; border-radius:999px; }
.toggle { border:0; padding:9px 15px; border-radius:999px; background:transparent; color:var(--muted); font-size:12px; cursor:pointer; }
.toggle.active { background:var(--card); color:var(--ink); font-weight:750; box-shadow:0 3px 12px rgba(24,32,28,.08); }
.theme-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:46px; }
.theme-chart { min-height:500px; }
.theme-row { display:grid; grid-template-columns:190px minmax(180px,1fr) 70px; align-items:center; gap:16px; margin-bottom:18px; }
.theme-name { font-size:13px; font-weight:700; }
.theme-track { height:24px; overflow:hidden; border-radius:7px; background:#e8e5dd; position:relative; }
.theme-fill { height:100%; min-width:3px; border-radius:7px; background:linear-gradient(90deg,var(--green),#6d9d6e); transition:width .45s ease; }
.theme-row.negative .theme-fill { background:linear-gradient(90deg,var(--coral),#e39a78); }
.theme-value { font-family:Georgia,serif; font-size:18px; text-align:right; }
.reading-guide { padding:28px; border-radius:var(--radius); background:var(--green); color:#fff; align-self:start; position:sticky; top:90px; }
.reading-guide .eyebrow { color:var(--lime); }
.reading-guide h3 { font-family:Georgia,"Noto Serif KR",serif; font-size:25px; line-height:1.35; font-weight:500; }
.reading-guide ul { margin:24px 0; padding:0; list-style:none; }
.reading-guide li { padding:13px 0; border-top:1px solid rgba(255,255,255,.15); }
.reading-guide li b,.reading-guide li span { display:block; }
.reading-guide li b { font-size:13px; }
.reading-guide li span { color:rgba(255,255,255,.58); font-size:11px; }
.mini-note { color:var(--muted); font-size:11px; line-height:1.7; }
.reading-guide .mini-note { color:rgba(255,255,255,.55); }
.word-section { max-width:none; background:var(--navy); color:#fff; padding-left:max(clamp(20px,4vw,48px), calc((100vw - 1224px)/2)); padding-right:max(clamp(20px,4vw,48px), calc((100vw - 1224px)/2)); }
.word-section .section-heading > p,.word-section .mini-note { color:rgba(255,255,255,.53); }
.word-section .toggle-group { border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.06); }
.word-section .toggle { color:rgba(255,255,255,.55); }
.word-section .toggle.active { color:var(--ink); }
.word-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; }
.word-cloud { min-height:430px; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:10px 17px; padding:30px; border:1px solid rgba(255,255,255,.11); border-radius:var(--radius); background:radial-gradient(circle at center,rgba(185,207,114,.1),transparent 55%); }
.word { border:0; padding:0; background:transparent; color:#fff; cursor:default; font-weight:650; line-height:1; opacity:calc(.48 + var(--weight)*.52); font-size:calc(12px + var(--weight)*30px); }
.word:nth-child(4n+1) { color:var(--lime); }
.word:nth-child(5n+2) { color:#ebc479; }
.phrase-panel { padding:28px; border-radius:var(--radius); background:#f3efe5; color:var(--ink); }
.phrase-panel h3 { font-family:Georgia,"Noto Serif KR",serif; font-size:27px; font-weight:500; }
.phrase-panel ol { margin:20px 0 25px; padding:0; list-style:none; counter-reset:phrases; }
.phrase-panel li { counter-increment:phrases; display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:13px; }
.phrase-panel li::before { content:counter(phrases,decimal-leading-zero); color:var(--green-2); font-family:Georgia,serif; }
.phrase-panel li b { margin-left:auto; color:var(--muted); font-size:11px; }
.product-tabs { display:flex; gap:8px; margin:0 0 18px; overflow-x:auto; padding-bottom:5px; scrollbar-width:thin; }
.product-tab { flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:10px 15px; background:var(--card); color:var(--muted); font-size:12px; cursor:pointer; }
.product-tab.active { background:var(--green); color:#fff; border-color:var(--green); }
.product-detail { min-height:390px; padding:34px; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); }
.product-headline .product-role { display:inline-block; padding:6px 10px; border-radius:999px; background:#e8efdd; color:var(--green); font-size:11px; font-weight:800; }
.product-headline h3 { margin:18px 0 14px; font-family:Georgia,"Noto Serif KR",serif; font-size:36px; line-height:1.23; font-weight:500; }
.product-headline > p { color:var(--muted); }
.product-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:28px; }
.product-stats div { padding:15px; border-radius:12px; background:#f1eee8; }
.product-stats span,.product-stats b { display:block; }
.product-stats span { font-size:10px; color:var(--muted); }
.product-stats b { margin-top:3px; font-family:Georgia,serif; color:var(--green); font-size:22px; }
.product-signals { display:grid; gap:12px; }
.signal-card { padding:17px 18px; border-radius:14px; border:1px solid var(--line); }
.signal-card span { display:block; margin-bottom:5px; font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--green-2); }
.signal-card b { display:block; font-size:13px; line-height:1.6; }
.signal-card.caution { background:#fff6ee; border-color:#eed1b3; }
.signal-card.caution span { color:var(--coral); }
.mini-theme { margin-top:2px; }
.mini-theme-line { display:grid; grid-template-columns:125px 1fr 48px; gap:10px; align-items:center; margin:8px 0; font-size:11px; }
.mini-theme-track { height:7px; border-radius:10px; background:#e6e2da; overflow:hidden; }
.mini-theme-track i { display:block; height:100%; border-radius:10px; background:var(--green-2); }
.table-wrap { margin-top:18px; overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:var(--card); }
table { width:100%; min-width:780px; border-collapse:collapse; }
th,td { padding:15px 17px; border-bottom:1px solid var(--line); text-align:left; font-size:12px; }
th { color:var(--muted); font-size:10px; letter-spacing:.05em; background:#efede7; }
td:first-child { font-weight:750; }
.badge-risk { display:inline-block; padding:5px 8px; border-radius:7px; background:var(--rose); color:#8f3d2f; font-weight:750; }
.badge-safe { display:inline-block; padding:5px 8px; border-radius:7px; background:#e2ecd8; color:var(--green); font-weight:750; }
.pdp-section { max-width:none; background:#1d5845; color:#fff; padding-left:max(clamp(20px,4vw,48px), calc((100vw - 1224px)/2)); padding-right:max(clamp(20px,4vw,48px), calc((100vw - 1224px)/2)); }
.section-heading.light .eyebrow { color:var(--lime); }
.section-heading.light > p { color:rgba(255,255,255,.56); }
.action-flow { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); }
.action-flow article { min-height:330px; padding:24px 20px; border-right:1px solid rgba(255,255,255,.18); }
.action-flow article:last-child { border:0; }
.action-flow article > span { display:grid; width:38px; height:38px; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:50%; font-family:Georgia,serif; }
.action-flow article > div { margin-top:54px; }
.action-flow p { color:var(--lime); font-size:10px; font-weight:800; letter-spacing:.13em; }
.action-flow h3 { font-family:Georgia,"Noto Serif KR",serif; font-size:21px; line-height:1.4; font-weight:500; }
.action-flow ul { padding-left:16px; color:rgba(255,255,255,.65); font-size:12px; line-height:1.9; }
.guardrail-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; }
.guardrail-grid > div { padding:25px 28px; border-radius:16px; }
.guardrail-grid span { display:block; font-size:10px; font-weight:900; letter-spacing:.16em; }
.guardrail-grid h3 { margin:7px 0; font-size:18px; }
.guardrail-grid p { margin:0; font-size:13px; }
.do-card { background:var(--lime); color:var(--ink); }
.dont-card { background:#f0c8bb; color:#672f27; }
.method-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.method-grid > div { padding:27px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.method-grid span { color:var(--green-2); font-size:10px; font-weight:900; letter-spacing:.14em; }
.method-grid h3 { margin:12px 0 8px; font-family:Georgia,"Noto Serif KR",serif; font-size:24px; font-weight:500; }
.method-grid p { color:var(--muted); font-size:13px; }
details { margin-top:20px; padding:20px 24px; border:1px solid var(--line); border-radius:14px; background:#ebe8e0; }
summary { cursor:pointer; font-weight:750; font-size:13px; }
#guardrails { margin-top:16px; color:var(--muted); font-size:12px; }
#guardrails p { margin:6px 0; }
footer { padding:28px clamp(20px,6vw,98px); display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
footer p { margin:0; }
.loading { color:var(--muted); font-size:13px; }

@media (max-width: 1050px) {
  .topbar nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:32px; }
  .hero-copy { padding-bottom:30px; }
  .hero-visual { min-height:540px; }
  .kpi-strip { position:relative; left:auto; right:auto; bottom:auto; grid-column:1; margin-top:10px; }
  .priority-grid { grid-template-columns:1fr 1fr; }
  .priority-main { grid-column:1/-1; }
  .theme-layout,.word-layout { grid-template-columns:1fr; }
  .reading-guide { position:relative; top:auto; }
  .action-flow { grid-template-columns:repeat(2,1fr); }
  .action-flow article { border-bottom:1px solid rgba(255,255,255,.18); }
  .action-flow article:last-child { grid-column:1/-1; }
}
@media (max-width: 700px) {
  body { word-break:normal; }
  .topbar { height:58px; padding:0 17px; }
  .brand { font-size:10px; letter-spacing:.08em; }
  .status-dot { display:none; }
  .hero { min-height:auto; padding:38px 18px 0; }
  .hero-copy { padding:28px 0 14px; }
  h1 { font-size:48px; line-height:1.04; }
  .hero-lead { font-size:16px; line-height:1.72; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:13px; }
  .hero-visual { min-height:430px; transform:scale(.82); margin:-30px -48px; }
  .orbit-a { width:410px; height:410px; }
  .orbit-b { width:520px; height:520px; }
  .core { width:230px; height:230px; padding:45px 25px; }
  .core strong { font-size:25px; }
  .sat-a { left:1%; }
  .sat-b { right:0; }
  .sat-c { left:4%; bottom:2%; }
  .kpi-strip { grid-template-columns:1fr 1fr; border-radius:16px 16px 0 0; }
  .kpi-strip div { padding:15px 17px; border-bottom:1px solid var(--line); }
  .kpi-strip div:nth-child(2) { border-right:0; }
  .kpi-strip strong { font-size:25px; }
  .section { padding:78px 18px; }
  .section-heading { display:block; margin-bottom:28px; }
  .section-heading h2 { font-size:38px; }
  .section-heading > p { text-align:left; margin:13px 0 0; }
  .toggle-group { margin-top:18px; width:max-content; }
  .priority-section,.word-section,.pdp-section { padding-left:18px; padding-right:18px; }
  .priority-grid { grid-template-columns:1fr; }
  .priority-main { grid-column:auto; }
  .priority-card { min-height:390px; padding:25px; }
  .theme-row { grid-template-columns:120px minmax(100px,1fr) 55px; gap:9px; margin-bottom:16px; }
  .theme-name { font-size:11px; }
  .theme-value { font-size:15px; }
  .word-cloud { padding:20px 13px; gap:10px 13px; min-height:360px; }
  .word { font-size:calc(11px + var(--weight)*22px); }
  .product-detail { grid-template-columns:1fr; padding:24px; gap:25px; }
  .product-headline h3 { font-size:29px; }
  .product-stats { grid-template-columns:1fr 1fr; }
  .product-stats div:last-child { grid-column:1/-1; }
  .action-flow { grid-template-columns:1fr; }
  .action-flow article,.action-flow article:last-child { grid-column:auto; min-height:auto; border-right:0; padding:24px 4px; display:grid; grid-template-columns:50px 1fr; }
  .action-flow article > div { margin-top:0; }
  .guardrail-grid,.method-grid { grid-template-columns:1fr; }
  footer { display:block; padding:24px 18px; }
  footer p + p { margin-top:7px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .theme-fill { transition:none; }
}
