/* DESTINY EIDOS 화면 (3차 시안, 10/6). 에이도스의 색: 블랙 블루 + 솔로 민 금속(스틸)(대표 10/6 "녹색 별로", "금속 명판처럼 고급스럽게", "코발트 말고 블랙 블루").
   EPIC 남색·보라, EDIT 흰색과 겹치지 않게 보라는 쓰지 않고 금속으로 가른다. 시안 B(스틸만)·C(블랙 + 브랜드 파랑)는 html[data-c]. 글자는 Pretendard. */
:root{
  --bar:linear-gradient(180deg,#151B27 0%,#0A0E16 100%);--list:#0C111A;
  --side:#0C111A;--side2:#151C29;--side3:#1E2737;--side-ink:#E9EEF6;--side-dim:#8E9AAE;--side-line:#212A39;
  --bg:#EDEFF3;--card:#FFFFFF;--line:#D9DEE6;--line2:#EAEDF2;--hover:#F4F5F8;
  --ink:#0D1220;--ink2:#363E4C;--dim:#646E7E;
  --acc:#1B2C4F;--acc-ink:#23396A;--acc-soft:#E7ECF5;--acc-line:#C2CCDF;--on:#FFFFFF;--glow:#0C162E33;--dot:#7C9BDB;--star:#9DB7F2;
  --pri:linear-gradient(180deg,#2E4069 0%,#18243F 52%,#0B1327 100%);--pri-sh:inset 0 1px 0 #FFFFFF2E,inset 0 -1px 0 #00000040,0 1px 2px #0A102040;
  --steel:repeating-linear-gradient(90deg,#FFFFFF1A 0 1px,#0000000A 1px 3px),linear-gradient(180deg,#F7F8FA 0%,#D5D9DF 44%,#E8EAEE 52%,#BCC2CA 100%);
  --steel-ink:#151A24;--steel-line:#A3AAB4;--steel-hi:inset 0 1px 0 #FFFFFFD0,inset 0 -1px 0 #00000018;
  --warn:#B45309;--warn-soft:#FFF4E5;--bad:#C2332F;--bad-soft:#FDECEC;--live:#E5484D;
  --r:14px;--r2:10px;--sh:0 1px 2px #0D12200D,0 4px 14px #0D12200A;--sh2:0 10px 34px #0D122024;
  --font:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
html[data-c="b"]{--acc:#2F343B;--acc-ink:#23272D;--acc-soft:#ECEEF1;--acc-line:#C8CDD5;--on:#16191D;--glow:#10131826;--dot:#C9CFD7;--star:#DCE1E8;
  --bar:linear-gradient(180deg,#1D2025 0%,#131518 100%);--list:#131518;--side:#131518;--side2:#1E2126;--side3:#292D33;--side-line:#2B2F36;--side-dim:#9AA2AD;
  --pri:var(--steel);--pri-sh:var(--steel-hi),0 1px 2px #0000002A}
html[data-c="c"]{--bar:linear-gradient(180deg,#11151C 0%,#0B0F14 100%);--list:#0B0F14;--side:#0B0F14;--side2:#151A22;--side3:#1E242E;--side-line:#232A35;
  --acc:#2F7BF0;--acc-ink:#1F5FCC;--acc-soft:#E8F1FF;--acc-line:#BCD6FF;--glow:#3A8DFF40;--dot:#3A8DFF;--star:#3A8DFF;
  --pri:linear-gradient(180deg,#5AA2FF 0%,#3A8DFF 50%,#2A72E8 100%);--pri-sh:inset 0 1px 0 #FFFFFF45,0 1px 2px #0B2A5C40}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased;letter-spacing:-.005em;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--acc-soft)}
:focus-visible{outline:2px solid var(--acc-ink);outline-offset:2px}

/* ── 위 막대 ── */
.top{height:58px;display:flex;align-items:center;gap:6px;padding:0 14px 0 20px;background:var(--bar);color:var(--side-ink);border-bottom:1px solid var(--side-line);position:relative;z-index:30}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:18px;flex:none}
.wm{font:500 13px/1 Montserrat,var(--font);letter-spacing:.42em;color:#fff}
.nd{background:linear-gradient(180deg,#FFFFFF 0%,#C4CAD2 55%,#8E96A1 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.wm .t{position:relative}
.star{position:absolute;left:50%;top:-7px;width:1px;height:20px;background:linear-gradient(transparent,var(--star),transparent);transform:translateX(-50%)}
.star::before{content:'';position:absolute;left:-7px;top:9px;width:15px;height:1px;background:linear-gradient(90deg,transparent,var(--star),transparent)}
.star::after{content:'';position:absolute;left:-2px;top:7.5px;width:5px;height:5px;border-radius:50%;background:var(--star);box-shadow:0 0 10px var(--star)}
.bar{width:1px;height:16px;background:var(--side-line)}
.nd{font:600 12px/1 Montserrat,var(--font);letter-spacing:.42em}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{position:relative;padding:8px 13px;border-radius:9px;text-decoration:none;color:var(--side-dim);font-size:14.5px;white-space:nowrap;transition:color .15s,background .15s}
.nav a:hover{color:var(--side-ink);background:var(--side2)}
.nav a.on{color:#fff;background:var(--side3)}
.nav a.on::after{content:'';position:absolute;left:13px;right:13px;bottom:-11px;height:2px;border-radius:2px;background:var(--star)}
.nav a .ub{margin-left:6px}
.sp{flex:1}
.tr{display:flex;align-items:center;gap:8px;flex:none}
.credit{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;background:var(--side2);border:1px solid var(--side-line);color:var(--side-dim);text-decoration:none;font-size:13px;white-space:nowrap}
.credit b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.credit:hover{border-color:var(--steel-line)}
.modes{display:flex;background:var(--side2);border:1px solid var(--side-line);border-radius:999px;padding:3px;gap:2px}
.modes button{height:28px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--side-dim);font-size:13px;white-space:nowrap;position:relative}
.modes button.on{background:var(--steel);color:var(--steel-ink);box-shadow:var(--steel-hi);font-weight:700}
.modes button .dt{position:absolute;right:3px;top:2px;width:7px;height:7px;border-radius:50%;background:var(--live)}
.joinb{height:34px;padding:0 15px;border-radius:999px;border:1px solid var(--steel-line);background:var(--steel);color:var(--steel-ink);box-shadow:var(--steel-hi);font-size:13.5px;font-weight:700;white-space:nowrap}
.joinb:hover{filter:brightness(1.04)}
.meb{width:34px;height:34px;border-radius:50%;border:0;padding:0;background:none}
.meb .av{width:34px;height:34px;font-size:12px}

/* ── 틀: 왼쪽 목록 · 가운데 · 오른쪽 ── */
.app{display:grid;grid-template-columns:292px minmax(0,1fr) 340px;height:calc(100% - 58px);transition:grid-template-columns .25s}
.app.noside{grid-template-columns:292px minmax(0,1fr) 0}
.app.noside .side{display:none}
.app.wide{grid-template-columns:0 minmax(0,1fr) minmax(440px,46%)}
.app.wide>.list{visibility:hidden;overflow:hidden}
.list{background:var(--list);color:var(--side-ink);display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--side-line)}
.center{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.cv{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.center.room .cv{flex:none;overflow:visible}
.pool{display:none;flex:1;min-height:0;position:relative}
.pool.on{display:block}
.pool iframe{position:absolute;inset:0;width:100%;height:100%;border:0;visibility:hidden;background:var(--bg)}
.pool iframe.on{visibility:visible}
.side{background:var(--card);border-left:1px solid var(--line);min-height:0;overflow:auto;display:flex;flex-direction:column}

/* 왼쪽 목록 (채팅 목록처럼) */
.newbtn{margin:14px 14px 6px;height:46px;border:1px solid var(--steel-line);border-radius:12px;background:var(--steel);color:var(--steel-ink);font-weight:700;font-size:15px;letter-spacing:.01em;text-shadow:0 1px 0 #FFFFFFB0;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--steel-hi),0 6px 18px #00000040;transition:transform .15s,box-shadow .15s,filter .15s}
.newbtn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.newbtn:active{transform:none}
.lscroll{flex:1;min-height:0;overflow:auto;padding:4px 8px 16px;scrollbar-width:thin;scrollbar-color:var(--side3) transparent}
.lh{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--side-dim);padding:14px 10px 6px;letter-spacing:.02em}
.lh .n{margin-left:auto;font-variant-numeric:tabular-nums}
.it{width:100%;display:flex;gap:11px;align-items:flex-start;padding:10px 10px;border:0;border-radius:12px;background:none;text-align:left;color:inherit;position:relative;transition:background .15s}
.it:hover{background:var(--side2)}
.it.on{background:var(--side3)}
.it.on::before{content:'';position:absolute;left:-8px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--steel)}
.it .tx{flex:1;min-width:0}
.it .r1{display:flex;align-items:baseline;gap:6px}
.it .nm{flex:1;min-width:0;font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.it .tm{font-size:11.5px;color:var(--side-dim);flex:none}
.it .r2{display:flex;align-items:center;gap:6px;margin-top:1px}
.it .ls{flex:1;min-width:0;font-size:13px;color:var(--side-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it .tag{font-weight:600;color:var(--side-ink)}
.ub{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--pri);color:var(--on);font-size:11.5px;font-weight:700;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums;animation:pop .3s}
.st{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--side-dim);margin-top:4px}
.st .d{width:7px;height:7px;border-radius:50%;background:#5d6f67}
.st.live{color:#BFD0F2}.st.live .d{background:var(--dot);box-shadow:0 0 0 3px #7C9BDB33;animation:pulse 2s infinite}
.st.soon{color:#FFC27A}.st.soon .d{background:#FFA53D}
.st.wait{color:#FFD68A}.st.wait .d{background:#FFC24B;animation:pulse 1.4s infinite}
.st.call{color:#FFD68A}.st.call .d{background:#FFC24B;animation:pulse 1s infinite}
.st .lt{font-variant-numeric:tabular-nums}
.empty-list{margin:18px 10px;padding:16px;border:1px dashed var(--side-line);border-radius:12px;color:var(--side-dim);font-size:13px;line-height:1.7}
.lfoot{padding:10px 14px 14px;border-top:1px solid var(--side-line);font-size:12px;color:var(--side-dim);display:flex;gap:8px;align-items:center}
.lfoot b{color:var(--side-ink);font-weight:600}
.lfoot a{color:var(--star);text-decoration:none;font-weight:600}

/* 사진(프로필) */
.av{width:40px;height:40px;border-radius:50%;flex:none;display:inline-grid;place-items:center;overflow:hidden;position:relative;
  background:var(--steel);color:#2B3038;text-shadow:0 1px 0 #FFFFFFC0;box-shadow:var(--steel-hi),0 0 0 1px #0000001F;font-weight:600;font-size:13px;letter-spacing:.02em}   /* 사진이 없으면 금속판에 새긴 이니셜 */
.av img{width:100%;height:100%;object-fit:cover;background:#E9ECF0}
.av.sm{width:30px;height:30px;font-size:11px}
.av.lg{width:52px;height:52px;font-size:16px}
.av.xl{width:96px;height:96px;font-size:28px}
.av.wait{background:var(--side3);color:var(--side-dim)}
.avw{position:relative;display:inline-block;flex:none;line-height:0}
.avw .on{position:absolute;right:1px;bottom:1px;width:12px;height:12px;border-radius:50%;background:var(--dot);border:2px solid var(--card)}
.list .avw .on{border-color:var(--side)}
.avw .on.off{background:#A9B3AE}
.avw.xl .on{width:20px;height:20px;border-width:3px;right:4px;bottom:4px}

/* AI 표시(로고 + 이름) */
.ais{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.aic{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 6px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:12.5px;color:var(--ink2);white-space:nowrap}
.aic img{width:14px;height:14px}
.aic.big{height:34px;padding:0 13px 0 9px;font-size:14px;gap:7px}.aic.big img{width:19px;height:19px}
.aimini{display:inline-flex;gap:-4px}
.aimini img{width:18px;height:18px;border-radius:50%;background:#fff;border:1.5px solid #fff;margin-left:-5px;box-shadow:0 0 0 1px var(--line)}
.aimini img:first-child{margin-left:0}

/* 공통 단추 · 입력 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 16px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s}
.btn:hover{border-color:#C6CFC9;background:var(--hover)}
.btn:active{transform:scale(.98)}
.btn.pri{background:var(--pri);border-color:transparent;color:var(--on);box-shadow:var(--pri-sh)}
.btn.pri:hover{filter:brightness(1.05);box-shadow:var(--pri-sh),0 6px 16px var(--glow)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.dark:hover{background:#25302B}
.btn.ghost{background:none;border-color:transparent;color:var(--ink2)}
.btn.ghost:hover{background:var(--hover)}
.btn.sm{height:32px;padding:0 12px;font-size:13px;border-radius:9px}
.btn.lg{height:52px;padding:0 24px;font-size:16px;border-radius:13px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.btn .i{width:17px;height:17px}
.iconb{width:36px;height:36px;border:0;border-radius:10px;background:none;display:inline-grid;place-items:center;color:var(--ink2)}
.iconb:hover{background:var(--hover)}
.inp{width:100%;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);outline:0;transition:border-color .15s,box-shadow .15s}
.inp:focus{border-color:var(--acc-ink);box-shadow:0 0 0 4px var(--acc-soft)}
.inp.sm{height:36px;width:auto;border-radius:9px}
textarea.inp{height:auto;padding:12px 14px;resize:vertical}
select.inp{appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2369756F' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:36px}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:14px;color:var(--ink2);transition:all .15s;white-space:nowrap}
.chip:hover{border-color:#C6CFC9}
.chip.on{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc-ink);font-weight:600}
.chip img{width:16px;height:16px}
.chip.sm{height:30px;padding:0 11px;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .add{height:36px;width:150px;border-radius:999px;border:1px dashed var(--line);padding:0 14px;background:none;outline:0;font-size:14px}
.chips .add:focus{border-style:solid;border-color:var(--acc-ink)}
.seg{display:inline-flex;background:var(--line2);border-radius:11px;padding:3px;gap:2px}
.seg button{height:34px;padding:0 14px;border:0;border-radius:9px;background:none;color:var(--dim);font-size:14px;white-space:nowrap}
.seg button.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 3px #0F171418}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--card);height:46px;overflow:hidden}
.stepper button{width:44px;height:100%;border:0;background:none;font-size:20px;color:var(--ink2)}
.stepper button:hover{background:var(--hover)}
.stepper input{width:120px;height:100%;border:0;border-left:1px solid var(--line2);border-right:1px solid var(--line2);text-align:center;font-weight:700;font-size:17px;outline:0;font-variant-numeric:tabular-nums;background:none}
.stepper input.n{width:64px}
.stepper .u{padding:0 12px 0 0;color:var(--dim);font-size:14px;margin-left:-6px;background:none}
.tgl{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:0;font-weight:600}
.tgl .sw{width:44px;height:26px;border-radius:999px;background:#C9D1CC;position:relative;transition:background .2s;flex:none}
.tgl .sw::after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s}
.tgl.on .sw{background:var(--acc-ink)}
.tgl.on .sw::after{transform:translateX(18px)}
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;background:var(--line2);color:var(--dim);font-size:11.5px;font-weight:600;white-space:nowrap}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.live{background:var(--acc-soft);color:var(--acc-ink)}
.pill.live .d{animation:pulse 2s infinite}
.pill.wait{background:var(--warn-soft);color:var(--warn)}
.pill.call{background:#FFF1F0;color:var(--bad)}
.pill.demo{background:#EDF0F5;color:#3D4A60}
.pill.ok{background:var(--acc-soft);color:var(--acc-ink)}
.vf{display:inline-flex;align-items:center;gap:3px;color:var(--acc-ink);font-size:12px;font-weight:600}
.vf .i{width:15px;height:15px;stroke-width:2.2}
.stars{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--ink)}
.stars .i{width:15px;height:15px;fill:#F5A524;stroke:#F5A524}
.note{color:var(--dim);font-size:13px}
.err{color:var(--bad);font-size:14px;min-height:20px;margin-top:10px}
.lbl{display:block;font-size:13.5px;font-weight:700;color:var(--ink2);margin:22px 0 9px}
.lbl small{font-weight:400;color:var(--dim);margin-left:6px}
.h1{font-size:30px;line-height:1.25;letter-spacing:-.025em;margin:0;font-weight:750}
.h2{font-size:19px;letter-spacing:-.015em;margin:34px 0 12px;font-weight:700;display:flex;align-items:center;gap:8px}
.lead{color:var(--dim);margin:8px 0 0;font-size:15.5px}
.page{padding:40px 40px 80px;animation:rise .35s ease both}
.pin{max-width:760px;margin:0 auto}
.pin.wide{max-width:1100px}
.pin.mid{max-width:920px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.loading{padding:60px;text-align:center;color:var(--dim)}
.skel{background:linear-gradient(90deg,var(--line2) 0,#fff 50%,var(--line2) 100%);background-size:200% 100%;animation:shim 1.2s infinite;border-radius:var(--r);height:118px;margin-bottom:12px}
.fempty{padding:22px;border:1px dashed var(--line);border-radius:var(--r2);color:var(--dim);font-size:13.5px;line-height:1.7;text-align:center;background:var(--hover)}
.go{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:26px}

/* 메뉴(단추 아래에 붙는 작은 목록 · 창이 아니다) */
.mwrap{position:relative}
.menu{position:absolute;z-index:40;min-width:300px;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);padding:6px;animation:drop .16s ease both}
.menu.up{bottom:calc(100% + 8px)}
.menu.dn{top:calc(100% + 8px)}
.menu.r{right:0}
.menu .mh{font-size:12px;color:var(--dim);padding:8px 10px 4px;font-weight:600}
.mi{width:100%;display:flex;align-items:center;gap:11px;padding:9px 10px;border:0;border-radius:10px;background:none;text-align:left}
.mi:hover{background:var(--hover)}
.mi.on{background:var(--acc-soft)}
.mi .ic{width:32px;height:32px;border-radius:9px;background:var(--line2);display:grid;place-items:center;flex:none;color:var(--ink2)}
.mi.on .ic{background:var(--pri);color:var(--on)}
.mi span{flex:1;min-width:0}
.mi b{display:block;font-size:14px;font-weight:600}
.mi small{display:block;font-size:12.5px;color:var(--dim);line-height:1.4}
.mi .i.ck{color:var(--acc-ink)}
.msep{height:1px;background:var(--line2);margin:6px 4px}
.mc{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer}
.mc:hover{background:var(--hover)}
.mc span{flex:1}.mc b{display:block;font-size:14px;font-weight:600}.mc small{display:block;font-size:12.5px;color:var(--dim)}
.mc .tgl .sw{width:38px;height:22px}.mc .tgl .sw::after{width:16px;height:16px}.mc .tgl.on .sw::after{transform:translateX(16px)}
.mrow{display:flex;gap:8px;align-items:center;padding:6px 10px 10px}

/* ── 새 의뢰 (Claude처럼 입력창 하나) ── */
.hello{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:15px;margin-bottom:10px}
.hello .mk{width:26px;height:26px;border-radius:8px;background:var(--side);position:relative;flex:none}
.hello .mk::before{content:'';position:absolute;left:12.5px;top:4px;width:1px;height:18px;background:linear-gradient(transparent,var(--acc),transparent)}
.hello .mk::after{content:'';position:absolute;left:5px;top:12.5px;width:16px;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent)}
.big{font-size:38px;line-height:1.2;letter-spacing:-.03em;font-weight:750;margin:0 0 22px}
.composer{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh);transition:border-color .2s,box-shadow .2s;position:relative}
.composer:focus-within{border-color:var(--acc-line);box-shadow:0 0 0 5px var(--acc-soft),var(--sh)}
.composer textarea{display:block;width:100%;min-height:96px;max-height:320px;border:0;outline:0;resize:none;background:none;padding:20px 22px 6px;font-size:16.5px;line-height:1.6}
.composer textarea::placeholder{color:#9AA59F}
.att{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px}
.att:not(:empty){padding-bottom:6px}
.fchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 10px;border-radius:9px;background:var(--line2);font-size:13px;max-width:240px}
.fchip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fchip button{border:0;background:none;padding:2px;display:grid;color:var(--dim)}
.cbar{display:flex;align-items:center;gap:6px;padding:8px 10px 10px 12px;flex-wrap:wrap}
.cb{height:36px;min-width:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:1px solid transparent;border-radius:10px;background:none;color:var(--ink2);font-size:13.5px;white-space:nowrap}
.cb:hover{background:var(--hover)}
.cb.pill2{border-color:var(--line);background:var(--card)}
.cb.pill2:hover{border-color:#C6CFC9}
.cb.pill2.set{border-color:var(--acc-line);background:var(--acc-soft);color:var(--acc-ink);font-weight:600}
.cb .av{width:22px;height:22px;font-size:9px}
.cb.mic.on{background:var(--bad-soft);color:var(--bad);border-color:#F6C9C7}
.send{width:40px;height:40px;border-radius:12px;border:0;background:var(--pri);box-shadow:var(--pri-sh);color:var(--on);display:grid;place-items:center;transition:transform .15s,filter .15s;flex:none}
.send:hover{filter:brightness(1.06)}
.send:active{transform:scale(.94)}
.send:disabled{background:var(--line);color:#fff}
.send .i{width:20px;height:20px;stroke-width:2.4}
.starters{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.starter{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink2);font-size:14px;transition:all .15s}
.starter:hover{border-color:var(--acc-line);color:var(--acc-ink);transform:translateY(-1px)}
.starter .i{width:16px;height:16px}
.cnote{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;color:var(--dim);font-size:13px}
.cnote b{color:var(--ink);font-weight:600}
.how{margin-top:44px}
.how h2{font-size:18px;margin:0 0 4px;font-weight:700}
.how p{margin:0 0 14px;color:var(--dim);font-size:14px}
.demo{position:relative;border-radius:18px;overflow:hidden;background:#0b0d0e;aspect-ratio:16/9;box-shadow:var(--sh2)}
.demo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.how4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 0;padding:0;list-style:none}
.how4 li{padding:14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:13px;color:var(--dim)}
.how4 b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.how4 i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--steel);color:var(--steel-ink);box-shadow:var(--steel-hi),0 0 0 1px #0000001A;font-size:11px;font-weight:700;margin-bottom:8px}
.optrow{display:flex;gap:8px;align-items:center;padding:4px 10px 8px;flex-wrap:wrap}
.optrow .stepper{height:36px;border-radius:9px}.optrow .stepper button{width:34px;font-size:17px}.optrow .stepper input{width:86px;font-size:14px}.optrow .stepper input.n{width:44px}

/* 오른쪽 칸 공통 */
.sh{display:flex;align-items:center;gap:8px;padding:18px 18px 10px}
.sh h3{margin:0;font-size:15px;font-weight:700;flex:1;display:flex;align-items:center;gap:6px}
.sh .cnt{font-size:12px;color:var(--dim);font-weight:600}
.sec{border-top:1px solid var(--line2)}
.mini-x{display:flex;align-items:center;gap:10px;padding:10px 18px;border:0;background:none;width:100%;text-align:left}
.mini-x:hover{background:var(--hover)}
.mini-x .tx{flex:1;min-width:0}
.mini-x b{font-size:14px;display:block}
.mini-x small{font-size:12px;color:var(--dim);display:flex;gap:6px;align-items:center}
.mini-x .pr{font-weight:700;font-size:13.5px;white-space:nowrap}
.thumbs{display:grid;grid-template-columns:1fr;gap:12px;padding:4px 18px 18px}
.thumb{display:block;text-decoration:none;color:inherit;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--card);transition:transform .2s,box-shadow .2s}
.thumb:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.thumb .tw{position:relative;aspect-ratio:16/10;overflow:hidden;background:#f6f6f4}
.thumb .tw iframe{position:absolute;left:0;top:0;width:400%;height:400%;border:0;transform:scale(.25);transform-origin:0 0;pointer-events:none}
.thumb .tt{padding:9px 12px;font-size:13px;display:flex;justify-content:space-between;gap:8px}
.thumb .tt b{font-weight:600}
.thumb .tt span{color:var(--dim)}

/* ── 전문가 찾기 (vast.ai처럼 한 사람 한 줄) ── */
.fhead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.fhead .tx{flex:1;min-width:260px}
.srch{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);flex:1;min-width:260px;transition:border-color .15s,box-shadow .15s}
.srch:focus-within{border-color:var(--acc-ink);box-shadow:0 0 0 4px var(--acc-soft)}
.srch input{flex:1;border:0;outline:0;background:none;font-size:15.5px;min-width:0}
.srch .i{color:var(--dim)}
.fbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.frow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.frow .k{font-size:12.5px;color:var(--dim);font-weight:600;width:40px;flex:none}
.fsort{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:20px 0 10px;flex-wrap:wrap}
.fsort .n{font-size:14px;color:var(--dim)}.fsort .n b{color:var(--ink)}
.tabs2{display:flex;gap:2px;border-bottom:1px solid var(--line)}
.tabs2 button{height:36px;padding:0 12px;border:0;background:none;color:var(--dim);font-size:14px;position:relative}
.tabs2 button.on{color:var(--ink);font-weight:700}
.tabs2 button.on::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--ink);border-radius:2px}
.xlist{display:flex;flex-direction:column;gap:10px}
.xrow{display:grid;grid-template-columns:auto minmax(0,1fr) 190px 170px;gap:18px;align-items:center;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:16px;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;animation:rise .3s ease both}
.xrow:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:#CBD5CF}
.xrow.off{opacity:.62}
.xrow .x1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.xrow .x1 b.nm{font-size:16.5px;letter-spacing:-.01em}
.xrow .x1 .note{font-size:12.5px}
.xrow .x2{color:var(--ink2);font-size:13.5px;margin:3px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xrow .x3{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fld{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;background:var(--acc-soft);color:var(--acc-ink);font-size:12.5px;font-weight:700}
.sk{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;background:var(--line2);color:var(--ink2);font-size:12.5px}
.seats{display:flex;gap:4px;margin-bottom:6px}
.seats i{width:22px;height:8px;border-radius:4px;background:var(--line)}
.seats i.f{background:var(--ink2)}
.seats i.me{background:var(--acc)}
.xseat{font-size:12.5px;color:var(--dim)}
.xseat b{color:var(--ink)}
.xseat .ok{color:var(--acc-ink);font-weight:700}
.xseat .no{color:var(--warn);font-weight:700}
.xprice{text-align:right}
.xprice small{display:block;font-size:12px;color:var(--dim)}
.xprice .pr{font-size:21px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.xprice .pr span{font-size:13px;font-weight:600;margin-left:1px}
.xprice .btn{margin-top:8px;width:100%}

/* ── 전문가 한 사람 (프로필) ── */
.xp{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.xph{display:flex;gap:22px;align-items:center}
.xph .nm{font-size:30px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.xph .in{font-size:16px;color:var(--ink2);margin-top:6px}
.xstats{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.xstats div{flex:1;min-width:120px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.xstats>div>span:first-child{display:block;font-size:12.5px;color:var(--dim)}
.xstats b{font-size:19px;font-weight:800;letter-spacing:-.02em}
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.rv{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line2)}
.rv .tx{flex:1}
.rv .r1{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim)}
.rv .r1 b{color:var(--ink);font-size:14px}
.rv p{margin:4px 0 0;color:var(--ink2);font-size:14.5px}
.buy{position:sticky;top:20px;padding:22px}
.buy .pr{font-size:30px;font-weight:800;letter-spacing:-.03em}
.buy .pr small{font-size:14px;color:var(--dim);font-weight:600;margin-right:4px}
.buy .row{display:flex;justify-content:space-between;font-size:14px;padding:9px 0;border-bottom:1px solid var(--line2)}
.buy .row span{color:var(--dim)}
.buy .btn{width:100%;margin-top:10px}

/* ── 연결 기다리기 ── */
.waitc{max-width:620px;margin:0 auto;text-align:center;padding-top:20px}
.radar{position:relative;width:240px;height:240px;margin:0 auto 26px}
.radar .ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--acc-line)}
.radar .ring:nth-child(2){inset:30px}.radar .ring:nth-child(3){inset:60px}
.radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 75%,var(--glow) 100%);animation:spin 2.6s linear infinite}
.radar .me{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--side);display:grid;place-items:center;color:#DCE3EE;font-weight:800;box-shadow:0 0 0 8px var(--acc-soft)}
.radar .dot{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;transition:all .6s;opacity:.55}
.radar .dot .av{width:44px;height:44px;border:2px solid #fff;box-shadow:var(--sh)}
.radar .dot.cur{opacity:1;transform:scale(1.25);z-index:2}
.radar .dot.cur .av{border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-soft)}
.cdown{width:44px;height:44px;flex:none}
.cdown circle{fill:none;stroke-width:4}
.cdown .bg{stroke:var(--line2)}.cdown .fg{stroke:var(--acc);stroke-linecap:round;transition:stroke-dashoffset 1s linear;transform:rotate(-90deg);transform-origin:50% 50%}
.cdown text{font-size:12px;font-weight:700;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.askc{display:flex;gap:14px;align-items:center;text-align:left;padding:16px 18px;margin:18px auto 0;max-width:520px}
.askc .tx{flex:1;min-width:0}
.askc b{font-size:15px}
.askc small{display:block;color:var(--dim);font-size:13px}
.reqq{margin:18px auto 0;max-width:520px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-align:left;font-size:14px;color:var(--ink2)}
.reqq small{display:block;color:var(--dim);font-size:12px;margin-bottom:4px}
.cbox{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:16px auto 0;max-width:560px;padding:14px 16px;border-radius:14px;background:var(--acc-soft);border:1px solid var(--acc-line);text-align:left}
.warnn{color:var(--warn);margin-top:14px}
.okburst{width:84px;height:84px;margin:30px auto 18px;border-radius:50%;background:var(--pri);color:var(--on);display:grid;place-items:center;animation:pop .45s cubic-bezier(.3,1.6,.5,1) both;box-shadow:0 0 0 14px var(--acc-soft)}
.okburst .i{width:40px;height:40px;stroke-width:2.6}

/* ── 작업방: 머리 · 한 줄 알림 ── */
.th{display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--card);border-bottom:1px solid var(--line);flex:none;min-height:70px;position:relative;z-index:6}
.th .who{flex:1;min-width:160px}
.th .t1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:700;font-size:16px}
.th .t1 a{text-decoration:none}
.th .t1 a:hover{text-decoration:underline}
.th .t2{font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.th .back{display:none}
.menub{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:var(--card);font-weight:600;font-size:13.5px;white-space:nowrap}
.menub:hover{background:var(--hover)}
.menub .i{width:15px;height:15px}
.mtag{font-size:13px;color:var(--dim);white-space:nowrap}
.clock{display:flex;flex-direction:column;align-items:flex-end;min-width:96px}
.clock b{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05}
.clock span{font-size:11.5px;color:var(--dim)}
.clock.soon b{color:var(--warn);animation:blink 1s infinite}
.strip{display:flex;align-items:center;gap:10px;padding:10px 18px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap;font-size:14px;animation:slide .25s ease both;position:relative;z-index:5}
.strip:empty{display:none}
.strip.call{background:var(--acc-soft);border-color:var(--acc-line)}
.strip.soon{background:var(--warn-soft);border-color:#F6D7A8}
.strip.wait{background:#F7F8F6}
.strip .note{font-size:13px}
.strip small{color:var(--dim);font-size:12px}
.strip .inp.grow{flex:1;min-width:200px}
.strip .ai1{display:inline-flex;align-items:center;gap:6px}
.strip .ai1 img{width:18px;height:18px}

/* 가릴 곳 정하기 */
.masked{position:absolute;inset:0;z-index:20;background:#0E1311F2;color:#fff;display:flex;flex-direction:column;padding:16px;gap:10px;animation:rise .25s both}
.masked .mh2{display:flex;flex-direction:column;gap:2px}
.masked .mh2 .note{color:#B9C6BF}
.mstage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;background:#000;border-radius:12px;overflow:hidden}
.mstage video{max-width:100%;max-height:100%}
.mlayer{position:absolute;cursor:crosshair}
.mr{position:absolute;border:2px solid #9DB7F2;background:repeating-linear-gradient(45deg,#9DB7F233 0 6px,#9DB7F211 6px 12px);border-radius:4px;cursor:pointer}
.mr.new{border-style:dashed}
.mf{display:flex;gap:10px;align-items:center}
.mf .note{color:#B9C6BF}

/* ── 오른쪽: 결과 파일 · 받아쓰기 ── */
.files{display:flex;flex-direction:column;padding:0 10px 10px}
.fi{display:flex;gap:11px;align-items:center;padding:9px 8px;border-radius:12px;cursor:pointer;transition:background .15s;animation:rise .3s both}
.fi:hover{background:var(--hover)}
.fi.new{animation:flash 1.6s ease}
.fic{width:46px;height:46px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:10.5px;font-weight:800;letter-spacing:.02em;color:#fff;overflow:hidden;position:relative}
.fic img{width:100%;height:100%;object-fit:cover;background:#fff}
.fic.html{background:#E8590C}.fic.xlsx,.fic.csv{background:#1F7A4D}.fic.pdf{background:#C92A2A}.fic.docx,.fic.md,.fic.txt{background:#2F5FD0}.fic.py,.fic.js,.fic.json{background:#3B4A42}.fic.zip{background:#7C5CFF}.fic.img{background:#ddd}
.fi .tx{flex:1;min-width:0}
.fi .n{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi .s{font-size:12px;color:var(--dim)}
.okb{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--ink2)}
.okb.on{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc-ink)}
.okb .i{width:14px;height:14px;stroke-width:2.4}
.trbox{max-height:260px;overflow:auto;padding:0 18px 16px;font-size:13.5px;display:flex;flex-direction:column;gap:6px}
.trl b{font-weight:700;margin-right:6px}
.trl.live{color:var(--dim)}
.trl .tm{font-size:11px;color:var(--dim);margin-right:6px;font-variant-numeric:tabular-nums}
.req{padding:0 18px;font-size:14px;color:var(--ink2);white-space:pre-wrap;max-height:4.8em;overflow:hidden}
.req.open{max-height:none}
.more{border:0;background:none;color:var(--acc-ink);font-weight:600;padding:4px 18px 14px;font-size:13px}
.bill{padding:0 18px 18px;font-size:13.5px}
.bill div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;color:var(--ink2)}
.bill .sum{border-top:1px solid var(--line2);margin-top:6px;padding-top:10px;font-weight:800;color:var(--ink);font-size:15px}
.dlall{margin:0 18px 6px}

/* 파일 크게 보기 (Claude 결과물 칸처럼 오른쪽이 넓어진다) */
.pv{display:flex;flex-direction:column;height:100%}
.pvh{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.pvh .n{flex:1;min-width:0;font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvb{flex:1;min-height:0;overflow:auto;background:#F7F8F6;position:relative}
.pvb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.pvb img{display:block;max-width:100%;margin:12px auto;box-shadow:var(--sh)}
.pvb pre{margin:0;padding:16px;font:12.5px/1.6 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-all}
.pvb .zl{padding:16px}
.pvb .zl div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line2);font-size:14px}
.pvf{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);flex:none}
.vsel{height:32px;border:1px solid var(--line);border-radius:9px;background:var(--card);padding:0 8px;font-size:13px}

/* ── 요금제 (Claude 요금·사용량 화면처럼) ── */
.plans4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.pc{padding:22px 20px 20px;display:flex;flex-direction:column;position:relative;transition:transform .2s,box-shadow .2s}
.pc:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.pc.main{border-color:var(--acc-line);box-shadow:0 0 0 3px var(--acc-soft),var(--sh)}
.pc .nm{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.pc .pr{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:12px 0 0;font-variant-numeric:tabular-nums}
.pc .pr small{font-size:14px;color:var(--dim);font-weight:500;margin-left:3px}
.pc .hr{font-size:13px;color:var(--dim);margin:2px 0 14px}
.pc ul{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--ink2);flex:1}
.pc li{display:flex;gap:7px;align-items:flex-start}
.pc li .i{width:16px;height:16px;color:var(--acc-ink);margin-top:3px;stroke-width:2.4}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.bc{padding:22px}
.bc h3{margin:0 0 4px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.bc .sub{color:var(--dim);font-size:13px;margin:0 0 14px}
.bc .bigw{font-size:34px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bc .rows div{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;border-bottom:1px solid var(--line2);color:var(--ink2)}
.bc .rows div:last-child{border:0}
.meter{height:8px;border-radius:999px;background:var(--line2);overflow:hidden;margin:10px 0 6px}
.meter i{display:block;height:100%;background:var(--pri);border-radius:999px;transition:width .6s}
.meter.warn i{background:#F59E0B}
.mline{display:flex;justify-content:space-between;font-size:13px;color:var(--dim)}
.amt{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.amt .won{display:flex;align-items:center;height:46px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:0 14px;gap:6px;flex:1;min-width:180px;transition:border-color .15s,box-shadow .15s}
.amt .won:focus-within{border-color:var(--acc-ink);box-shadow:0 0 0 4px var(--acc-soft)}
.amt .won input{flex:1;border:0;outline:0;background:none;font-size:18px;font-weight:700;text-align:right;min-width:0;font-variant-numeric:tabular-nums}
.amt .won span{color:var(--dim);font-weight:600}
.pres{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.confirm{margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--hover);border:1px solid var(--line);display:flex;gap:10px;align-items:center;flex-wrap:wrap;animation:rise .2s both;font-size:14px}
.card4{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.card4 .cc{width:44px;height:30px;border-radius:6px;background:linear-gradient(135deg,var(--side),var(--side3));position:relative}
.card4 .cc::after{content:'';position:absolute;left:7px;top:9px;width:10px;height:8px;border-radius:2px;background:#E9C46A}
.card4 b{flex:1;font-weight:600}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-size:12.5px;color:var(--dim);font-weight:600;text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
.tbl td{padding:11px 6px;border-bottom:1px solid var(--line2)}
.tbl td.r,.tbl th.r{text-align:right;font-variant-numeric:tabular-nums}
.tbl .neg{color:var(--ink2)}.tbl .pos{color:var(--acc-ink);font-weight:700}
.tbl a{color:var(--acc-ink);font-weight:600;text-decoration:none}
.faq{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faq div{padding:16px 18px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.faq b{display:block;font-size:14.5px;margin-bottom:4px}
.faq span{font-size:13.5px;color:var(--dim)}

/* ── 전문가로 가입하기 (단계) ── */
.steps{display:flex;gap:6px;margin:0 0 28px}
.steps div{flex:1;height:5px;border-radius:999px;background:var(--line)}
.steps div.on{background:var(--acc)}
.steps div.cur{background:linear-gradient(90deg,var(--acc) 50%,var(--line) 50%)}
.stepn{font-size:13px;color:var(--acc-ink);font-weight:700;margin-bottom:6px}
.jhero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.jhero .big{margin-bottom:12px}
.jlist{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:10px}
.jlist li{display:flex;gap:12px;align-items:center;font-size:15px}
.jlist li i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--acc-soft);color:var(--acc-ink);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.calc{padding:24px}
.calc .r{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:14px}
.calc .r .stepper{height:38px}.calc .r .stepper button{width:36px}.calc .r .stepper input{width:90px;font-size:15px}.calc .r .stepper input.n{width:46px}
.calc .res{margin-top:16px;padding:16px;border-radius:12px;background:var(--side);color:var(--side-ink)}
.calc .res b{display:block;font-size:30px;background:linear-gradient(180deg,#FFFFFF,#AEB7C3);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.calc .res small{color:var(--side-dim)}
.vcode{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vcode .inp{width:180px;letter-spacing:.3em;font-weight:700;text-align:center;font-size:18px}
.hint{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;background:#EEF0FF;color:#3F44A8;font-size:13px}
.hint b{letter-spacing:.2em}
.agree{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding:14px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.agree label{display:flex;gap:10px;align-items:center;font-size:14px;cursor:pointer}
.agree label.all{font-weight:700;padding-bottom:8px;border-bottom:1px solid var(--line2)}
.agree input,.chk input{width:18px;height:18px;accent-color:var(--acc-ink)}
.photo{display:flex;gap:18px;align-items:center}
.photo .av.xl{border:3px solid var(--card);box-shadow:var(--sh)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pay{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:14px;color:var(--dim)}
.pay b{color:var(--ink)}
.prev{margin-top:20px}
.prev .cap{font-size:12.5px;color:var(--dim);margin-bottom:8px}
.radio{display:flex;flex-direction:column;gap:8px}
.radio label{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer}
.radio label.on{border-color:var(--acc-line);background:var(--acc-soft)}
.radio b{display:block;font-size:14.5px}.radio small{color:var(--dim);font-size:13px}
.radio input{margin-top:4px;accent-color:var(--acc-ink)}

/* ── 전문가 화면(받는 쪽) ── */
.dh{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:22px}
.dh .tx{flex:1;min-width:220px}
.dh .nm{font-size:22px;font-weight:800;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.onoff{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--card);font-weight:700}
.onoff.on{border-color:var(--acc-line);background:var(--acc-soft);color:var(--acc-ink)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.kpis div{padding:16px 18px}
.kpis span{display:block;font-size:12.5px;color:var(--dim)}
.kpis b{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.oc{padding:18px 20px;margin-bottom:12px;animation:rise .3s both;border-color:var(--acc-line);box-shadow:0 0 0 3px var(--acc-soft),var(--sh)}
.oc .o1{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.oc .o1 b{font-size:16px}
.oc .otx{margin:10px 0;color:var(--ink2);font-size:14.5px;white-space:pre-wrap}
.oc .o2{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px}
.oc .o2 .money{font-weight:800;font-size:16px}
.payc{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin-top:12px}
.prac{display:flex;gap:16px;align-items:center;padding:18px 20px;margin-top:12px;background:linear-gradient(120deg,var(--side),var(--side3));color:var(--side-ink);border:0}
.prac b{display:block;font-size:16px;color:#fff}.prac small{color:var(--side-dim);font-size:13px}
.prac .tx{flex:1}

/* 알림(아래에서 잠깐) */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:100;display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100% - 32px));
  padding:12px 14px 12px 18px;border-radius:14px;background:var(--side);color:var(--side-ink);box-shadow:var(--sh2);font-size:14px;transition:opacity .2s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{border:0;border-radius:9px;background:var(--steel);color:var(--steel-ink);font-weight:700;height:32px;padding:0 12px;white-space:nowrap}
.cpick{display:flex;gap:6px;align-items:center;padding:4px 10px 10px}
.cpick button{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.cpick button.on{box-shadow:0 0 0 2px var(--ink)}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes shim{to{background-position:-200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{50%{opacity:.45}}
@keyframes flash{0%{background:var(--acc-soft)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── 좁은 화면 ── */
@media (max-width:1280px){.app{grid-template-columns:260px minmax(0,1fr) 310px}.app.noside{grid-template-columns:260px minmax(0,1fr) 0}.xrow{grid-template-columns:auto minmax(0,1fr) 150px 150px}.plans4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1080px){.xp{grid-template-columns:1fr}.buy{position:static}.jhero{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  body{overflow:auto}
  .top{padding:0 10px;gap:4px;height:54px}.brand{margin-right:6px}.brand .bar,.brand .nd{display:none}.wm{font-size:11px;letter-spacing:.3em}
  .nav a{padding:7px 9px;font-size:13.5px}.nav a.on::after{bottom:-9px}.credit{display:none}.modes button{padding:0 9px}.joinb{padding:0 10px;font-size:12.5px}
  .app,.app.noside,.app.wide{display:block;height:calc(100% - 54px)}
  .app>.list,.app>.center,.app>.side{display:none;height:100%}
  .app[data-m="list"]>.list,.app[data-m="center"]>.center,.app[data-m="side"]>.side{display:flex}
  .th .back{display:inline-grid}
  .page{padding:24px 16px 60px}
  .big{font-size:28px}.h1{font-size:24px}
  .xrow{grid-template-columns:auto minmax(0,1fr);gap:12px 14px;padding:16px}
  .xrow .xseat{grid-column:1 / -1}.xrow .xprice{grid-column:1 / -1;display:flex;align-items:center;gap:10px;text-align:left}.xrow .xprice .btn{margin:0 0 0 auto;width:auto}
  .how4,.faq,.bgrid,.row2,.payc{grid-template-columns:1fr}.plans4{grid-template-columns:1fr}  .th{flex-wrap:wrap;padding:10px 12px}.clock b{font-size:20px}
  .menu{position:fixed;left:12px!important;right:12px!important;min-width:0;max-width:none}
}
.typing{display:inline-flex;gap:3px;margin-left:4px;vertical-align:middle}
.typing i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;animation:tdot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes tdot{30%{opacity:1;transform:translateY(-2px)}}