/* Aeronex Support v6.2 — 디자인 시스템 (Pretendard, 라이트/다크, 반응형) */
:root{
  --navy:#12294f; --navy-2:#1d3d73; --navy-3:#2c5aa6; --gold:#c9a227; --gold-2:#e0bb3f; --gold-ink:#2a2000;
  --bg:#f2f5fa; --surface:#fff; --surface-2:#f7f9fc; --line:#dde4ef; --line-2:#c9d3e3; --ink:#0e1a2e; --muted:#5a6a84; --faint:#8a98ae;
  --brand:var(--navy-2); --brand-fg:#fff; --link:#2358b8;
  --ok:#14825a; --ok-bg:#dcf3e8; --warn:#b36b00; --warn-bg:#fdecc8; --bad:#c0392b; --bad-bg:#fbe0dc; --info:#2358b8; --info-bg:#e1ebfb; --gold-bg:#f6ebbd;
  --mine:#e3ecfb; --ai:#fbf5dc; --ai-line:#eadb9a;
  --r:12px; --r-sm:8px; --shadow:0 1px 2px rgba(14,26,46,.05),0 6px 20px -8px rgba(14,26,46,.12);
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI','Noto Sans KR','Noto Sans JP','Noto Sans SC','Malgun Gothic',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0b1322; --surface:#121c30; --surface-2:#172339; --line:#243350; --line-2:#33466a; --ink:#e8eefb; --muted:#9bacc9; --faint:#74849f;
  --brand:#3566b8; --link:#8db3ff; --ok:#42c58f; --ok-bg:#0f3326; --warn:#f0b34d; --warn-bg:#3a2a0b; --bad:#f2786b; --bad-bg:#3d1713; --info:#8db3ff; --info-bg:#14264a; --gold-bg:#3a3110;
  --mine:#1a2c4d; --ai:#2b2711; --ai-line:#5a4f1c; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -10px rgba(0,0,0,.5); color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--font);font-feature-settings:'tnum' 1;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:lang(zh) body,:lang(ja) body{line-height:1.65}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;line-height:1.25}
h1{font-size:clamp(30px,4.6vw,52px);letter-spacing:-.03em}h2{font-size:24px}h3{font-size:17px}h4{font-size:14px}
a{color:var(--link)}
.muted{color:var(--muted)}.faint{color:var(--faint)}.mono{font-family:var(--mono);font-size:.9em}.hidden{display:none!important}.sm-text{font-size:13px}.nowrap{white-space:nowrap}
.row{display:flex;gap:10px;align-items:center}.row.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.between{justify-content:space-between}.end{justify-content:flex-end}.top{align-items:flex-start}
.stack>*+*{margin-top:12px}.stack-sm>*+*{margin-top:6px}
:focus-visible{outline:2px solid var(--accent,#4a86f0);outline-offset:2px;border-radius:6px}
svg.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
svg.ic.sm{width:15px;height:15px}svg.ic.lg{width:22px;height:22px}

/* buttons / inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;border:1px solid transparent;border-radius:var(--r-sm);padding:8px 15px;background:var(--brand);color:var(--brand-fg);font-weight:600;cursor:pointer;transition:background .15s,transform .06s,border-color .15s}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn.gold{background:var(--gold);color:var(--gold-ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}.btn.ghost:hover{background:var(--surface-2);filter:none;border-color:var(--brand)}
.btn.bad{background:var(--bad);color:#fff}.btn.ok{background:var(--ok);color:#fff}
.btn.sm{padding:4px 10px;font-size:13px;gap:5px}.btn.icon{padding:7px;width:36px;height:36px}.btn.sm.icon{width:30px;height:30px;padding:5px}
input,select,textarea{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 11px;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--brand)}
textarea{resize:vertical;min-height:84px}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
select.inline,input.inline{width:auto}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:4px}
.field{margin-bottom:12px}
.hint{font-size:12.5px;color:var(--muted);margin-top:4px}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}.card.tight{padding:12px 14px}
.card+.card{margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--info-bg);color:var(--info);white-space:nowrap}
.chip.gold{background:var(--gold-bg);color:#7a5f00}:root[data-theme=dark] .chip.gold{color:var(--gold-2)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.warn{background:var(--warn-bg);color:var(--warn)}.chip.bad{background:var(--bad-bg);color:var(--bad)}.chip.plain{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12.5px;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap;background:var(--surface-2)}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:hover td{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}.tablewrap table{min-width:520px}
.card .tablewrap{border-radius:var(--r-sm)}
.empty{padding:30px 16px;text-align:center;color:var(--muted)}.empty svg{width:34px;height:34px;opacity:.5;margin-bottom:6px}
.skeleton{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--r-sm);min-height:18px}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--line) 70%,transparent),transparent);animation:sk 1.1s infinite}
@keyframes sk{to{transform:translateX(100%)}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.kpi .v{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}.kpi .l{font-size:13px;color:var(--muted)}.kpi .s{font-size:12.5px;color:var(--muted);margin-top:2px}
.kpi.alert .v{color:var(--bad)}.kpi.click{cursor:pointer}.kpi.click:hover{border-color:var(--brand)}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:5px 13px;border-radius:999px;font-weight:600;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button.on{background:var(--brand);color:var(--brand-fg)}.seg button:not(.on):hover{color:var(--ink)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto}
.tabs button{background:none;border:0;padding:9px 14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--ink);border-bottom-color:var(--gold)}.tabs button:hover{color:var(--ink)}
.kv{display:grid;grid-template-columns:96px 1fr;gap:5px 10px;font-size:14px}.kv dt{color:var(--muted)}.kv dd{margin:0;word-break:break-word}
.bars .b{display:grid;grid-template-columns:120px 1fr 44px;gap:8px;align-items:center;margin:6px 0;font-size:13px}.bars .b span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.bars .b i{display:block;height:9px;border-radius:5px;background:linear-gradient(90deg,var(--navy-3),var(--gold))}
.bars .b span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spark{display:flex;align-items:flex-end;gap:3px;height:70px}.spark i{flex:1;background:var(--navy-3);border-radius:3px 3px 0 0;min-height:2px;opacity:.85}.spark i.b2{background:var(--gold)}
.progress{height:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;overflow:hidden}.progress i{display:block;height:100%;background:var(--ok);transition:width .4s}
.progress.warn i{background:var(--warn)}.progress.bad i{background:var(--bad)}

/* toast + modal */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.22s;z-index:99;max-width:90vw;box-shadow:var(--shadow)}
#toast.show{opacity:1;transform:translateX(-50%)}#toast.err{background:var(--bad)}
.modal-back{position:fixed;inset:0;background:rgba(8,14,26,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;animation:fade .15s}
.modal{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:22px;width:100%;max-width:520px;max-height:90vh;overflow:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);animation:pop .18s}
.modal.wide{max-width:860px}.modal.xl{max-width:1040px}
@keyframes fade{from{opacity:0}}@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* login */
.login{min-height:100vh;display:grid;grid-template-columns:1.15fr 1fr}
.login .hero{background:var(--navy);color:#fff;padding:52px 56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;gap:32px}
.login .hero::after{content:"";position:absolute;right:-18%;bottom:-32%;width:78%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(201,162,39,.4);box-shadow:0 0 0 46px rgba(201,162,39,.05),0 0 0 100px rgba(201,162,39,.04)}
.login .hero h1{font-weight:800;max-width:11em}
.login .hero p{max-width:420px;color:#b9c6df;margin-top:18px}
.login .panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:20px;position:relative}
.login .panel .tools{position:absolute;top:16px;right:16px;display:flex;gap:8px}
.login .box{width:100%;max-width:390px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em}.brand svg{width:30px;height:30px}.brand small{font-weight:500;opacity:.7;font-size:12px;margin-left:2px}
.discord{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px;border-radius:10px;background:#5865F2;color:#fff;font-weight:700;text-decoration:none}.discord:hover{background:#4752c4}

/* top bar (customer) + tools */
.topbar{background:var(--navy);color:#fff;padding:0 20px;min-height:58px;display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:20}
.topbar nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}.topbar nav::-webkit-scrollbar{display:none}
.topbar nav button{background:none;border:0;color:#b9c6df;padding:19px 12px;font-weight:600;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;display:flex;gap:7px;align-items:center}
.topbar nav button.on{color:#fff;border-bottom-color:var(--gold)}.topbar nav button:hover{color:#fff}
.tools{display:flex;align-items:center;gap:8px}
.tools select{width:auto;padding:5px 26px 5px 9px;font-size:13px;background-color:rgba(255,255,255,.1);color:inherit;border-color:rgba(255,255,255,.25)}
.tools select option{color:#111}
.tools .btn.ghost{color:#fff;border-color:rgba(255,255,255,.3)}.tools .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.tools .seg{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}.tools .seg button{color:#c7d3ea}.tools .seg button.on{background:var(--gold);color:var(--gold-ink)}
.who{display:flex;align-items:center;gap:9px;font-size:14px}.who img,.avatar{width:30px;height:30px;border-radius:50%;background:#33507f;object-fit:cover}
.page{max-width:1120px;margin:0 auto;padding:26px 20px 70px}
.page>h2,.main>header h2{display:flex;align-items:center;gap:10px}

/* boarding pass (support request) */
.pass{display:grid;grid-template-columns:1fr 200px;background:var(--surface);border:1px solid var(--line);border-radius:16px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.pass .main{padding:24px 26px}
.pass .stub{padding:22px 18px;background:var(--navy);color:#fff;border-left:2px dashed rgba(255,255,255,.28);display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.pass::before,.pass::after{content:"";position:absolute;right:188px;width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid var(--line);z-index:2}
.pass::before{top:-12px}.pass::after{bottom:-12px}
.pass .big{font-size:36px;font-weight:800;color:var(--gold-2);line-height:1;letter-spacing:-.02em}
.pass .lbl{font-size:12px;color:#9fb2d4}

/* chat */
.chat{display:flex;flex-direction:column;height:min(660px,calc(100vh - 230px));min-height:380px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.chat .log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:9px;background:var(--surface-2);scroll-behavior:smooth}
.msg{max-width:78%;padding:9px 13px;border-radius:16px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.msg .who2{font-size:11.5px;font-weight:700;margin-bottom:2px;opacity:.75}
.msg.me,.msg.customer{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.staff-view .msg.customer{align-self:flex-start;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:4px;border-bottom-right-radius:16px}
.msg.staff,.msg.ai{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.ai{background:var(--ai);border-color:var(--ai-line)}
.staff-view .msg.staff{align-self:flex-end;background:var(--mine);border-color:var(--line-2);border-bottom-left-radius:16px;border-bottom-right-radius:4px}
.msg.sys{align-self:center;background:none;color:var(--muted);font-size:13px;padding:2px;text-align:center}
.msg.pending{opacity:.55}
.msg .tr{margin-top:6px;padding-top:6px;border-top:1px dashed currentColor;font-size:13px;opacity:.8}
.msg time{display:block;font-size:11px;opacity:.55;margin-top:3px}
.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--surface);align-items:flex-end}
.composer textarea{min-height:42px;height:42px;max-height:140px;resize:none}
.banner{padding:11px 14px;border-radius:var(--r-sm);background:var(--warn-bg);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);color:var(--warn);font-size:14px}
.banner.info{background:var(--info-bg);border-color:color-mix(in srgb,var(--info) 30%,transparent);color:var(--info)}
.banner.bad{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 35%,transparent);color:var(--bad)}
.typing{font-size:12px;color:var(--muted);padding:0 14px 6px}

/* staff shell */
.shell{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100vh}
.rail{background:var(--navy);color:#dbe5f7;padding:14px 10px;display:flex;flex-direction:column;gap:1px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin}
.rail .brand{padding:6px 10px 12px;color:#fff}
.rail .nav{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;color:#b9c6df;padding:8px 11px;border-radius:9px;cursor:pointer;font-weight:500;position:relative}
.rail .nav:hover{background:rgba(255,255,255,.08);color:#fff}.rail .nav.on{background:rgba(255,255,255,.14);color:#fff;font-weight:600}.rail .nav.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--gold)}
.rail .sec{font-size:12px;font-weight:600;color:#7f93b8;padding:14px 12px 4px}
.rail .foot{margin-top:auto;padding:12px 8px 4px;font-size:13px;color:#b9c6df;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:8px}
.rail .foot select{background-color:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}.rail .foot select option{color:#111}
.badge{margin-left:auto;background:var(--gold);color:var(--gold-ink);border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px;min-width:20px;text-align:center}.badge.bad{background:var(--bad);color:#fff}
.main{padding:22px 28px 70px;min-width:0}
.main>header{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.mainbar{display:flex;align-items:center;gap:10px;margin:-6px 0 18px;flex-wrap:wrap}
.search{position:relative;flex:1;min-width:200px;max-width:520px}.search input{padding-left:34px;background:var(--surface)}.search svg{position:absolute;left:10px;top:10px;color:var(--muted)}
.search .pop{position:absolute;top:100%;left:0;right:0;margin-top:6px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 20px 50px -15px rgba(0,0,0,.4);z-index:30;max-height:70vh;overflow:auto;padding:6px}
.search .pop h4{padding:8px 10px 4px;color:var(--muted);font-size:12px}.search .pop button{display:flex;gap:8px;width:100%;text-align:left;background:none;border:0;padding:7px 10px;border-radius:8px;cursor:pointer;align-items:center}.search .pop button:hover{background:var(--surface-2)}
.kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line-2);border-radius:4px;padding:0 5px;color:var(--muted)}

/* queue strips */
.strip{display:grid;grid-template-columns:5px 64px 1fr auto;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:0 14px 0 0;margin-bottom:8px;overflow:hidden;cursor:pointer;transition:box-shadow .15s,border-color .15s}
.strip:hover{box-shadow:var(--shadow);border-color:var(--line-2)}
.strip .bar{align-self:stretch;background:var(--line-2)}.strip.high .bar{background:var(--warn)}.strip.urgent .bar{background:var(--bad)}.strip.low .bar{background:#9fb2d4}
.strip .no{font-size:22px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
.strip .meta{padding:10px 0;min-width:0}.strip .wait{font-family:var(--mono);font-size:13px;text-align:right}.strip .wait.late{color:var(--bad);font-weight:700}

.split{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:16px;align-items:start}
.side>.card{padding:14px}.side>.card+.card{margin-top:12px}
.opt{display:flex;gap:8px;margin-bottom:6px}.opt input:first-child{width:70px;text-align:center}
.qr{width:200px;height:200px;border:1px solid var(--line);border-radius:8px;background:#fff}

/* case + timeline */
.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl{position:relative;padding:0 0 14px}.tl::before{content:"";position:absolute;left:-21px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--brand)}
.tl.note::before{border-color:var(--faint)}.tl.reply::before,.tl.customer_reply::before{border-color:var(--gold)}.tl.status::before{background:var(--ok);border-color:var(--ok)}.tl.compensation::before{background:var(--gold);border-color:var(--gold)}
.tl .tb{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 11px;margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere}
.tl .tb.pub{background:var(--ai);border-color:var(--ai-line)}
.sla{font-size:12px;font-weight:600}.sla.late{color:var(--bad)}.sla.soon{color:var(--warn)}

/* flight board */
.fboard{background:#08142b;border:1px solid #1c3566;border-radius:14px;padding:8px 6px;color:#ffd36b;font-family:var(--mono);overflow-x:auto}
.fboard .fh,.fboard .fr{display:grid;grid-template-columns:78px 64px 1fr 100px 70px 150px;gap:10px;padding:9px 12px;align-items:center;min-width:620px}
.fboard .fh{color:#7f93b8;font-size:11.5px;border-bottom:1px solid #1c3566}.fboard .fr{border-bottom:1px dashed #17305c;cursor:default;font-size:14px}.fboard .fr:last-child{border:0}
.fboard .fr.click{cursor:pointer}.fboard .fr.click:hover{background:#0d1f40}
.fboard .st{font-weight:700}.fboard .st.on_time,.fboard .st.arrived,.fboard .st.scheduled{color:#7ee0b0}.fboard .st.boarding{color:#7cc4ff}.fboard .st.delayed{color:#ffb35c}.fboard .st.cancelled,.fboard .st.diverted{color:#ff8f82}.fboard .st.departed{color:#c4cde0}
.fboard .fr small{color:#8aa0c8}

/* misc */
.pill-row{display:flex;gap:6px;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}.filters input,.filters select{width:auto;min-width:130px}.filters input[type=search]{min-width:220px}
.note{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);font-size:13px;white-space:pre-wrap}.note.pin{border-color:var(--gold)}
.tagx{display:inline-flex;gap:4px;align-items:center}
.calc-out{font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sticky-h{position:sticky;top:0}
.page-loader{height:3px;position:fixed;top:0;left:0;right:0;z-index:100;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:translateX(-100%);animation:ld .9s infinite;opacity:0;transition:opacity .15s}.page-loader.on{opacity:1}
@keyframes ld{to{transform:translateX(100%)}}

@media(max-width:1000px){.split{grid-template-columns:1fr}.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:860px){
  .login{grid-template-columns:1fr}.login .hero{padding:30px;min-height:300px}
  .shell{grid-template-columns:1fr}.rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;padding:8px;gap:3px}.rail .sec,.rail .foot,.rail .brand small{display:none}.rail .brand{width:100%;padding:4px 8px}.rail .nav{width:auto;padding:7px 10px}.rail .nav.on::before{display:none}
  .grid2,.grid3{grid-template-columns:1fr}.pass{grid-template-columns:1fr}.pass .stub{border-left:0;border-top:2px dashed rgba(255,255,255,.28)}.pass::before,.pass::after{display:none}
  .main{padding:16px 14px 60px}.msg{max-width:92%}.strip{grid-template-columns:5px 52px 1fr}.strip .wait{display:none}
  .topbar{flex-wrap:wrap;padding:8px 12px;gap:8px}.topbar nav{order:3;width:100%;flex:none}.topbar nav button{padding:10px 11px}.who span.nm{display:none}
  .kv{grid-template-columns:84px 1fr}.bars .b{grid-template-columns:90px 1fr 36px}
}
@media print{.rail,.topbar,.btn,#toast{display:none!important}.shell{display:block}}
.filters input[type=checkbox]{min-width:0;width:auto}

/* ── v6.3: 디스코드 서식(마크다운), 입력 도구, 파일 카드, 비밀 파일 받기 ── */
.msg .md{white-space:normal;line-height:1.5}
.md .md-p{margin:0}.md .md-gap{height:6px}
.md .md-h{font-weight:800;line-height:1.3;margin:2px 0}
.md .md-h1{font-size:1.45em}.md .md-h2{font-size:1.25em}.md .md-h3{font-size:1.08em}
.md .md-sub{font-size:.8em;opacity:.7;margin:2px 0}
.md .md-quote{margin:3px 0;padding:1px 0 1px 10px;border-left:3px solid currentColor;opacity:.9}
.md .md-list{margin:3px 0;padding-left:22px}
.md .md-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;padding:1px 5px;border-radius:5px;background:color-mix(in srgb,currentColor 14%,transparent)}
.md .md-pre{margin:4px 0;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,currentColor 12%,transparent);white-space:pre;overflow-x:auto;font-size:.88em}
.md .md-pre code{font-family:ui-monospace,Menlo,Consolas,monospace}
.md a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.md img.emoji{width:1.375em;height:1.375em;vertical-align:-.3em;object-fit:contain}
.md.jumbo img.emoji{width:2.6em;height:2.6em}
.md .spoiler{background:#4a4f5a;color:transparent;border-radius:4px;cursor:pointer;padding:0 3px}
.md .spoiler img{visibility:hidden}
.md .spoiler.on{background:color-mix(in srgb,currentColor 14%,transparent);color:inherit}
.md .spoiler.on img{visibility:visible}
.msg .mfoot{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:4px}
.msg .mfoot time{display:inline;margin:0}
.msg .agent-foot{font-size:11.5px;font-weight:600;opacity:.8}
.composer-wrap{position:relative;border-top:1px solid var(--line);background:var(--surface)}
.composer-wrap .composer{border-top:0}
.ctools{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:8px 12px 0}
.ctools .tb{min-width:30px;height:28px;padding:0 7px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.ctools .tb:hover{border-color:var(--gold)}
.ctools .hint-fmt{margin-left:auto}
.cpreview{margin:8px 12px 0;padding:8px 12px;border:1px dashed var(--line-2,var(--line));border-radius:10px;background:var(--surface-2);max-height:180px;overflow:auto}
.emoji-pop{position:absolute;left:12px;bottom:100%;width:min(360px,calc(100% - 24px));max-height:300px;overflow:auto;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.25);z-index:20}
.egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:4px}
.egrid .eb{width:36px;height:36px;border:0;border-radius:8px;background:transparent;cursor:pointer;display:grid;place-items:center}
.egrid .eb:hover{background:var(--surface-2)}.egrid .eb img{width:28px;height:28px;object-fit:contain}
.filecard{margin-top:6px;padding:10px 12px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:12px;display:flex;flex-direction:column;gap:8px;background:color-mix(in srgb,currentColor 6%,transparent)}
.filecard .fi,.optcard .fi,.dlicon{font-size:22px;line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.msg.me .filecard .btn,.msg.customer .filecard .btn{color:inherit}
.optcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.optcard{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:12px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.optcard.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--surface))}
.dlpage{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;background:var(--bg)}
.dlpage .dltools{position:absolute;top:14px;right:14px}
.dlbrand{font-weight:800;font-size:20px;display:flex;gap:8px;align-items:baseline}.dlbrand small{font-weight:500;color:var(--muted);font-size:13px}
.dlcard{width:100%;max-width:440px}
.dlicon{font-size:34px}
.banner.ok{background:var(--ok-bg,#e8f7ee);border-color:color-mix(in srgb,var(--ok,#1f9d55) 35%,transparent);color:var(--ok,#1f9d55)}
@media (max-width:560px){.optcards{grid-template-columns:1fr}.ctools .hint-fmt{display:none}}

/* 링크 버튼 (답변 카드 아래) */
.linkpanel{display:flex;flex-direction:column;gap:6px;padding:8px 12px 0}
.linkpanel .row{gap:6px}.linkpanel input{width:100%}
.ctools .tb.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 18%,var(--surface-2))}
.linkbtn{margin-top:8px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.msg .linkbtn{max-width:100%}.lb-emoji{width:18px;height:18px;vertical-align:middle}


/* ── v6.5 애니메이션 (움직임을 줄인 설정이면 위의 reduced-motion 규칙이 모두 꺼 줍니다) ── */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-14px,-10px) scale(1.04)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
/* 화면 전환: 새 화면의 내용이 아래에서 차례로 올라옴 */
.enter>*{animation:rise .38s cubic-bezier(.2,.7,.2,1) both}
.enter>*:nth-child(2){animation-delay:.04s}.enter>*:nth-child(3){animation-delay:.08s}.enter>*:nth-child(4){animation-delay:.12s}
.enter>*:nth-child(5){animation-delay:.16s}.enter>*:nth-child(6){animation-delay:.2s}.enter>*:nth-child(n+7){animation-delay:.24s}
.enter .strip,.enter .card+.card,.enter .grid2>*,.enter .stat{animation:rise .38s cubic-bezier(.2,.7,.2,1) both}
/* 말풍선 */
.msg{animation:msgIn .22s cubic-bezier(.2,.8,.3,1)}.msg.sys{animation:fade .3s}
/* 버튼 · 카드 · 목록 */
.btn{transition:background .15s,transform .12s,border-color .15s,box-shadow .18s}
.btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(14,26,46,.45)}
.btn:not(:disabled):active{transform:translateY(0) scale(.97);box-shadow:none}
.btn.ghost:not(:disabled):hover{box-shadow:none}
.strip{transition:box-shadow .18s,border-color .18s,transform .18s}.strip:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card{transition:box-shadow .2s,transform .2s,border-color .2s}
.fr.click{transition:background .15s,transform .15s}.fr.click:hover{transform:translateX(3px)}
.chip{animation:fade .25s}
.seg button{transition:background .18s,color .18s}
.topbar nav button,.rail button{transition:background .15s,color .15s,transform .12s}.topbar nav button:active,.rail button:active{transform:scale(.96)}
.tools .btn.icon svg{transition:transform .35s}.tools .btn.icon:hover svg{transform:rotate(20deg)}
.modal-back{animation:fade .18s}.modal{animation:pop .24s cubic-bezier(.2,.8,.3,1)}
#toast{transition:opacity .22s,transform .28s cubic-bezier(.2,.8,.3,1)}
/* 로그인 */
.login .hero::after{animation:drift 14s ease-in-out infinite}
.login .hero>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}.login .hero>*:nth-child(2){animation-delay:.1s}
.login .panel .box{animation:rise .55s .12s cubic-bezier(.2,.7,.2,1) both}
.discord{transition:transform .15s,box-shadow .2s,filter .15s}.discord:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(88,101,242,.7);filter:brightness(1.05)}.discord:active{transform:scale(.98)}
/* 언어 · 모드 선택 화면 */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 18px;background:radial-gradient(1200px 600px at 50% -10%,color-mix(in srgb,var(--navy-3) 22%,transparent),transparent),var(--bg)}
.gate-in{width:100%;max-width:520px;text-align:center;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.gate-in .brand{justify-content:center;margin-bottom:26px;color:var(--ink)}
.gate-in h1{font-size:clamp(26px,4vw,36px)}
.gate-sub{color:var(--muted);margin:10px 0 26px}
.gate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.gate-grid.one{grid-template-columns:1fr}
.gate-card{display:flex;align-items:center;gap:14px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer;box-shadow:var(--shadow);
  animation:rise .45s calc(var(--i,0)*70ms + .12s) cubic-bezier(.2,.7,.2,1) both;transition:transform .18s,border-color .18s,box-shadow .2s}
.gate-card:hover,.gate-card:focus-visible{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 14px 30px -14px rgba(14,26,46,.45)}
.gate-card:active{transform:scale(.98)}.gate-card.sel{border-color:var(--gold)}
.gate-flag{font-size:26px;line-height:1}.gate-name{font-weight:700}
.gate-card.mode{padding:18px 20px}.gate-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--gold-bg);color:var(--gold-ink,#2a2000);flex:none}
:root[data-theme=dark] .gate-ico{color:var(--gold-2)}
.gate-txt{display:flex;flex-direction:column;gap:2px}.gate-txt b{font-size:16px}.gate-txt small{color:var(--muted);font-size:13px}
.gate-foot{margin-top:22px}

/* ── v6.7: Aria 인사 버튼 · 입력 중 표시 · 상담사 AI 도우미 · 관리자 AI 테스트 ── */
.greet-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--ai-line,var(--line))}
.msg.ai.typing{display:inline-flex;gap:5px;align-items:center;padding:12px 14px;min-height:0}
.msg.ai.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.35;animation:aiDot 1.1s infinite ease-in-out}
.msg.ai.typing span:nth-child(2){animation-delay:.18s}.msg.ai.typing span:nth-child(3){animation-delay:.36s}
@keyframes aiDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.ai-panel{padding:8px 10px 2px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;background:var(--surface)}
.ai-sug-head{display:flex;align-items:center;gap:8px}
.ai-sug-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;min-height:20px;align-items:stretch}
.ai-sug{flex:0 0 min(300px,78%);text-align:left;display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid var(--ai-line,var(--line));background:var(--ai,var(--surface));border-radius:10px;cursor:pointer;color:inherit;font:inherit;font-size:13px;transition:transform .12s,box-shadow .12s}
.ai-sug:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.08)}
.ai-sug .tx{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}
.ai-sug .gl{color:var(--muted);font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;border-top:1px dashed var(--line);padding-top:4px}
.ai-bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding-bottom:6px}
.ai-bar .ai-lbl{font-size:12px;font-weight:600;color:var(--muted);margin-right:2px}
.ai-bar .btn.busy,.ai-loading{animation:aiPulse 1s infinite}
@keyframes aiPulse{50%{opacity:.45}}
.ai-test-out{padding:12px;border:1px solid var(--ai-line,var(--line));background:var(--ai,var(--surface));border-radius:10px;font-size:14px}
@media (prefers-reduced-motion:reduce){.msg.ai.typing span,.ai-bar .btn.busy,.ai-loading{animation:none}}