@font-face{font-family:"Pretendard";font-weight:400;font-display:swap;src:url(fonts/Pretendard-Regular.woff2) format("woff2")}
@font-face{font-family:"Pretendard";font-weight:700;font-display:swap;src:url(fonts/Pretendard-Bold.woff2) format("woff2")}
/* 틀: 왼쪽 프리즘 메뉴 + 남색 제목 띠 + 본문(목록 | 미리보기). GIFLOW 디자인 값을 그대로 쓴다. */
:root{
  --bg:#EAF0F8;--surface:#FFFFFF;--soft:#F5F8FC;--soft-2:#EEF2F8;--line:#E1E8F2;--line-2:#CFD9E7;
  --ink:#172744;--sub:#5A6984;--label:#3A4A66;--brand-ink:#3D367C;
  --primary:#3260A7;--on-primary:#FFFFFF;--gold:#E2BE75;--on-gold:#1D2B3A;
  --ok-bg:#DDF6EE;--ok-ink:#0A6B4B;--warn-bg:#FFF1DC;--warn-ink:#A8500C;--info-bg:#E6EEFF;--info-ink:#3346C8;--bad-bg:#FDE7EC;--bad-ink:#B8274A;
  --paper:#FFFFFF;--paper-ink:#222222;--paper-sub:#666666;--paper-line:#E5E5E5;--ph-bg:#EEF2F8;--ph-ink:#5A6984;
  --band-bg:radial-gradient(120% 160% at 100% 0%,rgba(40,201,188,.30),transparent 45%),radial-gradient(90% 140% at 0% 100%,rgba(48,107,245,.35),transparent 55%),linear-gradient(115deg,#0E1D3D 0%,#13295A 60%,#163A6E 100%);
  --band-ink:#FFFFFF;--band-sub:#9FB3D3;--band-crumb:#7FE6DC;--band-edge:rgba(255,255,255,.14);--band-glass:rgba(255,255,255,.08);--band-tab:#A9B9D4;
  --rail-prism:radial-gradient(140% 50% at 110% 0%,rgba(40,201,188,.28),transparent 60%),radial-gradient(120% 45% at -20% 100%,rgba(48,107,245,.30),transparent 65%),linear-gradient(180deg,#13295A 0%,#0E1D3D 45%,#0A1530 100%);
  --rail-ink:#C9D6EA;--rail-sub:#7F93B4;--rail-on:rgba(255,255,255,.10);
  --glow-bg:radial-gradient(120% 160% at 100% 0%,rgba(40,201,188,.45),transparent 55%),linear-gradient(120deg,#13295A 0%,#1D4A9A 70%,#2A63C9 100%);
  --glow-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px rgba(30,74,154,.35);
  --focus:#3260A7;--toast-bg:#172744;--toast-ink:#FFFFFF;--shadow:0 1px 2px rgba(23,39,68,.06);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --f1:12px;--f2:14px;--f3:16px;--f4:20px;--f5:28px;--r1:6px;--r2:10px;--r3:14px;--ctl:36px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A1222;--surface:#111C31;--soft:#16233B;--soft-2:#1A2740;--line:#22314B;--line-2:#2E3F5D;
  --ink:#E7EEF8;--sub:#93A1BA;--label:#C3CEE0;--brand-ink:#7AA3FF;--primary:#3A66D6;--on-primary:#FFFFFF;--gold:#E8C682;
  --ok-bg:#103B30;--ok-ink:#6FE0B8;--warn-bg:#3A2A12;--warn-ink:#FFB866;--info-bg:#1B2A55;--info-ink:#A9BCFF;--bad-bg:#45192A;--bad-ink:#FFA3B5;
  --ph-bg:#EEF2F8;--ph-ink:#5A6984;--focus:#E8C682;--toast-bg:#E7EEF8;--toast-ink:#0A1222;--shadow:none;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A1222;--surface:#111C31;--soft:#16233B;--soft-2:#1A2740;--line:#22314B;--line-2:#2E3F5D;
  --ink:#E7EEF8;--sub:#93A1BA;--label:#C3CEE0;--brand-ink:#7AA3FF;--primary:#3A66D6;--on-primary:#FFFFFF;--gold:#E8C682;
  --ok-bg:#103B30;--ok-ink:#6FE0B8;--warn-bg:#3A2A12;--warn-ink:#FFB866;--info-bg:#1B2A55;--info-ink:#A9BCFF;--bad-bg:#45192A;--bad-ink:#FFA3B5;
  --ph-bg:#EEF2F8;--ph-ink:#5A6984;--focus:#E8C682;--toast-bg:#E7EEF8;--toast-ink:#0A1222;--shadow:none;color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Pretendard",-apple-system,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;font-size:var(--f2);line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.app{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100%}

/* 왼쪽 메뉴 */
.rail{background:var(--rail-prism);color:var(--rail-ink);padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s2);position:sticky;top:0;height:100vh}
.brand{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s1) var(--s2) var(--s4)}
.brand img{width:158px;height:auto;display:block}
.brand b{color:#FFFFFF;font-size:var(--f4);line-height:1.2}
.grp{font-size:var(--f1);color:var(--rail-sub);padding:var(--s3) var(--s2) var(--s1)}
.nav{display:flex;align-items:center;gap:var(--s2);height:var(--ctl);padding:0 var(--s3);border:0;background:none;border-radius:var(--r2);cursor:pointer;text-align:left;width:100%;color:var(--rail-ink)}
.nav:hover{background:var(--rail-on)}
.nav[aria-current="page"]{background:var(--rail-on);color:#FFFFFF;box-shadow:inset 3px 0 0 var(--gold)}
.nav svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav[aria-current="page"] svg{stroke:var(--gold)}
.nav .n{margin-left:auto;font-size:var(--f1);background:var(--rail-on);border-radius:999px;padding:0 var(--s2);font-variant-numeric:tabular-nums}
.rail-foot{margin-top:auto;font-size:var(--f1);color:var(--rail-sub);padding:0 var(--s2)}

/* 제목 띠 */
.main{min-width:0;display:flex;flex-direction:column}
.band{background:var(--band-bg);color:var(--band-ink);padding-block:var(--s3) 0;padding-left:max(var(--s5),env(safe-area-inset-left,0px));padding-right:max(var(--s5),env(safe-area-inset-right,0px))}
.band-top{display:flex;align-items:center;gap:var(--s3);min-height:28px}
.crumb{color:var(--band-crumb);font-size:var(--f1)}
.mock{font-size:var(--f1);border:1px solid var(--band-edge);background:var(--band-glass);border-radius:999px;padding:0 var(--s2);color:var(--band-sub)}
.who{margin-left:auto;position:relative}
.who>button{height:28px;border:1px solid var(--band-edge);background:var(--band-glass);border-radius:999px;padding:0 var(--s3);cursor:pointer;color:#FFFFFF;font-size:var(--f1)}
.menu{position:absolute;right:0;top:34px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r2);box-shadow:0 8px 24px rgba(10,18,34,.18);padding:var(--s1);min-width:220px;z-index:20}
.menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:var(--s2) var(--s3);border-radius:var(--r1);cursor:pointer}
.menu button:hover{background:var(--soft)}
.menu .on{font-weight:700}
.title-row{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;padding:var(--s2) 0 var(--s3)}
.title-row h1{margin:0;font-size:var(--f5);line-height:1.25}
.title-row p{margin:0;color:var(--band-sub)}
.tabs{display:flex;gap:var(--s1);overflow-x:auto}
.tabs button{border:0;background:none;color:var(--band-tab);height:36px;padding:0 var(--s4);border-radius:var(--r2) var(--r2) 0 0;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--bg);color:var(--ink);font-weight:700}

/* 본문 */
.page{padding-block:var(--s5) var(--s6);padding-left:max(var(--s5),env(safe-area-inset-left,0px));padding-right:max(var(--s5),env(safe-area-inset-right,0px));flex:1}
.split{display:grid;grid-template-columns:340px minmax(0,1fr);gap:var(--s5);align-items:start}
.col{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--shadow)}
.post{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);cursor:pointer;text-align:left;width:100%}
.post:hover{border-color:var(--line-2)}
.post[aria-pressed="true"]{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.post h3{margin:0;font-size:var(--f3);line-height:1.45}
.meta{display:flex;gap:var(--s1);flex-wrap:wrap;align-items:center}
.tag{font-size:var(--f1);border-radius:var(--r1);padding:1px var(--s2);background:var(--soft-2);color:var(--label);white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok-ink)}
.tag.warn{background:var(--warn-bg);color:var(--warn-ink)}
.tag.info{background:var(--info-bg);color:var(--info-ink)}
.tag.bad{background:var(--bad-bg);color:var(--bad-ink)}
.small{font-size:var(--f1);color:var(--sub)}
.side-note{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.side-note h4{margin:0;font-size:var(--f2)}
.num{font-size:var(--f4);font-weight:700;font-variant-numeric:tabular-nums}

/* 미리보기 판 */
.viewer{display:flex;flex-direction:column;min-width:0}
.actions{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);border-radius:var(--r3) var(--r3) 0 0;z-index:5}
.btn{height:var(--ctl);border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r2);padding:0 var(--s4);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:var(--s2)}
.btn:hover{background:var(--soft)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--glow-bg);color:#FFFFFF;border-color:transparent;box-shadow:var(--glow-shadow);font-weight:700}
.btn.primary:hover{filter:brightness(1.08)}
.btn.text{border-color:transparent;background:none;color:var(--brand-ink);padding:0 var(--s2)}
.spacer{flex:1}
.status-line{padding:var(--s2) var(--s4);font-size:var(--f1);color:var(--sub);border-bottom:1px solid var(--line);display:flex;gap:var(--s3);flex-wrap:wrap}
.status-line b{color:var(--ink)}

