/* 사색 노트 — 페이지마다 고유 팔레트
   홈(돌빛 중립) · 블로그(숲·올리브) · 시황(신문 지면) · 대시보드(남색) · 분석 도구(밤하늘, 항상 어두움) · 방명록(편지지) */
:root{
  color-scheme:light;
  --bg:#F1F2F0; --surface:#FFFFFF; --ink:#1B2026; --muted:#5E6670; --line:#DCDFE2;
  --accent:#3B4FBF; --accent-soft:#E4E7F8; --accent2:#C77A1E; --up:#1F7A4D; --down:#B23A3A;
  --c-blog:#4F7A2E; --c-market:#23407A; --c-dash:#1F4FD1; --c-tools:#2A3A78; --c-guest:#B4532A;
  --display:"Noto Serif KR","Apple SD Gothic Neo",serif;
  --body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#15181C; --surface:#1D2127; --ink:#E7E9EC; --muted:#9AA2AC; --line:#2E343C;
  --accent:#9AA8FF; --accent-soft:#262C48; --accent2:#E8A75A; --up:#5CC48E; --down:#F08080;
  --c-blog:#9CCB6E; --c-market:#9DB4E8; --c-dash:#7FA3FF; --c-tools:#8FB8FF; --c-guest:#E89A6E; color-scheme:dark}}

/* 블로그·글 보기: 숲·올리브 */
body[data-view="blog"],body[data-view="post"]{--bg:#EEF2E6; --surface:#FAFCF5; --ink:#1E2A1C; --muted:#5A6852; --line:#D3DCC6; --accent:#4F7A2E; --accent-soft:#DDE9CC; --accent2:#B5852A}
@media (prefers-color-scheme: dark){body[data-view="blog"],body[data-view="post"]{--bg:#141A12; --surface:#1C2419; --ink:#E4EBDC; --muted:#9AAA8E; --line:#2D3A28; --accent:#9CCB6E; --accent-soft:#26361D; --accent2:#D9AE5A}}

/* 시황·시황 글 보기: 신문 지면 (종이색 바탕, 남색 잉크, 호외는 빨강) */
body[data-view="market"],body[data-view="market-post"]{--bg:#F3F0E8; --surface:#FBFAF6; --ink:#1A2233; --muted:#5F6573; --line:#DDD8CB; --accent:#23407A; --accent-soft:#E3E7F0; --accent2:#B23A3A}
@media (prefers-color-scheme: dark){body[data-view="market"],body[data-view="market-post"]{--bg:#14161B; --surface:#1C1F26; --ink:#ECE8DE; --muted:#A09B8F; --line:#2F323A; --accent:#9DB4E8; --accent-soft:#232B40; --accent2:#F08A7A}}

/* 방명록: 편지지 (크림 바탕, 갈색 잉크, 테라코타) */
body[data-view="guestbook"]{--bg:#F6EFE3; --surface:#FFFBF4; --ink:#2B2420; --muted:#6E6258; --line:#E3D6C3; --accent:#B4532A; --accent-soft:#F3E0D2; --accent2:#6B7F3A}
@media (prefers-color-scheme: dark){body[data-view="guestbook"]{--bg:#1A1512; --surface:#231D19; --ink:#EFE6DA; --muted:#AA9C8E; --line:#3A3029; --accent:#E89A6E; --accent-soft:#3A2A21; --accent2:#B5C77E}}

/* 대시보드: 남색 */
body[data-view="dashboard"]{--bg:#EDF1F7; --surface:#FFFFFF; --ink:#14213A; --muted:#556480; --line:#D2DAE8; --accent:#1F4FD1; --accent-soft:#DCE5FA; --accent2:#D9822B}
@media (prefers-color-scheme: dark){body[data-view="dashboard"]{--bg:#0E1626; --surface:#152036; --ink:#E3E9F4; --muted:#8FA0BE; --line:#26344F; --accent:#7FA3FF; --accent-soft:#1E2D52; --accent2:#F0A35E}}

/* 분석 도구: 밤하늘 */
body[data-view="tools"]{--bg:#0B1020; --surface:#121A30; --ink:#E8ECF7; --muted:#8E9AB8; --line:#232E4C; --accent:#7CC4FF; --accent-soft:#17284A; --accent2:#FFB86B; --up:#6FDB9F; --down:#FF8A8A; color-scheme:dark;
  background-image:radial-gradient(1px 1px at 12% 18%,#ffffff99 50%,transparent 51%),radial-gradient(1px 1px at 68% 9%,#ffffff77 50%,transparent 51%),radial-gradient(1.5px 1.5px at 84% 32%,#ffffffaa 50%,transparent 51%),radial-gradient(1px 1px at 33% 41%,#ffffff66 50%,transparent 51%),radial-gradient(1px 1px at 52% 76%,#ffffff55 50%,transparent 51%),radial-gradient(1.5px 1.5px at 9% 70%,#ffffff88 50%,transparent 51%),radial-gradient(900px 500px at 80% -10%,#1B2B5A 0%,transparent 70%);
  background-attachment:fixed}

*{box-sizing:border-box}
html,body{margin:0}
body{background-color:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.65;transition:background-color .45s ease,color .45s ease;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

header{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:3px solid var(--accent);transition:background-color .45s ease,border-color .45s ease}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.logo{font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink);text-decoration:none}
.logo b{color:var(--accent)}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:6px;font-weight:500}
@media (max-width:480px){header .wrap{gap:8px} nav{gap:0} nav a{padding:6px 8px;font-size:14px}}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

main .wrap{padding-block:36px 64px;display:grid;gap:28px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
h1{font-size:clamp(26px,4vw,38px);line-height:1.3}
.hero{display:grid;gap:14px}
.lede{color:var(--muted);max-width:62ch;margin:0}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--accent);text-transform:uppercase}
.note{font-size:13px;color:var(--muted);border-left:3px solid var(--line);padding-left:10px;margin:0}
.page-head{display:grid;gap:8px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;min-width:0}

/* 홈 */
.spectrum{display:flex;height:6px;border-radius:3px;overflow:hidden;max-width:260px}
.spectrum span{flex:1}
.s-blog{background:var(--c-blog)} .s-market{background:var(--c-market)} .s-dash{background:var(--c-dash)} .s-tools{background:var(--c-tools)} .s-guest{background:var(--c-guest)}
.home-links{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.door{display:grid;gap:6px;text-decoration:none;color:var(--ink);border-radius:12px;padding:20px;border:1px solid var(--line);transition:transform .2s ease}
.door:hover{transform:translateY(-2px)}
.door strong{font-family:var(--display);font-size:19px}
.door span{color:var(--muted);font-size:14px}
.door small{font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.door.blog{background:color-mix(in srgb,var(--c-blog) 13%,var(--surface))}
.door.blog strong,.door.blog small{color:var(--c-blog)}
.door.market{background:color-mix(in srgb,var(--c-market) 9%,var(--surface))}
.door.market strong,.door.market small{color:var(--c-market)}
.door.dash{background:color-mix(in srgb,var(--c-dash) 11%,var(--surface))}
.door.dash strong,.door.dash small{color:var(--c-dash)}
.door.tools{background:linear-gradient(150deg,#101833 0%,#1E2E62 100%);border-color:#1E2E62;color:#E8ECF7}
.door.tools strong,.door.tools small{color:#9FD2FF}
.door.tools span{color:#AEB9D6}
.door.guest{background:color-mix(in srgb,var(--c-guest) 10%,var(--surface))}
.door.guest strong,.door.guest small{color:var(--c-guest)}

/* 블로그 목록 */
.post{display:grid;gap:10px;text-decoration:none;color:var(--ink);align-content:start}
.thumb{aspect-ratio:16/10;max-width:100%;border-radius:8px;overflow:hidden;background-size:cover;background-position:center}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.t0{background-image:linear-gradient(160deg,#A9C48A 0%,#F0E1B0 100%)}
.t1{background-image:linear-gradient(200deg,#2F4A2A 0%,#9DBB7A 100%)}
.t2{background-image:linear-gradient(120deg,#D8B26A 0%,#5E7F4A 100%)}
.post h3{font-size:17px;line-height:1.4}
.post:hover h3{color:var(--accent)}
.meta{font-family:var(--mono);font-size:12px;color:var(--muted)}
.tag{color:var(--accent2)}
.post p{margin:0;color:var(--muted);font-size:14px}

/* 시황 목록: 신문 지면처럼 날짜 + 제목 줄 */
.mlist{display:grid;max-width:760px}
.mmonth{font-size:15px;color:var(--muted);font-family:var(--mono);font-weight:500;letter-spacing:.04em;padding:22px 0 8px;border-bottom:2px solid var(--ink)}
.mmonth:first-child{padding-top:0}
.mrow{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.mrow:hover strong{color:var(--accent)}
.mdate{font-family:var(--mono);font-size:13px;color:var(--muted);padding-top:3px}
.mtext{display:grid;gap:4px;min-width:0}
.mtext strong{font-family:var(--display);font-size:17px;line-height:1.45;font-weight:700}
.mtext span{color:var(--muted);font-size:14px}
.mrow.extra{background:color-mix(in srgb,var(--accent2) 6%,transparent);margin-inline:-10px;padding-inline:10px;border-radius:6px}
.extra-badge{display:inline-block;font-family:var(--body);font-size:12px;font-weight:600;color:#fff;background:var(--accent2);padding:1px 7px;border-radius:4px;margin-right:8px;vertical-align:2px}
.article .tag.extra-badge{margin-right:0;vertical-align:0}

/* 글 보기 */
.back{color:var(--accent);text-decoration:none;font-size:14px;justify-self:start}
.article{max-width:68ch;display:grid;gap:4px;min-width:0}
.article header{position:static;background:none;border:0;display:grid;gap:10px;margin-bottom:18px}
.article .cover{border-radius:10px;margin-bottom:8px}
.article p,.article li{font-size:16.5px;line-height:1.85}
.article h2{font-size:22px;margin-top:28px}
.article h3{font-size:18px;margin-top:22px}
.article img{border-radius:8px;margin-block:10px}
.article blockquote{margin:16px 0;padding:6px 16px;border-left:3px solid var(--accent);color:var(--muted)}
.article a{color:var(--accent)}
.article pre{overflow-x:auto;background:var(--accent-soft);padding:12px;border-radius:8px}
.article .video{position:relative;aspect-ratio:16/9;max-width:100%;margin-block:14px;border-radius:10px;overflow:hidden;background:#000}
.article .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.article hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.article .table{overflow-x:auto;margin-block:14px}
.article table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
.article th,.article td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.article th{font-weight:600;color:var(--muted);font-size:13px;border-bottom:2px solid var(--ink)}

/* 대시보드 */
.kpi{display:grid;gap:6px}
.kpi .label{font-size:13px;color:var(--muted)}
.kpi .value{font-family:var(--mono);font-size:24px;font-variant-numeric:tabular-nums}
.kpi .value small{font-size:13px;color:var(--muted)}
.chip{justify-self:start;font-family:var(--mono);font-size:12px;padding:2px 8px;border-radius:999px;color:var(--muted);background:var(--accent-soft)}
.chip.up{color:var(--up);background:color-mix(in srgb,var(--up) 14%,transparent)}
.chip.down{color:var(--down);background:color-mix(in srgb,var(--down) 14%,transparent)}
.badge{font-family:var(--mono);font-size:11px;color:var(--accent2);margin-left:4px}
svg.spark{width:100%;height:44px;display:block}

/* 분석 도구 */
.tools-panel{display:grid;gap:14px}
body[data-view="tools"] .panel{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(4px)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar label{font-size:13px;color:var(--muted)}
select{font:inherit;padding:6px 10px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.chart-box{overflow-x:auto}
svg.chart{width:100%;min-width:520px;height:280px;display:block}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:14px;height:3px;vertical-align:middle;margin-right:6px;border-radius:2px}

/* 방명록 */
.gb-form{display:grid;gap:12px;max-width:680px}
.gb-form label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.gb-form input:not([type=checkbox]),.gb-form textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}
.gb-form textarea{resize:vertical;min-height:110px;line-height:1.7}
.gb-form input:focus-visible,.gb-form textarea:focus-visible,.gb-form button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gb-form .check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
.gb-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gb-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gb-count{font-family:var(--mono);font-size:12px;color:var(--muted)}
.gb-form button{font:inherit;font-weight:600;color:#fff;background:var(--accent);border:0;border-radius:8px;padding:10px 22px;cursor:pointer}
.gb-form button:disabled{opacity:.6;cursor:wait}
.gb-status{font-size:13px;color:var(--muted)}
.gb-list{display:grid;gap:12px;max-width:680px}
.gb-item{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:grid;gap:6px}
.gb-item strong{color:var(--ink);font-family:var(--body)}
.gb-item p{margin:0;white-space:normal;overflow-wrap:anywhere}
.gb-item.private{background:transparent;border-style:dashed}
.gb-item.private p{color:var(--muted);font-size:14px}
.gb-more{justify-self:start;font:inherit;font-size:14px;color:var(--accent);background:none;border:1px solid var(--line);border-radius:8px;padding:8px 16px;cursor:pointer}

footer{border-top:1px solid var(--line)}
footer .wrap{padding-block:18px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap}
.masthead{font-family:var(--mono);font-size:12px;letter-spacing:.01em}