:root{--ink:#30251e;--muted:#77675b;--red:#a93429;--paper:#fff6da;--serif:'Gowun Batang',serif;--sans:'Noto Sans KR',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;padding-bottom:76px;background-color:var(--paper);background-image:linear-gradient(rgba(255,246,218,.54),rgba(255,246,218,.66)),url('assets/d-bg-paper-v2.webp');background-size:cover;background-position:center top;background-attachment:fixed;color:var(--ink);font-family:var(--sans)}button,a{font:inherit}.note-header{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;min-height:68px;padding:7px 16px;border-bottom:1px solid rgba(93,59,37,.14);background:rgba(255,248,225,.88);backdrop-filter:blur(16px)}.note-header>a,.note-header>button{display:grid;width:38px;height:38px;padding:0;border:0;border-radius:50%;place-items:center;background:rgba(255,255,255,.58);color:var(--ink);font-size:27px;text-decoration:none}.note-header div{text-align:center}.note-header strong{display:block;font:700 20px/1.2 var(--serif)}.note-header small{color:var(--muted);font-size:10px;font-weight:700}main{max-width:720px;margin:auto}.profile-rail{display:flex;gap:10px;padding:17px 20px 6px;overflow:auto}.profile-rail button{display:flex;flex:0 0 auto;align-items:center;gap:8px;padding:7px 13px 7px 7px;border:1px solid rgba(102,69,44,.16);border-radius:999px;background:rgba(255,252,242,.72);color:var(--muted)}.profile-rail span{display:grid;width:31px;height:31px;border-radius:50%;place-items:center;background:#ead8ae}.profile-rail b{font-size:12px}.profile-rail .active{border-color:#a93429;color:#7e211b}.profile-rail .active span{background:#a93429;color:white}.note-title{padding:35px 24px 23px}.note-title small,.note-section header small{color:var(--red);font-size:11px;font-weight:800;letter-spacing:.13em}.note-title h1{margin:8px 0 10px;font:700 34px/1.28 var(--serif);letter-spacing:-.055em}.note-title p,.note-section header p{margin:0;color:var(--muted);font-size:14px;font-weight:650;line-height:1.55;word-break:keep-all}.identity-card{display:flex;align-items:center;justify-content:space-between;margin:0 18px 18px;padding:20px 22px;border:1px solid rgba(133,82,42,.18);border-radius:22px;background:rgba(255,252,241,.76);box-shadow:0 10px 26px rgba(71,43,23,.08)}.identity-card span{color:var(--red);font-size:11px;font-weight:800}.identity-card h2{margin:4px 0 3px;font:700 25px/1.2 var(--serif)}.identity-card p{margin:0;color:var(--muted);font-size:12px}.identity-card>b{display:grid;width:62px;height:62px;border-radius:50%;place-items:center;background:#376b4b;color:#fff8df;font:700 28px/1 var(--serif);box-shadow:inset 0 0 0 5px rgba(255,255,255,.17)}.reading-tabs{position:sticky;top:68px;z-index:10;display:flex;gap:6px;padding:9px 18px;overflow:auto;background:rgba(255,246,218,.9);backdrop-filter:blur(12px);scrollbar-width:none}.reading-tabs button{flex:0 0 auto;padding:9px 14px;border:0;border-radius:999px;background:rgba(255,252,242,.82);color:var(--muted);font-size:12px;font-weight:800}.reading-tabs .active{background:#382a21;color:#fffaf0}.note-section{margin:17px 18px;padding:25px 20px;border-radius:24px;background:rgba(255,252,243,.82);box-shadow:0 9px 25px rgba(65,41,24,.07);scroll-margin-top:125px}.note-section header h2{margin:5px 0 6px;font:700 28px/1.2 var(--serif);letter-spacing:-.04em}.pillar-scroll{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:21px}.pillar{position:relative;padding:13px 5px 12px;border:1px solid rgba(104,69,42,.16);border-radius:15px;background:#fffaf0;text-align:center}.pillar.main{border-color:#bd483b;box-shadow:inset 0 0 0 1px #bd483b}.pillar small{display:block;margin-bottom:9px;color:var(--muted);font-size:10px;font-weight:800}.pillar b{display:grid;height:48px;margin:3px auto;place-items:center;border-radius:9px;color:#fff;font:700 24px/1 var(--serif)}.pillar span{display:block;margin-top:8px;color:var(--muted);font-size:9px;font-weight:700}.wood{background:#477858}.fire{background:#bd4b3b}.earth{background:#a77a3f}.water{background:#40677b}.easy-note{margin-top:18px;padding:16px;border-left:4px solid #d09b3d;border-radius:3px 13px 13px 3px;background:#f7e9c5}.easy-note b{font:700 17px/1.3 var(--serif)}.easy-note p{margin:5px 0 0;color:#67584d;font-size:12px;font-weight:650;line-height:1.55}.tag-list{display:flex;gap:7px;margin:18px 0 13px;flex-wrap:wrap}.tag-list span{padding:7px 11px;border-radius:999px;background:#f0d9b0;color:#714b2f;font-size:11px;font-weight:800}.note-section details{border-top:1px solid rgba(103,67,42,.14);padding:14px 1px}.note-section summary{cursor:pointer;font-size:13px;font-weight:800}.note-section details p{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.element-bars{display:grid;gap:12px;margin-top:20px}.element-bars div{display:grid;grid-template-columns:25px 1fr 35px;gap:9px;align-items:center;font-size:12px;font-weight:800}.element-bars i{position:relative;height:9px;border-radius:9px;background:#ede3cf;overflow:hidden}.element-bars i:after{content:'';position:absolute;inset:0 auto 0 0;width:var(--value);border-radius:inherit;background:var(--color)}.year-rail{display:grid;grid-auto-flow:column;grid-auto-columns:74%;gap:10px;margin:20px -20px -2px;padding:0 20px 4px;overflow:auto;scroll-snap-type:x proximity;scrollbar-width:none}.year-rail article{padding:17px;border:1px solid rgba(102,68,43,.16);border-radius:17px;background:#fffaf0;scroll-snap-align:start}.year-rail .now{border-color:#b74437;background:#fff3d5}.year-rail small{color:var(--red);font-size:10px;font-weight:800}.year-rail b{display:block;margin:3px 0;font:700 25px/1.2 var(--serif)}.year-rail span{font-size:12px;font-weight:800}.year-rail p{margin:8px 0 0;color:var(--muted);font-size:12px}.note-cta{margin:30px 18px 16px;padding:25px 22px;border-radius:23px;background:#34271f;color:#fff8e8;text-align:center}.note-cta h2{margin:0;font:700 24px/1.3 var(--serif)}.note-cta p{margin:8px 0 18px;color:#d9cbbd;font-size:12px;line-height:1.5}.note-cta a{display:block;padding:13px;border-radius:999px;background:#f5d889;color:#32251d;font-size:13px;font-weight:900;text-decoration:none}.demo-note{margin:0 24px 22px;color:#8b7d71;font-size:10px;line-height:1.5;text-align:center}.note-bottom{position:fixed;z-index:30;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(5,1fr);height:66px;padding-bottom:max(5px,env(safe-area-inset-bottom));border-top:1px solid rgba(111,73,47,.17);background:rgba(255,250,235,.9);backdrop-filter:blur(17px)}.note-bottom a,.note-bottom button{display:flex;border:0;background:none;align-items:center;justify-content:center;flex-direction:column;color:#7b6e64;font-size:19px;text-decoration:none}.note-bottom small{margin-top:3px;font-size:9px;font-weight:800}.note-bottom .active{color:var(--red)}@media(min-width:721px){.note-bottom{left:50%;width:720px;transform:translateX(-50%)}.note-section{padding:30px}.year-rail{grid-auto-columns:40%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}