/*
Author-Agent: claude claude-opus-5-5
Created-At: 2026-10-14T14:04:47+09:00
Updated-At: 2026-10-26T15:43:12+09:00
Updated-By: claude claude-opus-5-5 (10-26 날짜별 기록 .dnav·.dsum·.dc; 10-25 항목 해설 .ex)
Parent-Agent: none
[Project: nispark.com] 공용 스타일 — .ai_design.md v1.0.0(+회원·찜 시안 확장). index.php 인라인 스타일을 분리하고 회원·찜·항목 상세 화면을 더했다.
*/
:root{--ink:#000;--mute:#555;--line:rgba(0,0,0,.14);--paper:#fff;
  --gh:#dceeb1;--gh-d:#8fb33a;--gh-top:#c9e486;--hf:#c5b0f4;--hf-d:#7b5bd6;--ar:#f4ecd6;--ar-d:#b8913a;
  --nw:#c8e6cd;--nw-d:#3f9a52;--ph:#efd4d4;--ph-d:#c0605f;--ds:#f3c9b6;--ds-d:#c7663e;--sp:#c5b0f4;--sp-d:#7b5bd6}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Pretendard,sans-serif;background:var(--paper);color:var(--ink);font-variant-numeric:tabular-nums;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.clip{overflow-wrap:anywhere;min-width:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
/* 셸 */
.shell{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--line)}
.shell .wrap{display:flex;align-items:center;gap:12px;height:54px}
.wm{font-size:21px;font-weight:800;letter-spacing:-.04em;flex:none}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;border:1px solid #000;background:#fff;display:flex;align-items:center;gap:6px;transition:transform .12s cubic-bezier(.23,1,.32,1)}
.chip:active,.fav:active,.me:active{transform:scale(.97)}
.chip i{width:8px;height:8px;border-radius:50%;display:block}
.chip[aria-current=page]{background:#000;color:#fff}
.me{flex:none;font-size:13px;font-weight:700;padding:7px 13px;border-radius:999px;background:#f1f1ee;transition:transform .12s cubic-bezier(.23,1,.32,1)}
.me b{font-weight:800}
.me.on{background:#000;color:#fff}
/* 공통 라벨 */
.eb{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between;gap:8px;padding:0 0 10px;border-bottom:1px solid #000}
.eb span:last-child{color:var(--mute);font-weight:600;letter-spacing:.04em;text-transform:none}
/* 홈 */
.hero{padding:26px 0 8px}
.hero h1{font-size:clamp(40px,8.4vw,64px);font-weight:300;letter-spacing:-.04em;line-height:1.02}
.hero h1 b,.sec-h h1 b,.ledger-h h2 b,.mh h1 b,.auth h1 b{font-weight:800}
.lede{font-size:15px;color:#333;line-height:1.5;margin-top:10px;max-width:520px}
.top{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media(min-width:1000px){.top{grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:28px;align-items:start}}
.tm{position:relative;width:100%;height:min(118vw,560px);margin-top:10px}
@media(min-width:1000px){.tm{height:600px}}
.tm noscript a{display:block;padding:8px 0;border-bottom:1px solid #eee}
.tile{position:absolute;padding:2px}
.tile>a{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:12px;overflow:hidden;transition:filter .15s}
@media(hover:hover) and (pointer:fine){.tile>a:hover{filter:brightness(.96)}}
.tile .n{font-size:13px;font-weight:700;line-height:1.25}
.tile .k{font-size:13px;line-height:1.35;color:#222;margin-top:4px}
.tile .v{font-weight:800;letter-spacing:-.03em;line-height:1}
.links{margin-top:18px}
.links .eb{border-bottom:0;padding-bottom:6px}
.links-m{display:none}
@media(max-width:999px){.top .links:not(.links-m){display:none}.links-m{display:block}}
.link1{display:block;font-size:14px;line-height:1.5;padding:11px 12px;margin-top:6px;background:var(--ar)}
.link1 small{display:block;font-size:11.5px;color:var(--mute);margin-top:4px;font-weight:600}
/* 10-16 홈 「지금 급등」 — GitHub Trending 상위 3 */
.rise{margin-top:18px}
.rise .eb{border-bottom:0;padding-bottom:6px}
.rise1{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;margin-top:6px;background:var(--gh)}
.rise1 .rr{font-weight:800;font-size:13px}
.rise1 b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rise1 small{display:block;font-size:12px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.rise1 em{font-style:normal;font-weight:800;font-size:17px;letter-spacing:-.02em}
.rmore{display:inline-block;font-size:12px;font-weight:700;margin-top:8px;text-decoration:underline}
/* 10-16 자체광고 칸(niapp-ads) — 원장 카드와 같은 틀, 광고가 없으면 칸을 숨긴다 */
.cad.nad-empty,.cad:empty{display:none}
.cad .nad{display:flex;flex-direction:column;height:100%;min-height:220px;padding:16px 16px 18px;text-decoration:none;color:#000;background:#f6f5f1}
.cad .nad-l{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--mute)}
.cad .nad-i{width:100%;aspect-ratio:16/9;object-fit:cover;margin-top:12px}
.cad .nad-n{font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.03em;margin-top:auto;padding-top:22px}
.cad .nad-t{font-size:14px;line-height:1.55;color:#333;margin-top:8px}
.cad .nad-c{align-self:flex-start;margin-top:16px;font-size:13px;font-weight:800;padding:9px 16px;border-radius:999px;background:#000;color:#fff}
.cad .nad-bg{position:relative;background-size:cover;background-position:center;color:#fff;isolation:isolate}
.cad .nad-bg:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.78) 100%)}
.cad .nad-bg .nad-l{align-self:flex-start;color:#fff;background:rgba(0,0,0,.45);padding:4px 8px;border-radius:6px}
.cad .nad-bg .nad-t{color:#eee}
.cad .nad-bg .nad-c{background:#fff;color:#000}
.ledger-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:44px 0 12px}
.ledger-h h2{font-size:clamp(28px,5vw,40px);font-weight:300;letter-spacing:-.035em}
.ledger-h p{font-size:12px;color:var(--mute)}
.board{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding-bottom:20px}
@media(min-width:760px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.board{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:#fff;border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.card .hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:10px 12px 9px}
.card .hd h3{font-size:15px;font-weight:800;letter-spacing:-.01em}
.card .hd span{font-size:11px;font-weight:600;color:#333;text-align:right}
.card .bd{padding:2px 12px 6px;flex:1}
.card .more{display:block;font-size:12px;font-weight:700;padding:9px 12px;border-top:1px solid #ededed}
/* 원장 행 */
.it{display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #efefef;font-size:12.5px}
.it:last-child{border-bottom:0}
.it .r{font-weight:800;color:#777;font-size:11px}
.it .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.it .s{display:block;font-weight:400;color:#666;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it .v{font-weight:800;text-align:right}
.it .hb{grid-column:2/5;height:4px;background:#f1f1ee;border-radius:2px;margin-top:-2px}
.it .hb i,.tr .hb i{display:block;height:100%;border-radius:2px}
.it.d{grid-template-columns:44px minmax(0,1fr) auto}
.it .dt,.tr .dt{font-size:11px;color:#777;font-weight:700}
/* 찜 버튼 */
.fav{font:inherit;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid #000;background:#fff;color:#000;cursor:pointer;white-space:nowrap;display:inline-block;transition:transform .12s cubic-bezier(.23,1,.32,1)}
.fav[aria-pressed=true]{background:#000;color:#fff}
.fav.big{font-size:14px;padding:10px 18px}
.fav[disabled]{opacity:.5}
.ext{font-size:14px;font-weight:700;padding:10px 18px;border-radius:999px;background:#f1f1ee;display:inline-block}
/* 섹션 상세 */
.sec-h{padding:28px 0 14px;display:grid;gap:8px}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.tag i{width:12px;height:12px;border-radius:50%}
.sec-h h1{font-size:clamp(36px,7vw,60px);font-weight:300;letter-spacing:-.04em;line-height:1.02}
.sec-h p{font-size:14px;color:#333;max-width:640px;line-height:1.5}
.tbl{border-top:2px solid #000;margin-bottom:24px}
.sub-h{font-size:13px;font-weight:800;padding:22px 0 8px}
.tr{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #ececec}
.tr .r{font-size:12px;font-weight:800;color:#777}
.tr .t{font-size:14.5px;font-weight:700}
.tr .s{display:block;font-size:12.5px;font-weight:400;color:#444;margin-top:2px}
.tr .m{display:block;font-size:11.5px;font-weight:400;color:#777;margin-top:3px}
.tr .v{font-size:18px;font-weight:800;text-align:right;letter-spacing:-.02em}
.tr .v small{display:block;font-size:10.5px;font-weight:600;color:#777;letter-spacing:0}
.tr .hb{grid-column:2/5;height:5px;background:#f1f1ee;border-radius:2px}
.tr.d{grid-template-columns:54px minmax(0,1fr) auto}
.tr.d .dt{font-size:12px}
.back{display:block;width:max-content;font-size:13px;font-weight:700;padding:18px 0 0}
/* 항목 상세 */
.ih{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:10px 0 20px;border-bottom:2px solid #000;margin-top:10px}
@media(min-width:900px){.ih{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end}}
.ih h1{font-size:clamp(30px,6vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.ih h1 span{font-weight:300;display:block;font-size:.55em;letter-spacing:-.02em;margin-bottom:6px}
.ih .sum{font-size:17px;line-height:1.5;margin-top:12px;color:#222}
.ih .meta{font-size:12.5px;color:var(--mute);margin-top:10px}
.ih .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.stat .big{font-size:clamp(56px,11vw,96px);font-weight:800;letter-spacing:-.05em;line-height:.95}
.stat .big small{font-size:.32em;font-weight:600;margin-left:4px}
.stat .chg{font-size:14px;font-weight:700;margin-top:6px}
.chg em,.dv em{font-style:normal;padding:1px 6px;border-radius:2px}
.spark{width:100%;height:120px;margin-top:12px;display:block}
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:24px 0}
@media(min-width:900px){.cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.h3{font-size:13px;font-weight:800;padding-bottom:8px;border-bottom:1px solid #000;display:flex;justify-content:space-between}
.h3 span{font-weight:600;color:var(--mute)}
.hist{width:100%;border-collapse:collapse;font-size:13px}
.hist td{padding:8px 0;border-bottom:1px solid #ececec}
.hist td:nth-child(n+2){text-align:right;font-weight:700}
.nwr{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:9px 0;border-bottom:1px solid #ececec;font-size:13.5px;font-weight:600}
.nwr .d{font-size:11px;color:#777;font-weight:700}
.nwr small{display:block;font-weight:400;color:#666;font-size:12px}
.none{font-size:13px;color:var(--mute);padding:12px 0}
/* 내 찜 */
.mh{padding:28px 0 14px}
.mh h1{font-size:clamp(36px,7vw,60px);font-weight:300;letter-spacing:-.04em;line-height:1.02}
.mh p{font-size:14px;color:#333;margin-top:8px}
.ft{display:flex;gap:6px;flex-wrap:wrap;padding:6px 0 14px}
.ft a{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid #ccc}
.ft a.on{border-color:#000;background:#000;color:#fff}
.fl{border-top:2px solid #000}
.fr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:12px 0;border-bottom:1px solid #ececec}
.fr .t{font-size:15px;font-weight:700}
.fr .t i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
.fr .s{display:block;font-size:12.5px;color:#444;font-weight:400;margin-top:2px}
.fr .ch{font-size:12.5px;color:#444}
.fr .ch b{color:#000}
.fr .dv{font-size:20px;font-weight:800;text-align:right;letter-spacing:-.02em;grid-row:1/3;grid-column:2}
.fr .dv small{display:block;font-size:11px;font-weight:600;color:#777;letter-spacing:0}
.up{background:var(--gh)}.dn{background:var(--ph)}.eq{background:#f1f1ee}
.acct{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;padding:22px 0;color:#444}
.acct a,.acct button{font:inherit;font-size:13px;font-weight:700;text-decoration:underline;background:none;border:0;cursor:pointer;color:#000}
/* 로그인·가입 */
.auth{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:32px 0 40px}
@media(min-width:900px){.auth{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
.auth h1{font-size:clamp(36px,7vw,56px);font-weight:300;letter-spacing:-.04em;line-height:1.02}
.auth .why{font-size:15px;line-height:1.6;color:#333;margin-top:12px;max-width:440px}
.auth .why li{margin-left:18px}
.form{max-width:420px;width:100%}
.tabs{display:flex;border-bottom:1px solid #000;margin-bottom:18px}
.tabs a{font-size:15px;font-weight:700;padding:10px 0;margin-right:22px;color:#888}
.tabs a.on{color:#000;box-shadow:inset 0 -3px 0 #000}
.form label{display:block;font-size:13px;font-weight:700;margin:12px 0 6px}
.form label small{font-weight:500;color:#777}
.form input[type=text],.form input[type=password],.form input[type=email]{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid #bbb;border-radius:8px;background:#fff}
.form input:focus{outline:2px solid #000;outline-offset:1px;border-color:#000}
.agree{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.5;margin-top:14px;color:#333}
.agree input{margin-top:3px;width:16px;height:16px;flex:none}
.agree a{text-decoration:underline}
.submit{display:block;width:100%;font:inherit;font-size:16px;font-weight:800;padding:14px;border-radius:999px;border:0;background:#000;color:#fff;margin-top:18px;cursor:pointer}
.or{display:flex;align-items:center;gap:10px;font-size:12px;color:#777;margin:20px 0 12px}
.or:before,.or:after{content:"";flex:1;height:1px;background:#ddd}
.sso{display:block;width:100%;font-size:15px;font-weight:700;padding:12px;border-radius:999px;border:1px solid #ccc;background:#fff;margin-top:8px;color:#777;text-align:center}
.sso small{font-weight:500;font-size:12px}
a.sso.on{color:#111;border-color:#111;text-decoration:none} /* 10-16 카카오·Google 로그인 활성 */
.me .nk{display:inline-block;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-weight:600;margin-right:6px} /* 10-16 머리글 닉네임(네이버 검수·로그인 표시) */
@media (max-width:640px){.me .nk{max-width:5em}}
.note{font-size:12px;color:#666;line-height:1.55;margin-top:14px}
.err{background:var(--ph);font-size:13.5px;line-height:1.5;padding:10px 12px;margin-bottom:8px}
.ok{background:var(--gh);font-size:13.5px;line-height:1.5;padding:10px 12px;margin-bottom:8px}
/* 문서 */
.doc{max-width:760px;padding:28px 0 40px;font-size:14.5px;line-height:1.7;color:#222}
.doc h1{font-size:clamp(30px,6vw,44px);font-weight:800;letter-spacing:-.03em;margin-bottom:14px}
.doc h2{font-size:17px;font-weight:800;margin:24px 0 6px}
.doc ul{padding-left:18px}
.doc table{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0}
.doc th,.doc td{border-top:1px solid #ddd;padding:7px 6px;text-align:left;vertical-align:top}
.doc th{background:#f6f5f1}
.empty{padding:40px 0;font-size:15px;color:#444}
footer{padding:24px 0 34px;font-size:11.5px;color:#666;line-height:1.6;border-top:1px solid var(--line);margin-top:10px}
footer a{text-decoration:underline}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 항목 상세 「니스파크 해설」(10-25 승인 시안 nispark_항목해설_preview_20261025.html) — 기존 토큰만, 새 색 없음 */
.ex{padding:26px 0 24px;border-bottom:2px solid #000;word-break:keep-all;overflow-wrap:anywhere}
.ex .flow{margin-top:14px;padding:12px 14px;background:#f7f7f5;border-left:3px solid var(--c);font-size:14px;font-weight:700;line-height:1.6}
.ex .flow small{display:block;font-size:11.5px;font-weight:600;color:var(--mute);margin-top:2px}
.ex .lead{font-size:17px;line-height:1.75;margin-top:18px;max-width:46em;color:#111}
.ex .pts{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);margin-top:18px;border-top:1px solid #efefef}
@media(min-width:900px){.ex .pts{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px}}
.ex .pts li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:6px;padding:11px 0;border-bottom:1px solid #efefef;font-size:14px;line-height:1.55;font-weight:600}
.ex .pts b{font-size:11px;font-weight:800;color:var(--mute);font-variant-numeric:tabular-nums;padding-top:3px}
.ex .two{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:22px}
@media(min-width:900px){.ex .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}}
.ex .two p,.ex .two li{font-size:14px;line-height:1.6;margin-top:10px}
.ex .two ul{list-style:none}
.ex .two li{padding-left:14px;position:relative}
.ex .two li:before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--c)}
.ex .note{font-size:11.5px;color:var(--mute);margin-top:18px;line-height:1.6}
.ex .note a{text-decoration:underline}

/* ── 날짜별 기록(/daily) — 10-26 승인 시안 nispark_날짜별기록_preview_20261026.html. 기존 토큰만, 새 색 없음 ── */
.dnav{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.dnav a,.dnav span{font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:999px;border:1px solid #000;white-space:nowrap}
.dnav span{border-color:#e6e6e6;color:var(--mute)}
.dsum{list-style:none;counter-reset:s;margin:22px 0 6px;border-top:2px solid #000;border-bottom:1px solid #efefef}
.dsum li{counter-increment:s;display:grid;grid-template-columns:30px minmax(0,1fr);padding:11px 0;border-top:1px solid #efefef;font-size:15px;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere}
.dsum li:first-child{border-top:0}
.dsum li:before{content:counter(s,decimal-leading-zero);font-size:11px;font-weight:800;color:var(--mute);padding-top:4px;font-variant-numeric:tabular-nums}
.sub-h.dh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sub-h.dh i{width:10px;height:10px;border-radius:50%;display:inline-block}
.sub-h.dh small{font-size:11.5px;font-weight:600;color:var(--mute)}
.dc{justify-self:end;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dc.up{background:var(--gh)} .dc.dn{background:var(--ph)} .dc.eq{background:#f1f1ee;color:var(--mute)}
.dc.nw{border:1px solid #000} .dc.na{color:var(--mute)}
.dnote{font-size:11.5px;color:var(--mute);margin:26px 0 8px;line-height:1.6}