/* Palette, serif stack and archive rhythm observed on blacknotenahee.blogspot.com.
   Sizes adapt to this interactive prototype; no external font request. */
:root{--black:#0c0c0b;--ink:#151413;--line:#34312c;--paper:#e8e1d7;--body:#d7d0c7;--muted:#aba39a;--gold:#b58d69;--lightgold:#d5b18f;font-family:"Noto Serif KR","AppleMyungjo","Batang",serif;font-size:16px;line-height:1.95;letter-spacing:.012em;color:var(--paper);background:var(--black);font-synthesis:none;color-scheme:dark}
*{box-sizing:border-box}body{margin:0}.shell{max-width:1160px;margin:auto;padding:28px 36px 24px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 0 22px;margin-bottom:24px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:16px;font-size:22px;letter-spacing:.055em;font-weight:500;line-height:1.5}.brand-mark{display:block;width:94px;height:auto;object-fit:contain;flex:0 0 94px;filter:none;opacity:1}.brand-ko{font-size:13px;color:var(--lightgold);letter-spacing:.06em;margin-left:8px}.brand small{display:block;font-family:Arial,"Malgun Gothic",sans-serif;font-size:11px;color:var(--muted);font-weight:400;letter-spacing:.08em;margin-top:5px}.private{font-family:Arial,sans-serif;font-size:9px;line-height:1.5;letter-spacing:.18em;color:var(--muted);border:1px solid var(--line);padding:8px 12px;white-space:nowrap}.prototype{display:flex;gap:12px;background:#11100f;border-left:2px solid var(--gold);padding:12px 18px;font-family:Arial,"Malgun Gothic",sans-serif;font-size:12px;line-height:1.8;margin-bottom:26px}.prototype p{font:inherit;margin:3px 0 0;color:var(--muted)}.dot{margin-top:7px;flex:0 0 5px;height:5px;background:var(--gold)}.layout{display:grid;grid-template-columns:32% minmax(0,1fr);gap:26px;min-height:590px}.intro{position:relative;overflow:hidden;background:#11100f;border:1px solid var(--line);padding:32px 26px;display:flex;flex-direction:column}.eyebrow,.step{font-family:Arial,sans-serif;font-size:10px;letter-spacing:.22em;line-height:1.8;color:var(--gold)}.intro h1{font-size:32px;letter-spacing:-.035em;line-height:1.42;font-weight:500;margin:24px 0}.intro p{font-size:15px;line-height:1.95;color:var(--muted)}.footnote{margin-top:auto;position:relative;font-family:Arial,"Malgun Gothic",sans-serif;font-size:10px;line-height:1.7;color:var(--muted)}
main{background:var(--ink);border:1px solid var(--line);padding:36px 38px;outline:none;min-width:0;box-shadow:none}h2{font-size:clamp(25px,2.4vw,32px);font-weight:500;letter-spacing:-.035em;line-height:1.42;margin:16px 0 26px}p{font-family:Roboto,Arial,"Malgun Gothic",sans-serif;font-size:16px;font-weight:400;line-height:1.95;color:var(--body);word-break:keep-all;overflow-wrap:anywhere}blockquote{margin:26px 0;padding:16px 0 16px 18px;border-left:2px solid var(--gold);font-size:21px;font-weight:500;line-height:1.7;letter-spacing:-.025em;color:var(--paper)}.muted{color:var(--muted);font-size:13px}.selection{font-family:Arial,"Malgun Gothic",sans-serif;font-size:11px;color:var(--muted);padding:9px 0;border-bottom:1px solid var(--line);margin:0 0 22px;line-height:1.7}.choice-question{color:var(--lightgold);font-size:17px;line-height:1.85;margin:22px 0 0}.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.button{border:1px solid var(--gold);background:var(--gold);color:#15100d;border-radius:0;padding:12px 17px;font:inherit;font-family:Arial,"Malgun Gothic",sans-serif;font-size:13px;line-height:1.5;cursor:pointer;min-height:46px}.button:hover{background:#d5b18f;border-color:#d5b18f}.button.secondary{background:transparent;color:var(--paper);border-color:#62564a}.button.secondary:hover{background:#25211c}.button:disabled{opacity:.4;cursor:not-allowed}.button:focus-visible,.option:focus-visible,textarea:focus-visible{outline:2px solid #f1cfad;outline-offset:4px}.options{display:grid;gap:12px}.option{display:flex;align-items:center;gap:15px;text-align:left;border:1px solid #4b4238;background:#191715;color:var(--paper);cursor:pointer;padding:16px 18px;border-radius:0;font:inherit;font-size:16px;line-height:1.75;min-height:64px}.option:hover{background:#25201a;border-color:var(--gold)}.option-id{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-right:1px solid #62513f;padding-right:10px;font-family:Georgia,serif;color:var(--lightgold)}label{display:block;font-size:14px;margin:24px 0 10px;color:var(--paper)}textarea{width:100%;resize:vertical;min-height:160px;border:1px solid #62564a;border-radius:0;padding:16px;font:inherit;font-size:16px;line-height:1.9;background:#0f0e0d;color:var(--paper)}textarea::placeholder{color:var(--muted)}.draft-preview{background:#10100f;border:1px solid #4b4238;padding:20px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.95}.checkmark{display:grid;place-items:center;width:47px;height:47px;border:1px solid var(--gold);color:var(--lightgold);font-size:22px;margin-bottom:24px}footer{display:flex;justify-content:space-between;color:var(--muted);font-family:Arial,"Malgun Gothic",sans-serif;font-size:10px;line-height:1.8;padding:24px 0;gap:15px;border-top:1px solid var(--line);margin-top:28px}
@media(max-width:700px){.shell{padding:18px 16px 20px}header{gap:12px;padding-bottom:16px;margin-bottom:20px}.brand{gap:7px;font-size:18px}.brand-mark{width:66px;flex-basis:66px}.brand-ko{display:block;font-size:11px;margin-left:0}.brand small{font-size:9px;letter-spacing:.03em}.private{font-size:8px;padding:6px;letter-spacing:.08em}.layout{display:block;min-height:0}.intro{padding:22px;margin-bottom:20px}.intro h1{font-size:28px;margin:12px 0;line-height:1.42}.intro p,.footnote{display:none}main{padding:28px 22px;min-height:480px}h2{font-size:26px;margin:14px 0 24px}p{font-size:15px;line-height:1.95}.prototype{padding:11px 13px;font-size:11px}.choice-question{font-size:16px}.option{font-size:15px;padding:14px 13px;gap:12px}.controls{gap:9px}.button{font-size:13px;padding:12px 14px}blockquote{font-size:19px}footer{font-size:9px;display:block}footer span{display:none}}

/* Approved C logo: first welcome screen only. Native aspect ratio, no crop or filter. */
main{position:relative;isolation:isolate;overflow:hidden}
main>*{position:relative;z-index:2}
main[data-stage="welcome"]::before{content:"";position:absolute;z-index:0;right:4%;bottom:5%;width:min(76%,460px);aspect-ratio:4400/3900;background:url("assets/BLACKNOTE_C_icon_white_4400.png") center/contain no-repeat;opacity:.12;pointer-events:none}
main[data-stage="welcome"]::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,rgba(21,20,19,.88) 15%,rgba(21,20,19,.58) 60%,rgba(21,20,19,.18));pointer-events:none}
@media(max-width:700px){main[data-stage="welcome"]::before{width:88%;right:3%;bottom:5%}main[data-stage="welcome"]::after{background:linear-gradient(110deg,rgba(21,20,19,.88),rgba(21,20,19,.42))}}

/* 2026-11-01: observed BLACKNOTE Blogger title/body stacks; user requested rounded rectangles.
   No claim that a particular device has downloaded/resolved Noto Serif KR or Roboto. */
:root{--bn-title-font:"Noto Serif KR",AppleMyungjo,Batang,serif;--bn-body-font:"Noto Sans KR",sans-serif;font-family:var(--bn-body-font)}
.brand,.intro h1,h2,blockquote{font-family:var(--bn-title-font)}
p,.brand small,.brand-ko,.eyebrow,.step,.footnote,.selection,.button,.option,label,textarea,.draft-preview,footer{font-family:var(--bn-body-font)}
main,.intro{border-radius:16px}
.button,.option,textarea,.draft-preview{border-radius:10px}

/* Korean font sources are loaded by index.html from the explicitly allowed Google Fonts stylesheet. */

/* Match the visible featured introduction body on BLACKNOTE Blogger, not its mixed post-body sans stack. */
p,.selection,.option,label,textarea,.draft-preview{font-family:var(--bn-title-font);font-weight:400}
@media(max-width:700px){main p:not(.muted):not(.selection){font-size:16px}}