/* tokens: primitive -> semantic. Rules below use only semantic tokens. */
:root{
--p-ink-900:#1d1430;--p-ink-700:#3d3352;--p-ink-500:#62557a;--p-line-300:#ddd5e8;--p-line-200:#ece7f3;--p-paper:#f7f5fa;--p-white:#ffffff;
--p-rose-600:#d62e5c;--p-rose-700:#b8224b;--p-rose-800:#9a1b3f;--p-rose-50:#fdeef2;--p-violet-700:#5b2a9e;--p-violet-50:#f1ecf8;
--p-green-700:#1f7a4a;--p-green-50:#e8f5ee;--p-red-700:#b3261e;--p-red-50:#fbeceb;--p-red-100:#f6d6d3;
--surface-page:var(--p-paper);--surface-card:var(--p-white);--surface-selected:var(--p-violet-50);--surface-hover:var(--p-paper);
--text:var(--p-ink-900);--text-2:var(--p-ink-700);--text-muted:var(--p-ink-500);--text-on-primary:var(--p-white);
--border:var(--p-line-300);--border-soft:var(--p-line-200);--border-strong:var(--p-ink-500);
--link:var(--p-violet-700);--brand:var(--p-rose-600);
--primary-bg:var(--p-rose-600);--primary-hover:var(--p-rose-700);--primary-active:var(--p-rose-800);
--danger-text:var(--p-red-700);--danger-bg-hover:var(--p-red-50);--danger-border:var(--p-red-100);
--pin-bg:var(--p-rose-50);--fc-ink:color-mix(in oklab,var(--fc,var(--text)) 82%,black);--ok-text:var(--p-green-700);--ok-bg:var(--p-green-50);--info-bg:var(--p-violet-50);--err-bg:var(--p-red-50);
--focus-ring:0 0 0 3px color-mix(in srgb,var(--p-violet-700) 40%,transparent);
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;
--r-sm:6px;--r-md:10px;--r-pill:999px;--hair:1px;--target:44px;--target-sm:36px;--underline-gap:3px;--dot:10px;--mark:12px;--rail:2px;--ring-w:2px;--nudge:4px;--field-min:110px;--wrap-side:72px;--col-who:140px;--col-when:90px;--col-n:64px;--col-latest:280px;
--t-xs:13px;--t-sm:14px;--t-body:16px;--t-lg:18px;--t-h2:20px;--t-display:40px;
--lh-tight:1.25;--lh-body:1.75;
--dur-fast:150ms;--dur-med:200ms;--ease-out:cubic-bezier(.16,1,.3,1);
--display:"Black Han Sans","Pretendard Variable",sans-serif;--sans:"Pretendard Variable",Pretendard,"Malgun Gothic","Noto Sans KR",sans-serif;
--measure:68ch;--wrap:1080px;--side:300px}
/* base = phone */
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--surface-page);color:var(--text);font:var(--t-body)/var(--lh-body) var(--sans);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-underline-offset:var(--underline-gap)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-sm)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-4)}
h1,h2,h3{margin:0;font-weight:800;line-height:var(--lh-tight);text-wrap:balance}
h2{font-size:var(--t-h2);margin-bottom:var(--s-3)}
p{margin:0 0 var(--s-3)}
.dim{color:var(--text-muted)}.small{font-size:var(--t-sm)}
/* header: same surfaces as the page, separated by a hairline */
.top{background:var(--surface-card);border-bottom:var(--hair) solid var(--border)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5);padding-top:var(--s-2);padding-bottom:var(--s-2)}
.mark{font:400 var(--t-h2)/1 var(--display);color:var(--text);text-decoration:none;display:inline-flex;gap:var(--s-2);align-items:baseline;min-height:var(--target);align-items:center}
.mark span{font:700 var(--t-sm)/1 var(--sans);color:var(--text-muted)}
.top nav{display:flex;gap:var(--s-1);order:3;flex-basis:100%}
.top nav a{display:inline-flex;align-items:center;min-height:var(--target);padding:0 var(--s-3);color:var(--text-2);font-weight:600;text-decoration:none;border-radius:var(--r-sm);transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.top nav a:hover{background:var(--surface-hover);color:var(--text)}
.top nav a:active{background:var(--surface-selected)}
.top nav a[aria-current]{background:var(--surface-selected);color:var(--link)}
.acct{margin-left:auto;display:flex;align-items:center;gap:var(--s-3)}
.acct form{margin:0}
main.wrap{padding-top:var(--s-6);padding-bottom:var(--s-7);min-height:60vh}
.foot{color:var(--text-muted);font-size:var(--t-xs);padding-bottom:var(--s-6)}
/* buttons: secondary (default), primary, danger; eight states */
.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--target);padding:0 var(--s-4);font:700 var(--t-body)/1 var(--sans);border-radius:var(--r-sm);border:var(--hair) solid var(--border);background:transparent;color:var(--text);cursor:pointer;text-decoration:none;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.btn:hover,button:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.btn:active,button:active{background:var(--surface-selected)}
.btn.primary,button.primary{background:var(--primary-bg);border-color:var(--primary-bg);color:var(--text-on-primary)}
.btn.primary:hover,button.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.primary:active,button.primary:active{background:var(--primary-active);border-color:var(--primary-active)}
button.danger{color:var(--danger-text);border-color:var(--danger-border)}
button.danger:hover{background:var(--danger-bg-hover);border-color:var(--danger-text)}
button.danger:active{background:var(--danger-border)}
button.quiet{min-height:var(--target-sm);padding:0 var(--s-3);font-size:var(--t-sm)}
button:disabled,.btn[aria-disabled=true]{opacity:.5;pointer-events:none}
button[aria-busy=true]{pointer-events:none}
button[aria-busy=true]::after{content:"";width:1em;height:1em;border-radius:50%;border:var(--ring-w) solid currentColor;border-right-color:transparent;animation:spin calc(var(--dur-med) * 3.5) linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
/* notices: full hairline border, the word carries the meaning */
.note{display:flex;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);border:var(--hair) solid var(--border);margin:0 0 var(--s-5)}
.note b{flex:none}
.note.ok{background:var(--ok-bg);color:var(--ok-text)}
.note.err{background:var(--err-bg);color:var(--text)}
.note.err b{color:var(--danger-text)}
.note.info{background:var(--info-bg)}
/* surfaces */
.panel{background:var(--surface-card);border:var(--hair) solid var(--border);border-radius:var(--r-md);padding:var(--s-5);margin-bottom:var(--s-5)}
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--s-6);align-items:start}
.cols.three{grid-template-areas:"a" "s" "f"}.cols.three>.ga{grid-area:a}.cols.three>.gs{grid-area:s}.cols.three>.gf{grid-area:f}
.side .panel{padding:var(--s-4) var(--s-5)}
.side h2{font-size:var(--t-sm);color:var(--text-muted);margin-bottom:var(--s-2)}
.prose{max-width:var(--measure)}
.empty{padding:var(--s-6);border:var(--hair) dashed var(--border);border-radius:var(--r-md);color:var(--text-muted);background:var(--surface-card)}
.chip{display:inline-flex;align-items:center;gap:var(--s-2);padding:0 var(--s-3);border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:700;line-height:1.9;border:var(--hair) solid var(--border);color:var(--text-2);background:var(--surface-card);white-space:nowrap}
.chip.open{color:var(--ok-text);background:var(--ok-bg)}
.chip.pin{color:var(--primary-active);background:var(--pin-bg)}
.chip.warn{color:var(--danger-text);background:var(--err-bg)}
a.chip{text-decoration:none}a.chip:hover{border-color:var(--border-strong)}
.dot{display:inline-block;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--fc,var(--text-muted));flex:none}
/* page heads: one thing leads, display >= 2.5x body */
.pagehead{margin:0 0 var(--s-5)}
.pagehead h1,.ptitle,.mast .tag{font-size:var(--t-display);font-weight:800;line-height:var(--lh-tight);margin:0 0 var(--s-2)}
.pagehead p{color:var(--text-muted);max-width:var(--measure);margin:0}
.headrow{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);align-items:flex-end;justify-content:space-between}
.crumbs{font-size:var(--t-sm);margin:0 0 var(--s-3);display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}
.crumbs a,.crumbs span{color:var(--text-muted)}
.crumbs>*+*::before{content:"/";display:inline-block;margin-right:var(--s-2);color:var(--border)}
.mast{margin:0 0 var(--s-5)}
.mast .tag{color:var(--fc-ink)}
.mast.person .tag,.mast.page .tag{color:var(--text)}
.mast h1{font-size:var(--t-lg);font-weight:600;color:var(--text-2);margin-bottom:var(--s-2)}
.mast .facts{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;color:var(--text-muted);margin:0}
.bio{font-size:var(--t-lg);color:var(--text-2);max-width:var(--measure);margin:var(--s-4) 0 0}
/* board index */
.bgroup{margin:0 0 var(--s-5)}
.bgroup h2{font-size:var(--t-sm);color:var(--text-muted);margin:0 0 var(--s-2)}
.blist{background:var(--surface-card);border:var(--hair) solid var(--border);border-radius:var(--r-md);overflow:hidden}
.brow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-4);align-items:center;padding:var(--s-4);border-top:var(--hair) solid var(--border-soft)}
.brow:first-child{border-top:0}
.bt{display:flex;flex-direction:column;min-width:0}
.bt a{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:700;font-size:var(--t-lg);color:var(--text);text-decoration:none}
.bt a:hover{color:var(--link);text-decoration:underline}
.bt p{margin:0;color:var(--text-muted);font-size:var(--t-sm)}
.bn{color:var(--text-muted);font-size:var(--t-sm);text-align:right;font-variant-numeric:tabular-nums}
.bl{grid-column:1/-1;display:grid;font-size:var(--t-xs);color:var(--text-muted);min-width:0}
.bl .lt{color:var(--text-2);font-size:var(--t-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.bl .lt:hover{color:var(--link);text-decoration:underline}
/* faction list */
.dir{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
.org{display:grid;gap:var(--s-1);padding:var(--s-4) var(--s-5);border-radius:var(--r-md);background:var(--surface-card);border:var(--hair) solid var(--border);color:var(--text);text-decoration:none;transition:border-color var(--dur-fast) var(--ease-out)}
.org:hover{border-color:var(--border-strong)}
.org .t{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:800;font-size:var(--t-h2);color:var(--fc-ink)}
.org .m{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center;color:var(--text-muted);font-size:var(--t-xs)}
/* post list */
.posts{list-style:none;margin:0;padding:0;background:var(--surface-card);border:var(--hair) solid var(--border);border-radius:var(--r-md);overflow:hidden}
.posts li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t c" "a w";gap:var(--s-1) var(--s-3);align-items:center;padding:var(--s-3) var(--s-4);border-top:var(--hair) solid var(--border-soft)}
.posts li:first-child{border-top:0}
.posts li.pinned{background:var(--surface-hover)}
.pt{grid-area:t;color:var(--text);text-decoration:none;font-weight:700;display:flex;gap:var(--s-2);align-items:center;min-width:0}
.pt span.tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt:hover{color:var(--link)}
.pt:hover .tt{text-decoration:underline}
.pm{color:var(--text-muted);font-size:var(--t-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm.a{grid-area:a}.pm.w{grid-area:w;text-align:right}
.pc{grid-area:c;color:var(--text-muted);font-size:var(--t-xs);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pager{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:var(--s-4) 0 0}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:var(--target);min-height:var(--target);border:var(--hair) solid var(--border);border-radius:var(--r-sm);background:var(--surface-card);text-decoration:none}
.pager a:hover{border-color:var(--border-strong)}
.pager span[aria-current]{background:var(--surface-selected);border-color:var(--link);color:var(--link);font-weight:800}
/* post */
.post{background:var(--surface-card);border:var(--hair) solid var(--border);border-radius:var(--r-md);padding:var(--s-5);margin:0 0 var(--s-6)}
.byline{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;color:var(--text-muted);font-size:var(--t-sm);margin:0 0 var(--s-4)}
.byline b{color:var(--text)}
.pbody{font-size:var(--t-body);line-height:1.85;max-width:var(--measure);padding-top:var(--s-4);border-top:var(--hair) solid var(--border-soft)}
.tools{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-4)}
.tools form{margin:0}
.is-hidden .pbody,.is-hidden .cbody{color:var(--text-muted)}
.comments>h2{font-size:var(--t-h2)}
.cmt{padding:var(--s-4) 0;border-top:var(--hair) solid var(--border)}
.cmt .byline{margin-bottom:var(--s-1)}
.cbody{max-width:var(--measure)}
.cform{margin-top:var(--s-4);padding-top:var(--s-1);border-top:var(--hair) solid var(--border)}
/* timeline: a rail drawn by the list, not a border on a box */
.life{list-style:none;margin:0;padding:0;position:relative}
.life li{position:relative;padding:0 0 var(--s-5) var(--s-6)}
.life li::before{content:"";position:absolute;left:calc((var(--mark) - var(--rail))/2);top:calc(var(--s-4) + var(--nudge));bottom:calc(-1 * var(--nudge));width:var(--rail);background:var(--border)}
.life li:last-child::before{display:none}
.life li::after{content:"";position:absolute;left:0;top:var(--s-2);width:var(--mark);height:var(--mark);border-radius:50%;background:var(--surface-card);box-shadow:inset 0 0 0 var(--ring-w) var(--brand)}
.life time{display:block;color:var(--text-muted);font-size:var(--t-xs)}
.life b{display:block}
.life p{color:var(--text-2);margin:var(--s-1) 0 0}
.ranks{list-style:none;margin:0;padding:0;counter-reset:r}
.ranks li{counter-increment:r;display:flex;gap:var(--s-3);padding:var(--s-2) 0;border-top:var(--hair) solid var(--border-soft)}
.ranks li:first-child{border-top:0}
.ranks li::before{content:counter(r);color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.plain{list-style:none;margin:0;padding:0}
.plain li{padding:var(--s-2) 0;border-top:var(--hair) solid var(--border-soft);display:flex;justify-content:space-between;gap:var(--s-3)}
.plain li:first-child{border-top:0}
.plain span{color:var(--text-muted);font-size:var(--t-sm);white-space:nowrap}
/* forms */
label,legend{display:block;margin:var(--s-4) 0 var(--s-2);color:var(--text-2);font-size:var(--t-sm);font-weight:700;padding:0}
input[type=text],input[type=password],textarea{width:100%;min-height:var(--target);background:var(--surface-card);border:var(--hair) solid var(--border);border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);font:inherit;color:inherit;transition:border-color var(--dur-fast) var(--ease-out)}
input[type=text]:hover,input[type=password]:hover,textarea:hover{border-color:var(--border-strong)}
input:focus-visible,textarea:focus-visible{border-color:var(--link)}
input:user-invalid,textarea:user-invalid{border-color:var(--danger-text)}
input:disabled,textarea:disabled{opacity:.5}
textarea{resize:vertical;min-height:var(--field-min)}
.hint{font-size:var(--t-xs);color:var(--text-muted);margin-top:var(--s-2)}
.chk{display:flex;gap:var(--s-3);align-items:center;margin:var(--s-2) 0;font-weight:500;color:var(--text);min-height:var(--target)}
.chk input{width:var(--s-5);height:var(--s-5);accent-color:var(--primary-bg)}
.actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-4)}
/* my page */
.chars{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);margin-bottom:var(--s-6)}
.char h2{font-size:var(--t-h2);margin-bottom:var(--s-1)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-4);margin:var(--s-4) 0 var(--s-1)}
.kv dt{color:var(--text-muted)}.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
details{border-top:var(--hair) solid var(--border-soft);margin-top:var(--s-4);padding-top:var(--s-2)}
.panel>details:first-child{border-top:0;margin-top:0;padding-top:0}
summary{cursor:pointer;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);min-height:var(--target);list-style:none;border-radius:var(--r-sm)}
summary:hover{color:var(--link)}
summary::-webkit-details-marker{display:none}
summary::after{content:"열기";color:var(--link);font-weight:600;font-size:var(--t-xs)}
details[open] summary::after{content:"닫기"}
details[open]>:not(summary){animation:reveal var(--dur-med) var(--ease-out)}
@keyframes reveal{from{opacity:0;transform:translateY(calc(-1 * var(--nudge)))}to{opacity:1;transform:none}}
summary .chip{margin-left:auto}
.app .who{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center;margin-bottom:var(--s-3)}
.app .who b{font-size:var(--t-lg)}
.hero{margin:0 0 var(--s-6)}
.sect{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);margin:0 0 var(--s-4)}
.sect h2{margin:0}
/* wider screens layer on */
@media (min-width:600px){.wrap{padding:0 var(--s-5)}.top nav{order:0;flex-basis:auto}.acct{margin-left:auto}
.brow{grid-template-columns:minmax(0,1fr) var(--wrap-side) minmax(0,var(--col-latest))}.bl{grid-column:auto}
.posts li{grid-template-columns:minmax(0,1fr) var(--col-who) var(--col-when) var(--col-n);grid-template-areas:"t a w c";padding:var(--s-3) var(--s-5)}.pm{font-size:var(--t-sm)}
.post{padding:var(--s-6)}.dir{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:880px){.cols{grid-template-columns:minmax(0,1fr) var(--side)}.cols.three{grid-template-areas:"a s" "f s"}.chars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}