/* 블로그처럼 보이는 본문 */
.paper{background:var(--paper);color:var(--paper-ink);padding:var(--s6) var(--s5);border-radius:0 0 var(--r3) var(--r3)}
.paper-inner{max-width:680px;margin:0 auto;font-size:var(--f3);line-height:1.8}
.paper h2{font-size:24px;line-height:1.4;margin:0 0 var(--s4);text-wrap:balance}
.paper h3{font-size:18px;margin:var(--s5) 0 var(--s2)}
.paper p{margin:0 0 var(--s3)}
.paper ul{margin:0 0 var(--s3);padding-left:20px}
.paper a{color:#1F4FC4}
.paper .note{font-size:var(--f2);color:var(--paper-sub);font-style:italic}
.paper table{border-collapse:collapse;width:100%;margin:0 0 var(--s3);font-size:var(--f2)}
.paper th,.paper td{border:1px solid var(--paper-line);padding:var(--s2) var(--s3);text-align:center}
.paper th{background:#F6F7F9}
.ph{background:var(--ph-bg);color:var(--ph-ink);border:1px dashed #B9C6DA;border-radius:var(--r2);aspect-ratio:16/9;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--s1);padding:var(--s4);margin:0 0 var(--s4);font-size:var(--f2)}
.ph b{font-size:var(--f2);color:#3A4A66}
.ph.cover{aspect-ratio:16/10}
.tagline{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--paper-line)}
.tagline span{font-size:var(--f2);color:#1F4FC4}
.lock{padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s3);max-width:640px}
.lock h2{margin:0;font-size:var(--f4)}
.check{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s2)}
.check li{display:flex;gap:var(--s2);align-items:flex-start}
.check i{font-style:normal;width:20px;flex:none;text-align:center}

/* 표 */
.tbl-wrap{overflow-x:auto}
table.list{border-collapse:collapse;width:100%;font-size:var(--f2)}
table.list th{font-size:var(--f1);color:var(--sub);font-weight:400;background:var(--soft);text-align:center;padding:var(--s2) var(--s3);white-space:nowrap;border-bottom:1px solid var(--line)}
table.list td{text-align:center;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);height:29px;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}
table.list tr:last-child td{border-bottom:0}
/* 넓은 표는 칸 너비를 모두 같게, 넘치는 글은 '…'(입력 표는 제외) */
table.list:not(.form){table-layout:fixed;min-width:640px}
table.list:not(.form) td{max-width:none}
table.list td.l{text-align:left}
.box{padding:var(--s4)}
.box h3{margin:0 0 var(--s3);font-size:var(--f3)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.stat{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.stat .num{font-size:var(--f5)}
.turns{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--s1)}
.turn{border:1px solid var(--line);border-radius:var(--r1);text-align:center;padding:var(--s2) 0;font-size:var(--f1);color:var(--sub);font-variant-numeric:tabular-nums}
.turn b{display:block;font-size:var(--f3);color:var(--ink)}
.turn.today{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.help{margin-top:var(--s5)}
.help summary{cursor:pointer;color:var(--sub)}
.help ol{margin:var(--s2) 0 0;padding-left:20px;color:var(--sub)}

/* 알림 */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--toast-bg);color:var(--toast-ink);padding:var(--s3) var(--s4);border-radius:var(--r2);font-size:var(--f2);max-width:calc(100% - 32px);z-index:50;box-shadow:0 8px 24px rgba(10,18,34,.25)}
.copy-fallback{width:100%;min-height:120px;margin-top:var(--s2)}

/* 폰 아래 메뉴 */
.bottom{display:none}
.phone-brand{display:none}

@media (max-width:1180px){.split{grid-template-columns:300px minmax(0,1fr)}}
@media (max-width:1000px){.split{grid-template-columns:minmax(0,1fr)}.grid2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:800px){
  :root{--ctl:44px}
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .phone-brand{display:flex;align-items:center;gap:var(--s2);padding-bottom:var(--s2)}
  .phone-brand img{width:88px;height:auto;display:block}
  .phone-brand b{font-size:var(--f3)}
  .band,.page{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .title-row h1{font-size:var(--f4)}
  .page{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .paper{padding:var(--s5) var(--s4)}
  .actions .btn{flex:1 1 calc(50% - 8px);justify-content:center}
  .actions .spacer{display:none}
  .actions{position:static}
  .stats{grid-template-columns:minmax(0,1fr)}
  .turns{grid-template-columns:repeat(5,minmax(0,1fr))}
  .bottom{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:var(--s1) max(16px,env(safe-area-inset-right,0px)) calc(var(--s1) + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));z-index:30}
  .bottom button{border:0;background:none;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--f1);color:var(--sub);cursor:pointer;border-radius:var(--r2)}
  .bottom button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .bottom button[aria-current="page"]{color:var(--primary);font-weight:700}
}
@media (prefers-reduced-motion:no-preference){.btn,.nav,.post{transition:background-color .15s,border-color .15s}}

/* 서버 화면용 덧붙임 */
a{color:var(--brand-ink)}
.nav{text-decoration:none}
.nav[aria-current="page"]{background:var(--rail-on);color:#FFFFFF;box-shadow:inset 3px 0 0 var(--gold)}
.brand{text-decoration:none}
.tabs a{display:inline-flex;align-items:center;color:var(--band-tab);height:36px;padding:0 var(--s4);border-radius:var(--r2) var(--r2) 0 0;text-decoration:none;white-space:nowrap}
.tabs a[aria-selected="true"]{background:var(--bg);color:var(--ink);font-weight:700}
.post{text-decoration:none;color:var(--ink)}
.post[aria-current="true"]{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.menu a{display:block;padding:var(--s2) var(--s3);border-radius:var(--r1);text-decoration:none;color:var(--ink)}
.menu a:hover{background:var(--soft)}
.menu form{margin:0}
.bottom a{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--f1);color:var(--sub);text-decoration:none;border-radius:var(--r2)}
.bottom a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bottom a[aria-current="page"]{color:var(--primary);font-weight:700}
@media (max-width:800px){.bottom{grid-template-columns:repeat(4,1fr)}}
.btn{text-decoration:none;color:var(--ink)}
.btn.primary{color:#FFFFFF}
.btn.small{height:28px;padding:0 var(--s3);font-size:var(--f1)}
.btn.wide{width:100%;justify-content:center}
input,select,textarea{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:var(--r1);padding:0 var(--s3);height:var(--ctl);max-width:100%}
textarea{height:auto;padding:var(--s2) var(--s3);width:100%;resize:vertical}
input[type="checkbox"]{height:18px;width:18px}
label{font-size:var(--f1);color:var(--label)}
.field{display:flex;flex-direction:column;gap:var(--s1);margin:var(--s3) 0}
.field input{width:100%}
.row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.row>h3{margin:0}
.stack{display:flex;flex-direction:column;gap:var(--s2)}
.stack input,.stack select{width:100%}
.stack-lg{display:flex;flex-direction:column;gap:var(--s5)}
.narrow{max-width:420px}
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.chip{height:32px;display:inline-flex;align-items:center;padding:0 var(--s3);border:1px solid var(--line-2);border-radius:999px;background:var(--surface);text-decoration:none;color:var(--ink);font-size:var(--f2)}
.chip[aria-current="true"]{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:700}
.empty{padding:var(--s5);color:var(--sub);text-align:center}
.notice{background:var(--info-bg);color:var(--info-ink);border-radius:var(--r2);padding:var(--s3) var(--s4);margin-bottom:var(--s4)}
.err{color:var(--bad-ink);background:var(--bad-bg);border-radius:var(--r1);padding:var(--s2) var(--s3);margin:0}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.05em;user-select:all}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.post-form{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;margin:0}
.post-form input{width:220px}
.lock p{margin:0}
.lock .tag{align-self:flex-start}
.claims{margin:0;padding-left:20px;color:var(--label)}
.checkbox{margin:var(--s4);padding:var(--s4);border:1px solid var(--line-2);border-radius:var(--r2);background:var(--soft);display:flex;flex-direction:column;gap:var(--s3)}
.checkbox p{margin:0}
.review pre{white-space:pre-wrap;font-family:inherit;font-size:var(--f2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r1);padding:var(--s3);margin:var(--s2) 0 0}
.review summary{cursor:pointer;color:var(--brand-ink)}
.ai-check{margin:var(--s3) var(--s4) 0;font-size:var(--f2)}
.ai-check .claims{margin-top:var(--s2)}
.ai-check li{margin-bottom:var(--s2);overflow-wrap:anywhere}
.ai-check p{margin:var(--s3) 0 0}
.paper .pic{margin:0 0 var(--s4)}
.paper .pic img{display:block;width:100%;height:auto;border-radius:var(--r2)}
.paper .pic figcaption{font-size:var(--f1);color:var(--paper-sub);text-align:center;margin-top:var(--s1)}
.ph span{font-size:var(--f1)}
.stat.warn{border-color:var(--warn-ink)}
table.list.form td{white-space:normal;overflow:visible;max-width:none}
table.list.form input[type="text"],table.list.form input:not([type]){width:100%}
.pop{margin-top:var(--s3)}
.pop summary{list-style:none;display:inline-flex;cursor:pointer}
.pop summary::-webkit-details-marker{display:none}
.pop[open] form{margin-top:var(--s3);max-width:420px}
.status-line .tag{margin-left:var(--s1)}
.status-line a{font-weight:700}

/* 로그인 */
.login-body{background:var(--band-bg);min-height:100%}
.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s5);padding-block:var(--s6);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:var(--s1);color:#FFFFFF}
.login-brand b{font-size:var(--f5);letter-spacing:.02em}
.login-brand span{color:var(--band-sub)}
.login-card{width:100%;max-width:380px;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.login-card h1{margin:0 0 var(--s2);font-size:var(--f4)}
.login-card input{width:100%}
.login-card .btn{margin-top:var(--s3)}

/* ───────── 오로라 디자인(2026-10-16 시안, 2026-10-17 새 로고 색 한 계열로 다시 칠함: 남보라 #3D367C·#4D519F·#6E73C7 → 파랑 #3260A7·#0074B3·#0083BE·#5EC8F0): 배경은 흐릿한 기하학 도형(tools/make_shapes.py), 띠·카드·단추를 화려하게. 줄 높이·칸 순서·이름은 그대로 ───────── */
:root{
  --au-1:#0083BE;--au-2:#3260A7;--au-3:#4D519F;--au-4:#6E73C7;--au-5:#5EC8F0;
  --rainbow:linear-gradient(90deg,var(--au-1),var(--au-2) 30%,var(--au-3) 55%,var(--au-4) 80%,var(--au-5));
  --page-art:
    linear-gradient(rgba(244,246,255,.85),rgba(238,243,252,.85)),
    url(shapes-page.svg) center/cover no-repeat,
    radial-gradient(45% 38% at 8% 0%,rgba(77,81,159,.34),transparent 70%),
    radial-gradient(40% 36% at 100% 6%,rgba(0,131,190,.34),transparent 70%),
    radial-gradient(45% 45% at 88% 100%,rgba(110,115,199,.28),transparent 70%),
    radial-gradient(40% 40% at 0% 96%,rgba(94,200,240,.30),transparent 70%),
    linear-gradient(180deg,#F4F6FF 0%,#EEF3FC 100%);
  --band-art:
    url(shapes-band.svg) center/cover no-repeat,
    radial-gradient(38% 130% at 12% -20%,rgba(77,81,159,.85),transparent 70%),
    radial-gradient(34% 140% at 55% 130%,rgba(0,131,190,.70),transparent 70%),
    radial-gradient(30% 120% at 92% -10%,rgba(110,115,199,.70),transparent 70%),
    radial-gradient(24% 90% at 78% 110%,rgba(94,200,240,.50),transparent 70%),
    linear-gradient(115deg,#211D52 0%,#2E2C70 55%,#1D4F8E 100%);
  --rail-art:
    url(shapes-rail.svg) top center/100% auto repeat-y,
    radial-gradient(120% 30% at 110% 0%,rgba(110,115,199,.30),transparent 70%),
    radial-gradient(130% 35% at -20% 38%,rgba(77,81,159,.38),transparent 70%),
    radial-gradient(120% 30% at 120% 75%,rgba(0,131,190,.30),transparent 70%),
    radial-gradient(120% 25% at -10% 105%,rgba(94,200,240,.22),transparent 70%),
    linear-gradient(180deg,#2A2662 0%,#1F1C4E 50%,#16143C 100%);
  --glass:rgba(255,255,255,.10);--glass-blur:none;--nav-glass:rgba(255,255,255,.88);--glass-line:rgba(255,255,255,.95);--paper-glass:transparent;--bar-glass:rgba(255,255,255,.10);
  --card-ring:linear-gradient(135deg,rgba(77,81,159,.35),rgba(0,131,190,.30) 50%,rgba(110,115,199,.30));
  --card-shadow:0 1px 2px rgba(40,50,120,.06),0 10px 28px rgba(60,70,170,.10);
  --lift-shadow:0 2px 6px rgba(40,50,120,.08),0 16px 36px rgba(90,70,200,.18);
  --glow-bg:linear-gradient(110deg,#3260A7 0%,#4D519F 55%,#6E73C7 100%);
  --glow-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 6px 18px rgba(77,81,159,.40);
  --c-title:#3260A7;--c-body:#0074B3;--c-tags:#4D519F;--c-image:#3D367C;
  --c-title-bg:#E7EEFF;--c-body-bg:#DDF0FA;--c-tags-bg:#EFE9FF;--c-image-bg:#E9E7F5;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --page-art:
    linear-gradient(rgba(10,17,36,.85),rgba(11,19,40,.85)),
    url(shapes-page-dark.svg) center/cover no-repeat,
    radial-gradient(45% 38% at 8% 0%,rgba(77,81,159,.22),transparent 70%),
    radial-gradient(40% 36% at 100% 6%,rgba(0,131,190,.16),transparent 70%),
    radial-gradient(45% 45% at 88% 100%,rgba(110,115,199,.12),transparent 70%),
    radial-gradient(40% 40% at 0% 96%,rgba(94,200,240,.10),transparent 70%),
    linear-gradient(180deg,#0A1124 0%,#0B1328 100%);
  --glass:rgba(17,28,49,.62);--glass-blur:blur(10px);--nav-glass:rgba(17,28,49,.88);--glass-line:rgba(255,255,255,.06);--paper-glass:#FFFFFF;--bar-glass:rgba(17,28,49,.80);
  --card-ring:linear-gradient(135deg,rgba(77,81,159,.45),rgba(0,131,190,.30) 50%,rgba(110,115,199,.35));
  --card-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.35);
  --lift-shadow:0 2px 6px rgba(0,0,0,.4),0 16px 36px rgba(77,81,159,.25);
  --c-title:#8FB0FF;--c-body:#6CC9F0;--c-tags:#B9A6FF;--c-image:#B4B0E6;
  --c-title-bg:#1C2B57;--c-body-bg:#0E2F45;--c-tags-bg:#2A2152;--c-image-bg:#262250}}
:root[data-theme="dark"]{
  --page-art:
    linear-gradient(rgba(10,17,36,.85),rgba(11,19,40,.85)),
    url(shapes-page-dark.svg) center/cover no-repeat,
    radial-gradient(45% 38% at 8% 0%,rgba(77,81,159,.22),transparent 70%),
    radial-gradient(40% 36% at 100% 6%,rgba(0,131,190,.16),transparent 70%),
    radial-gradient(45% 45% at 88% 100%,rgba(110,115,199,.12),transparent 70%),
    radial-gradient(40% 40% at 0% 96%,rgba(94,200,240,.10),transparent 70%),
    linear-gradient(180deg,#0A1124 0%,#0B1328 100%);
  --glass:rgba(17,28,49,.62);--glass-blur:blur(10px);--nav-glass:rgba(17,28,49,.88);--glass-line:rgba(255,255,255,.06);--paper-glass:#FFFFFF;--bar-glass:rgba(17,28,49,.80);
  --card-ring:linear-gradient(135deg,rgba(77,81,159,.45),rgba(0,131,190,.30) 50%,rgba(110,115,199,.35));
  --card-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.35);
  --lift-shadow:0 2px 6px rgba(0,0,0,.4),0 16px 36px rgba(77,81,159,.25);
  --c-title:#8FB0FF;--c-body:#6CC9F0;--c-tags:#B9A6FF;--c-image:#B4B0E6;
  --c-title-bg:#1C2B57;--c-body-bg:#0E2F45;--c-tags-bg:#2A2152;--c-image-bg:#262250}

/* 배경: 흐릿한 기하학 도형 + 다섯 빛깔 오로라 */
body{background:var(--page-art);background-attachment:fixed}
/* 제목 띠: 도형과 오로라, 아래 끝에 무지개 선 */
.band{background:var(--band-art);position:relative;box-shadow:inset 0 -3px 0 0 transparent}
.band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rainbow);opacity:.9}
.tabs{position:relative;z-index:1}
.tabs a[aria-selected="true"],.tabs button[aria-selected="true"]{background:#F4F6FF;box-shadow:0 -2px 0 0 var(--au-5) inset}
:root[data-theme="dark"] .tabs a[aria-selected="true"]{background:#0A1124}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tabs a[aria-selected="true"]{background:#0A1124}}
.crumb{color:#9FDDF5}
/* 왼쪽 메뉴 */
.rail{background:var(--rail-art);box-shadow:inset -1px 0 0 rgba(255,255,255,.06)}
.nav[aria-current="page"]{background:linear-gradient(90deg,rgba(77,81,159,.55),rgba(50,96,167,.35) 60%,rgba(0,131,190,.25));color:#FFFFFF;box-shadow:inset 3px 0 0 var(--au-5),0 6px 16px rgba(77,81,159,.30)}
.nav[aria-current="page"] svg{stroke:var(--au-5)}
.nav .n{background:linear-gradient(135deg,var(--au-4),var(--au-5));color:#FFFFFF;font-weight:700}
.who>button{background:rgba(255,255,255,.12)}
/* 카드: 유리판 + 빛깔 테두리 */
.card{position:relative;background:var(--glass);border:1px solid transparent;box-shadow:var(--card-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
/* 테두리 빛깔은 가장자리에만(판이 비쳐도 안쪽에 번지지 않게) */
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--card-ring);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.post{position:relative;overflow:hidden;padding-left:calc(var(--s4) + 4px)}
.post::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--au-2),var(--au-1))}
.col>.post:nth-of-type(2)::before{background:linear-gradient(180deg,var(--au-3),var(--au-4))}
.post:hover{box-shadow:var(--lift-shadow)}
.post[aria-current="true"]{border-color:transparent;box-shadow:var(--lift-shadow)}
.post[aria-current="true"]::after{padding:2px;background:var(--rainbow)}
@media (prefers-reduced-motion:no-preference){.post{transition:box-shadow .2s}}
/* 꼬리표: 색을 꽉 채움 */
.tag{font-weight:700}
.tag.ok{background:linear-gradient(135deg,#19B88A,#0FA59A);color:#FFFFFF}
.tag.info{background:linear-gradient(135deg,#3260A7,#4D519F);color:#FFFFFF}
.tag.warn{background:linear-gradient(135deg,#5EC8F0,#FF8A3D);color:#3A1E00}
.tag.bad{background:linear-gradient(135deg,#FF5F7E,#E2365B);color:#FFFFFF}
/* 복사 단추: 일마다 빛깔 */
.actions{background:var(--bar-glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:0;box-shadow:inset 0 -1px 0 var(--line)}
.actions .btn[data-copy]{font-weight:700}
.actions .btn[data-copy] svg,.actions a.btn svg,.actions button.btn:disabled svg{width:26px;height:26px;padding:5px;border-radius:999px;margin-left:calc(var(--s2) * -1)}
.btn[data-copy="title"]{color:var(--c-title);border-color:color-mix(in srgb,var(--c-title) 35%,transparent)}
.btn[data-copy="title"] svg{background:var(--c-title-bg)}
.btn[data-copy="body"]{color:var(--c-body);border-color:color-mix(in srgb,var(--c-body) 35%,transparent)}
.btn[data-copy="body"] svg{background:var(--c-body-bg)}
.btn[data-copy="tags"]{color:var(--c-tags);border-color:color-mix(in srgb,var(--c-tags) 35%,transparent)}
.btn[data-copy="tags"] svg{background:var(--c-tags-bg)}
.actions a.btn[href$="images.zip"]{color:var(--c-image);font-weight:700;border-color:color-mix(in srgb,var(--c-image) 40%,transparent)}
.actions a.btn[href$="images.zip"] svg{background:var(--c-image-bg)}
.btn[data-copy="title"]:hover{background:var(--c-title-bg)}
.btn[data-copy="body"]:hover{background:var(--c-body-bg)}
.btn[data-copy="tags"]:hover{background:var(--c-tags-bg)}
.actions a.btn[href$="images.zip"]:hover{background:var(--c-image-bg)}
.btn.primary{background:var(--glow-bg);box-shadow:var(--glow-shadow)}
.btn.primary:hover{filter:brightness(1.08) saturate(1.1)}
/* 블로그 본문 판: 위쪽에 무지개 선 */
.paper{background:var(--paper-glass);position:relative}
.status-line{background:linear-gradient(90deg,color-mix(in srgb,var(--au-3) 6%,transparent),color-mix(in srgb,var(--au-1) 6%,transparent))}
/* 대표 화면 숫자 칸: 색을 꽉 채움 */
.stats .stat{color:#FFFFFF;border:0;position:relative;overflow:hidden}
.stats .stat .small,.stats .stat a{color:rgba(255,255,255,.88)}
.stats .stat::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.14)}
.stats .stat:nth-child(1){background:linear-gradient(135deg,#3260A7,#4D519F)}
.stats .stat:nth-child(2){background:linear-gradient(135deg,#0074B3,#0083BE)}
.stats .stat:nth-child(3){background:linear-gradient(135deg,#4D519F,#6E73C7)}
.stats .stat.warn{background:linear-gradient(135deg,#FF8A3D,#E2365B)}
/* 표 머리 */
table.list th{background:color-mix(in srgb,var(--au-3) 8%,var(--surface));color:var(--label);font-weight:700}
/* 어린이집 차례 */
.turn{background:var(--glass)}
.turn.today{background:var(--glow-bg);border-color:transparent;color:rgba(255,255,255,.85);box-shadow:var(--glow-shadow)}
.turn.today b{color:#FFFFFF}
/* 고른 칩 */
.chip[aria-current="true"]{background:var(--glow-bg);color:#FFFFFF;border-color:transparent;box-shadow:var(--glow-shadow)}
/* 폰 아래 메뉴 */
@media (max-width:800px){
  .bottom{background:var(--nav-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:0;box-shadow:0 -1px 0 var(--line),0 -8px 24px rgba(60,70,170,.10)}
  .bottom a[aria-current="page"]{color:var(--au-3)}
  .bottom a[aria-current="page"] svg{stroke:var(--au-3)}
}
/* 로그인 */
.login-body{background:url(shapes-page-dark.svg) center/cover no-repeat,radial-gradient(40% 50% at 10% 0%,rgba(77,81,159,.70),transparent 70%),radial-gradient(40% 50% at 100% 10%,rgba(110,115,199,.50),transparent 70%),radial-gradient(45% 50% at 70% 100%,rgba(0,131,190,.50),transparent 70%),linear-gradient(135deg,#211D52 0%,#2E2C70 55%,#1D4F8E 100%)}
.login-card{background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--rainbow) border-box;border:2px solid transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 20px 60px rgba(77,81,159,.40)}

/* GILOG 로고(tools/make_logo.py) */
.login-corp{position:fixed;left:max(24px,env(safe-area-inset-left,0px));top:calc(20px + env(safe-area-inset-top,0px));width:112px;height:auto;z-index:2}
.login-brand img{width:187px;height:auto;display:block}
@media (max-width:800px){.login-corp{width:88px;left:max(16px,env(safe-area-inset-left,0px))}}
.login-brand{gap:var(--s3)}