/* CNOL RADAR — shared styles (Material, purple #6200EE / teal #03DAC6) */
:root{color-scheme:only light;
  --primary:#6200EE; --primary-dark:#3700B3; --primary-tint:#EDE7F6; --primary-soft:#F3EEFC;
  --secondary:#03DAC6; --on-secondary:#121212;
  --ink:#1D1B20; --ink-2:#5F5B66; --line:#E7E4EC; --line-2:#CFCAD8; --bg:#F6F5F9; --surface:#FFFFFF;
  --up:#00695C; --down:#B00020; --warn-bg:#FFF8E1; --warn-ink:#4A3200; --err-bg:#FFF4F5;
  --e1:0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12),0 1px 3px 0 rgba(0,0,0,.20);
  --e2:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.20);
  --e4:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.20);
  --e6:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.20);
  --e8:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.20);
  --e12:0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12),0 7px 8px -4px rgba(0,0,0,.20);
  --font: Roboto, 'Noto Sans KR', 'Noto Sans JP', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--surface);word-break:keep-all;line-height:1.5}
/* 일본어는 띄어쓰기가 없어서 keep-all이면 줄이 안 바뀌어요 */
html:lang(ja) body{word-break:normal;line-break:strict}
a{color:var(--primary)}a:hover{color:var(--primary-dark)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid #B39DDB;outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.num{font-variant-numeric:tabular-nums}
.stack{display:flex;flex-direction:column;gap:14px}

/* buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:4px;border:0;background:var(--primary);color:#fff;text-decoration:none;font-size:15px;font-weight:700;cursor:pointer;box-shadow:var(--e2);transition:box-shadow .25s ease,background-color .2s ease}
.btn:hover{color:#fff;box-shadow:var(--e4)}
.btn.outline{background:#fff;color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
.btn.outline:hover{color:var(--ink);background:#FAF9FC}
.btn.text{background:transparent;color:var(--primary);box-shadow:none;padding:0 12px}
.btn.fab{min-height:56px;padding:0 28px;border-radius:28px;background:var(--secondary);color:var(--on-secondary);font-size:17px;box-shadow:var(--e6)}
.btn.fab:hover{color:var(--on-secondary);box-shadow:var(--e12)}
.btn.white{background:#fff;color:var(--primary)}
.btn.ghost-white{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7);box-shadow:none}
.btn.danger{background:transparent;color:var(--down);box-shadow:none}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.rip::after{content:"";position:absolute;left:50%;top:50%;width:240%;padding-top:240%;border-radius:50%;background:currentColor;opacity:0;transform:translate(-50%,-50%) scale(0);transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .7s ease;pointer-events:none}
.rip:active::after{opacity:.18;transform:translate(-50%,-50%) scale(1);transition:0s}

/* chips & segmented */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--line-2);background:#fff;color:var(--ink);font-size:13px;font-weight:500;cursor:pointer}
.chip[aria-pressed="true"],.chip.on{border-color:var(--primary);background:var(--primary-tint);color:var(--primary-dark);font-weight:700}
.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:700;background:var(--primary-tint);color:var(--primary-dark)}
.tag.teal{background:#E0F7FA;color:var(--up)}
.tag.gray{background:#F3F1F6;color:var(--ink-2)}
.tag.red{background:var(--err-bg);color:var(--down)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}
.seg button{border:0;min-height:44px;padding:0 16px;background:#fff;color:var(--ink);font-size:14px;font-weight:700;cursor:pointer}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed="true"]{background:var(--primary-tint);color:var(--primary-dark)}

/* cards */
.card{background:#fff;border-radius:12px;box-shadow:var(--e1);padding:20px}
.card.raised{box-shadow:var(--e2)}
.lift{transition:box-shadow .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1)}
.lift:hover{box-shadow:var(--e8);transform:translateY(-3px)}
.tilt{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease}
.tilt:hover{transform:perspective(900px) rotateX(3deg) rotateY(-5deg) translateY(-4px);box-shadow:var(--e12)}

/* fields */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:700;color:var(--ink-2)}
.input,.select,.textarea{min-height:48px;border-radius:4px;border:1px solid var(--line-2);padding:0 14px;font-size:15px;background:#fff;color:var(--ink)}
.textarea{padding:12px 14px;line-height:1.6;resize:vertical;min-height:110px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);outline:2px solid #D1C4E9}

/* switch */
.switch{position:relative;width:56px;height:44px;border:0;background:transparent;cursor:pointer;flex:none}
.switch .tr{position:absolute;left:6px;right:6px;top:15px;height:14px;border-radius:7px;background:var(--line-2);transition:background-color .25s}
.switch .kn{position:absolute;left:4px;top:10px;width:24px;height:24px;border-radius:12px;background:#FAFAFA;box-shadow:var(--e1);transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .25s}
.switch[aria-checked="true"] .tr{background:#B39DDB}
.switch[aria-checked="true"] .kn{transform:translateX(24px);background:var(--primary)}

/* motion */
.fu{animation:fu .65s cubic-bezier(.2,.8,.2,1) both}
@keyframes fu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.zi{animation:zi .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes zi{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.rv{display:block;overflow:hidden;padding-bottom:.06em}
.rv>span{display:block;animation:rv .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes rv{from{transform:translateY(108%)}to{transform:none}}
.rise{transform-origin:center bottom;animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:scaleY(0)}to{transform:none}}
.grow{transform-origin:left center;animation:grow .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
.live{animation:live 1.6s ease-in-out infinite}
@keyframes live{0%,100%{opacity:1}50%{opacity:.25}}
.sweep{animation:sweep 6s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.blip{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--secondary);animation:blip 2.4s ease-out infinite}
.blip.w{background:#fff}
@keyframes blip{0%{box-shadow:0 0 0 0 rgba(3,218,198,.6)}100%{box-shadow:0 0 0 22px rgba(3,218,198,0)}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* charts */
.bars{display:flex;align-items:flex-end;gap:3px;border-bottom:1px solid var(--line-2)}
.bars span{flex:1 1 0;border-radius:3px 3px 0 0;background:var(--primary);transition:background-color .15s,opacity .15s}
.bars.dim span{background:#B39DDB}
.bars span.hot{background:var(--primary-dark)}
.hbar{display:grid;grid-template-columns:110px minmax(0,1fr) 64px;gap:12px;align-items:center}
.hbar .track{display:block;height:14px;background:#F3F1F6;border-radius:0 4px 4px 0}
.hbar .fill{display:block;height:14px;background:var(--primary);border-radius:0 4px 4px 0}
.tip{position:absolute;transform:translateX(-50%);padding:6px 10px;border-radius:4px;background:var(--ink);color:#fff;font-size:12px;line-height:1.5;white-space:pre-line;pointer-events:none;z-index:5}

/* snackbar */
.snack{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:#323232;color:#fff;padding:14px 20px;border-radius:4px;box-shadow:var(--e6);font-size:14px;z-index:100;transition:opacity .25s,transform .25s;max-width:calc(100% - 32px)}
.snack.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* brand */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand .mark{width:40px;height:40px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.brand .mark img{width:30px;height:auto}
.brand .word{font-size:19px;letter-spacing:1px}
.brand .word b{font-weight:900}

/* app shell */
.shell{display:flex;flex-wrap:wrap;min-height:100vh;background:var(--bg)}
.side{flex:1 1 248px;max-width:100%;background:#fff;border-right:1px solid var(--line);padding:16px 12px 24px;display:flex;flex-direction:column;gap:18px}
.side nav{display:flex;flex-wrap:wrap;gap:4px}
.side nav a{flex:1 1 200px;display:flex;align-items:center;gap:14px;min-height:48px;padding:0 14px;border-radius:24px;text-decoration:none;color:var(--ink);font-size:15px;font-weight:500}
.side nav a:hover{background:var(--primary-soft);color:var(--ink)}
.side nav a[aria-current="page"]{background:var(--primary-tint);color:var(--primary-dark);font-weight:700}
.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column}
.appbar{background:var(--primary);color:#fff;box-shadow:var(--e4);min-height:64px;padding:8px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.appbar h1{margin:0;font-size:22px;font-weight:700}
.content{padding:24px;display:flex;flex-direction:column;gap:20px;max-width:1240px;width:100%}
.row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px}
.list{list-style:none;margin:0;padding:0}
.empty{padding:28px;border-radius:12px;background:#fff;text-align:center;color:var(--ink-2);font-size:15px}
.thumb{aspect-ratio:9/12;display:flex;align-items:center;justify-content:center;position:relative}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th{font-size:12px;font-weight:500;color:var(--ink-2);text-align:left;height:44px;padding:0 14px;border-bottom:1px solid var(--line)}
table.data td{height:54px;padding:0 14px;border-bottom:1px solid #F0EEF3}
.scroll-x{overflow-x:auto}
@media (max-width:760px){
  .side{flex-basis:100%;border-right:0;border-bottom:1px solid var(--line);padding:10px 12px 8px;gap:8px}
  .side>:not(.brand):not(nav){display:none}
  .side nav{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:thin}
  .side nav a{flex:0 0 auto;min-height:40px;padding:0 14px;font-size:14px;gap:8px;border:1px solid var(--line)}
  .side nav a svg{width:18px;height:18px}
  .appbar{padding:8px 16px}
  .content{padding:16px}
}