:root{ --paper:#fff; --wash:#F6F6F3; --sink:#EFEFEA; --line:#E8E5DF; --ink:#111213; --ink2:#55585D; --ink3:#8B8D91; --brand:#111213; --brand-ink:#fff; --accent:#111213; --ok:#1A8F5A; --warn:#C8640F; --info:#4F5BD5; --aic:#55585D; --c-blue:#1d4ed8; --c-violet:#6d28d9; --c-green:#15803d; --c-orange:#c2410c; --c-red:#b91c1c; --pink:#D81B60; --pink-d:#B3134D; --pink-s:#FDE7EF; --soft:#E9E9E4; --lemon:#FBF3D9; --lemon-ink:#6B4800; --mint:#E3F6EE; --ease:cubic-bezier(.2,.8,.2,1); --pin-bg:#F6F6F3; --pin-fg:#15171C; --pin-fg2:rgba(21,23,28,.55); --pin-fg3:rgba(21,23,28,.72); --pin-key:rgba(21,23,28,.07); --pin-keydn:rgba(21,23,28,.22); --pin-ring:rgba(21,23,28,.7); --pin-a1:transparent; --pin-a2:transparent; --on-acc:#fff; color-scheme:light; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) input[type=time]{color-scheme:dark}:root:not([data-theme="light"]){ --paper:#1A1B1F; --wash:#111215; --sink:#23252B; --line:#2E3038; --ink:#F3F4F6; --ink2:#B4B9C3; --ink3:#7E8593; --brand:#F3F4F6; --brand-ink:#15171C; --accent:#F3F4F6; --ok:#3FCB8C; --warn:#F0925C; --info:#9AA3FF; --aic:#B4B9C3; --c-blue:#9DB9FF; --c-violet:#C9AEFF; --c-green:#86EFAC; --c-orange:#FDBA74; --c-red:#FCA5A5; --pink:#F06A97; --pink-d:#F59BBB; --pink-s:rgba(240,106,151,.16); --soft:#2A2C33; --lemon:rgba(240,200,90,.13); --lemon-ink:#F0D48A; --mint:rgba(63,203,140,.14); --pin-bg:#111215; --pin-fg:#fff; --pin-fg2:rgba(255,255,255,.62); --pin-fg3:rgba(255,255,255,.78); --pin-key:rgba(255,255,255,.14); --pin-keydn:rgba(255,255,255,.45); --pin-ring:rgba(255,255,255,.85); --pin-a1:transparent; --pin-a2:transparent; --on-acc:#111215; color-scheme:dark; }} /* 설정 → 화면에서 고른 테마 (시스템 설정보다 우선) */ :root[data-theme="dark"] input[type=time]{color-scheme:dark} :root[data-theme="dark"]{ --paper:#1A1B1F; --wash:#111215; --sink:#23252B; --line:#2E3038; --ink:#F3F4F6; --ink2:#B4B9C3; --ink3:#7E8593; --brand:#F3F4F6; --brand-ink:#15171C; --accent:#F3F4F6; --ok:#3FCB8C; --warn:#F0925C; --info:#9AA3FF; --aic:#B4B9C3; --c-blue:#9DB9FF; --c-violet:#C9AEFF; --c-green:#86EFAC; --c-orange:#FDBA74; --c-red:#FCA5A5; --pink:#F06A97; --pink-d:#F59BBB; --pink-s:rgba(240,106,151,.16); --soft:#2A2C33; --lemon:rgba(240,200,90,.13); --lemon-ink:#F0D48A; --mint:rgba(63,203,140,.14); --pin-bg:#111215; --pin-fg:#fff; --pin-fg2:rgba(255,255,255,.62); --pin-fg3:rgba(255,255,255,.78); --pin-key:rgba(255,255,255,.14); --pin-keydn:rgba(255,255,255,.45); --pin-ring:rgba(255,255,255,.85); --pin-a1:transparent; --pin-a2:transparent; --on-acc:#111215; color-scheme:dark; } :root[data-theme="light"] input[type=time]{color-scheme:light} :root[data-theme="light"]{color-scheme:light} *{box-sizing:border-box;margin:0;padding:0} body{background:var(--wash);color:var(--ink); font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic","Segoe UI",system-ui,sans-serif; font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased} button,input,select,textarea{font:inherit;color:inherit} .mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums} .hide{display:none!important} a{color:var(--info)} @keyframes up{from{opacity:.01;transform:translateY(7px)}to{opacity:1;transform:none}} @keyframes bubIn{0%{opacity:0;transform:translateY(8px) scale(.96)}100%{opacity:1;transform:none}} @keyframes pop{from{opacity:.01;transform:scale(.97)}to{opacity:1;transform:none}} @keyframes glow{0%{box-shadow:0 0 0 0 rgba(212,98,44,.45)}70%{box-shadow:0 0 0 7px rgba(212,98,44,0)}100%{box-shadow:0 0 0 0 rgba(212,98,44,0)}} .up{animation:up .34s var(--ease)} header{background:var(--brand);color:var(--brand-ink);padding:0 20px;position:sticky;top:0;z-index:20} .hin{max-width:2400px;margin:0 auto;display:flex;align-items:center;gap:12px;height:54px;min-width:0} .hin .lg{width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:none} .hin b{font-size:15.5px;font-weight:600;letter-spacing:0;white-space:nowrap;flex:none} .hin select{flex:none;width:132px;background:rgba(255,255,255,.2);color:var(--brand-ink);border:0;border-radius:9px; padding:6px 26px 6px 10px;font-size:13px;font-weight:500;cursor:pointer;appearance:none;-webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 14px) 52%,calc(100% - 10px) 52%;background-size:4px 4px,4px 4px;background-repeat:no-repeat} .hin select option{color:#15171C;background:#fff} .hin .sp{margin-left:auto;flex:1 1 auto;min-width:8px} .hin .st{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap;flex:none;isolation:isolate} .hin .st i{width:8px;height:8px;border-radius:50%;background:#8CF3C0;display:block;flex:none;position:relative} /* speed work 10-13: the pulse is a disc behind the dot that grows and fades with transform and opacity, so the compositor runs it; the old box-shadow pulse repainted the header 60 times a second for as long as the console was open */ .hin .st i::after,.stc.open i::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(140,243,192,.75);z-index:-1;pointer-events:none;animation:beatR 2.2s var(--ease) infinite} .hin .st i.off{background:rgba(255,255,255,.5)} .hin .st i.off::after{animation:none;opacity:0} @keyframes beatR{0%{transform:scale(1);opacity:1}70%{transform:scale(2.75);opacity:0}100%{transform:scale(1);opacity:0}} @keyframes beat{0%{box-shadow:0 0 0 0 rgba(140,243,192,.75)}70%{box-shadow:0 0 0 7px rgba(140,243,192,0)}100%{box-shadow:0 0 0 0 rgba(140,243,192,0)}} .hin .mdl{font-size:11px;opacity:.72;white-space:nowrap;flex:none} .hin .me{display:flex;align-items:center;gap:6px;font-size:12px;background:rgba(255,255,255,.18);border-radius:99px;padding:3px 5px 3px 11px;white-space:nowrap;flex:none} .hin .me button{background:rgba(0,0,0,.16);color:inherit;border:0;border-radius:99px;padding:2px 9px;font-size:11px;cursor:pointer;opacity:.9} .hin .me button:hover{opacity:1;background:rgba(0,0,0,.28)} @media (max-width:900px){.hin .mdl{display:none}.hin .st span{display:none}} @media (max-width:640px){.hin b{display:none}} /* 화면 언어 EN | 한국어 (헤더와 로그인 카드) */ .lsw{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:99px;background:var(--sink);flex:none} .lsw button{border:0;background:none;color:inherit;font-size:11px;font-weight:500;line-height:1;padding:5px 9px;border-radius:99px;cursor:pointer;opacity:.62;transition:opacity .15s var(--ease),background-color .15s var(--ease)} .lsw button:hover{opacity:1} .lsw button.on{opacity:1;background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1)} .lsw button:focus-visible{outline:2px solid currentColor;outline-offset:1px} .hin .lsw{background:color-mix(in srgb,currentColor 16%,transparent)} .hin .lsw button{font-size:11px;padding:4px 8px} .hin .lsw button.on{background:var(--brand-ink);color:var(--brand);box-shadow:none} #login{position:relative} #login .lsw{position:absolute;top:28px;right:24px;color:var(--ink2)} @media (max-width:480px){#login .lsw{top:22px;right:18px}} nav{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:54px;z-index:19} .nin{max-width:2400px;margin:0 auto;display:flex;flex-wrap:wrap;gap:2px;padding:0 12px} .nin button{position:relative;padding:12px 14px;font-size:14px;font-weight:500;color:var(--ink3); background:none;border:0;cursor:pointer;white-space:nowrap;transition:color .15s var(--ease)} .nin button:hover{color:var(--ink2)} .nin button.on{color:var(--ink);font-weight:500} .nin button.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--brand);border-radius:2px;animation:pop .26s var(--ease)} .nin .bdg{display:inline-block;background:var(--brand);color:var(--brand-ink);border-radius:99px;font-size:11px;font-weight:600;padding:1px 6px;margin-left:5px;vertical-align:1px;animation:glow 2.2s 3} main{max-width:2400px;margin:0 auto;padding:16px 14px 60px} section[hidden]{display:none} .card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px} /* 설정처럼 독립된 카드가 여럿일 때는 화면 폭에 맞춰 여러 열로 깝니다. */ /* 설정처럼 높이가 제각각인 카드는 다단(masonry)으로 채워 빈틈이 생기지 않게 합니다. */ .masonry{columns:3;column-gap:14px} .seg3{display:flex;background:var(--sink);border-radius:10px;padding:3px;gap:0;max-width:360px} .seg3 button{flex:1 1 0;padding:7px 6px;border-radius:8px;border:0;background:transparent;color:var(--ink3);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease)} .seg3 button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.10),0 0 0 1px var(--line)} .card p.lead{color:var(--ink3);font-size:12px;line-height:1.6;margin-bottom:10px} .masonry .card{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 14px} @media (max-width:1100px){.masonry{columns:2}} input[type=range]{max-width:520px;display:block} #t-cfg .row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} #t-cfg textarea{max-width:none} .two{display:grid;grid-template-columns:1fr 1fr;gap:0 24px} .themes{display:flex;flex-wrap:wrap;gap:8px} .th{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:12px;padding:7px 12px 7px 8px;cursor:pointer;background:var(--paper);font-size:13px;font-weight:500;color:var(--ink2);transition:border-color .15s var(--ease),transform .35s cubic-bezier(.36,0,0,1)} .th:hover{border-color:var(--ink3)} .th:active{transform:scale(.96);transition:transform 0s} .th.on{border-color:var(--ink);color:var(--ink)} .th i{width:26px;height:26px;border-radius:9px;display:block;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)} .th i::after{content:"";display:block;width:10px;height:10px;border-radius:50%;margin:8px;background:rgba(255,255,255,.9)} .th.on i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)} @media (max-width:760px){.two{grid-template-columns:1fr}} .chd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px} .chd b{font-size:15px;font-weight:500} .muted{color:var(--ink3);font-size:12px} .p{background:var(--brand);color:var(--brand-ink);border:0;border-radius:10px;padding:9px 16px;cursor:pointer;font-weight:500;font-size:13px;white-space:nowrap;transition:transform .35s cubic-bezier(.36,0,0,1) 10ms,filter .15s var(--ease)} .p:hover{filter:brightness(1.06)} .p:active{transition:transform 0s;transform:scale(.95)} .p[disabled]{opacity:.35;cursor:default} .s{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:9px 14px;cursor:pointer;font-size:13px;white-space:nowrap;transition:border-color .15s var(--ease),color .15s var(--ease)} .s:hover{border-color:var(--brand);color:var(--brand)} .s.dz:hover{border-color:var(--warn);color:var(--warn)} label{display:block;font-size:12px;font-weight:500;color:var(--ink2);margin:12px 0 5px} input[type=text],input[type=password],input[type=number],input[type=search],input[type=time],select,textarea{width:100%;padding:9px 11px;background:var(--paper);border:1px solid var(--line);border-radius:9px;outline:0;transition:border-color .15s var(--ease)} input:focus,textarea:focus,select:focus{border-color:var(--brand)} input[type=range]{width:100%;accent-color:var(--brand)} textarea{resize:vertical;font-family:"IBM Plex Mono",monospace;font-size:13px;line-height:1.7} .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px} .inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .inline input{flex:1;min-width:110px} .sw{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px} .sw:last-child{border-bottom:0} .sw input[type=checkbox]{width:auto;accent-color:var(--brand);transform:scale(1.15)} .sw span{flex:1} .sw small{display:block;color:var(--ink3);font-size:12px;font-weight:400} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(156px,1fr));gap:12px;margin-bottom:14px} .kpi{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 15px} .kpi dt{font-size:11px;letter-spacing:.06em;color:var(--ink3);font-weight:500;margin-bottom:6px} .kpi dd{font-family:"IBM Plex Mono",monospace;font-size:22px;font-weight:500;letter-spacing:-.6px;line-height:1.1} .kpi dd small{font-family:"IBM Plex Sans KR",sans-serif;font-size:12px;color:var(--ink3);font-weight:400;letter-spacing:0;display:block;margin-top:5px} .kpi.acc dd{color:var(--brand)} .meter{height:6px;border-radius:99px;background:var(--sink);overflow:hidden;margin-top:9px} .meter i{display:block;width:100%;height:100%;background:var(--brand);border-radius:99px;transform-origin:left center;transform:scaleX(0);transition:transform .5s var(--ease)} .meter i.hot{background:var(--warn)} .bars{display:flex;align-items:flex-end;gap:3px;height:72px;margin-top:4px} .bars div{flex:1;background:var(--sink);border-radius:3px 3px 0 0;position:relative;min-height:3px;transition:background .15s var(--ease)} .bars div.has{background:var(--brand);opacity:.55} .bars div:hover{opacity:1} .bars div span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:var(--ink2);opacity:0;transition:opacity .15s var(--ease);pointer-events:none;background:var(--paper);padding:2px 6px;border-radius:6px;border:1px solid var(--line);z-index:2} .bars div:hover span{opacity:1} .bars div:first-child span{left:0;transform:none}.bars div:last-child span{left:auto;right:0;transform:none}.bars{overflow-x:clip} .bx{display:flex;justify-content:space-between;font-size:11px;color:var(--ink3);margin-top:6px} .todo{list-style:none;display:grid;gap:7px} .todo li{background:var(--wash);border:1px solid var(--line);border-radius:11px;padding:10px 12px;display:flex;gap:10px;align-items:center;font-size:13px} .todo li span{flex:1;min-width:0} .todo li button{padding:5px 11px;font-size:12px} .live{display:grid;grid-template-columns:var(--lw,336px) 6px minmax(0,1fr) 6px var(--pw,292px);gap:0;height:var(--lh,calc(100vh - 136px));min-height:440px} .live.nopro{grid-template-columns:var(--lw,336px) 6px minmax(0,1fr) 0 0} .live.nopro .grip2,.live.nopro .pro{display:none} .live .pane:first-child{margin-right:0} .grip{cursor:col-resize;display:flex;align-items:center;justify-content:center;position:relative} .grip::after{content:"";width:3px;height:38px;border-radius:99px;background:var(--line);transition:background .15s var(--ease)} .grip:hover::after,.grip.on::after{background:var(--brand)} .hgrip{height:8px;margin-top:6px;cursor:row-resize;display:flex;align-items:center;justify-content:center} .hgrip::after{content:"";width:56px;height:3px;border-radius:99px;background:var(--line)} .hgrip:hover::after{background:var(--brand)} .pane{background:var(--paper);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden} /* 목록 필터: 큰 세 칸(상담원 요청 / AI 답변중 / 전체)만 눈에 띄고, 나머지는 조용한 글자 줄로 */ .seg{display:flex;flex-wrap:wrap;gap:4px;padding:10px 10px 6px} .seg.main{gap:0;background:var(--sink);border-radius:12px;padding:3px;margin:10px 10px 6px} .seg.main button{flex:1 1 0;padding:8px 6px;border-radius:9px;border:0;background:transparent;color:var(--ink3);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)} .seg.main button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.10),0 0 0 1px var(--line)} .seg.main button.on.want{color:var(--warn)} .seg.main button .c{opacity:.7;font-weight:500;margin-left:4px;font-variant-numeric:tabular-nums} .seg.main button.want .c:not(:empty){opacity:1} .seg.sub{padding:0 10px 4px;gap:2px 10px} .seg.sub button{padding:3px 0;border:0;background:none;color:var(--ink3);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;border-radius:0;transition:color .15s var(--ease),border-color .15s var(--ease)} .seg.sub button:hover{color:var(--ink2)} .seg.sub button.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:500} .seg.sub button .c{opacity:.7} .tools2 button.ico{width:34px;padding:0;display:inline-flex;align-items:center;justify-content:center} .tools2 button.s.act{border-color:var(--ink);color:var(--ink);font-weight:500} .tools2{padding:0 10px 9px;display:flex;gap:6px;align-items:center;flex-wrap:wrap} .tools2.tight{padding-top:0} .tools2 input[type=search]{padding:8px 11px;font-size:13px;border-radius:9px;flex:1 1 120px;min-width:0} .tools2 .chk,.selbar .chk{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;font-weight:500;color:var(--ink2);cursor:pointer;white-space:nowrap} .selbar .chk{color:var(--ink)} .selbar .chk input,.tools2 .chk input{width:auto;margin:0;accent-color:var(--brand)} .tools2 .chk input{width:auto;accent-color:var(--brand)} .tools2 button{padding:7px 10px;font-size:12px} #rooms{overflow-y:auto;flex:1;border-top:1px solid var(--line)} .ri{padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;gap:9px;align-items:flex-start;position:relative;transition:background .15s var(--ease)} .ri:hover{background:var(--wash)} .ri.on{background:var(--sink)} .ri.fresh{animation:up .32s var(--ease)} @keyframes rowBye{to{opacity:0;transform:translateX(-14px) scale(.98);max-height:0;padding-top:0;padding-bottom:0;margin:0}} .ri.bye{animation:rowBye .3s cubic-bezier(.4,0,1,1) forwards;pointer-events:none;overflow:hidden;max-height:120px} .tag.back{background:var(--ok);color:var(--on-acc)} .tag.vis{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)} .vlist{display:grid;gap:5px} .vlist button{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--paper);border-radius:9px;padding:7px 9px;cursor:pointer;font-size:12px;line-height:1.45} .vlist button:hover{border-color:var(--brand)} .vlist button b{display:block;font-size:12px;color:var(--ink)} .vlist button span{display:block;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 연락처 없음, owner 10-06: 프로필을 회색으로 */ .ri .em.nocx,#pav.nocx{background:var(--sink)!important;filter:grayscale(1);opacity:.6} .ri .em{width:32px;height:32px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;flex:none} .ri .tx{min-width:0;flex:1} .ri .nm{font-size:13px;font-weight:500;display:flex;align-items:center;gap:5px;flex-wrap:wrap} .ri .lst{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px} .ri .mt{font-size:11px;color:var(--ink3);margin-top:3px} .ri .acts{position:absolute;top:9px;right:9px;display:flex;gap:4px;opacity:0;transition:opacity .15s var(--ease)} .ri:hover .acts{opacity:1} .ri .acts button{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0} .ri .acts button:hover{color:var(--warn);border-color:var(--warn)} .ri .un{position:absolute;bottom:11px;right:12px;background:var(--brand);color:var(--brand-ink);border-radius:99px;font-size:11px;font-weight:600;padding:1px 6px} .ri.un .nm{font-weight:600;color:var(--ink)} .ri.un .lst{font-weight:600;color:var(--ink)} .ri.un .mt{color:var(--ink2)} .ri.un::before{content:"";position:absolute;left:4px;top:28px;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--pink)} /* unread: a small dot, not a left bar (owner 10-10) */ .ri .ck{flex:none;width:18px;height:18px;margin-top:8px;accent-color:var(--brand);cursor:pointer;display:none} .pane.pick .ri .ck{display:block} .pane.pick .ri .acts{display:none} .selbar{display:none;align-items:center;gap:8px 10px;padding:9px 12px;background:var(--sink);border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap} .pane.pick .selbar{display:flex} .selbar b{color:var(--brand)} .selbar .sp{margin-left:auto;display:flex;gap:6px} .selbar button{padding:5px 11px;font-size:12px} .tag{display:inline-block;border-radius:5px;font-size:11px;font-weight:600;padding:1px 5px;letter-spacing:.02em} .tag.want{background:var(--warn);color:var(--on-acc);animation:glow 2.2s infinite} .tag.ai{background:var(--sink);color:var(--ink2);font-weight:500} .tag.flag{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)} /* 아바타 모서리 점: 회색 = AI, 주황 = 상담원 요청, 초록 = 상담중 */ .ri .em{position:relative} .ri .em::after{content:"";position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;border:2px solid var(--paper);background:var(--ink3)} .ri.m-wait .em::after,.ri.m-flag .em::after{background:var(--warn)} .ri.m-wait .em::after{animation:glow 2.2s infinite} .ri.m-human .em::after{background:var(--ok)} .ri.m-wait{background:color-mix(in srgb,var(--warn) 6%,transparent)} .ri.m-wait:hover{background:color-mix(in srgb,var(--warn) 10%,transparent)} .ri.m-wait.on{background:color-mix(in srgb,var(--warn) 14%,transparent)} .ri.m-human{background:color-mix(in srgb,var(--ok) 5%,transparent)} .ri.m-human.on{background:color-mix(in srgb,var(--ok) 12%,transparent)} /* 대화 헤더 상태 알약 */ .mpill{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:1px 8px;font-size:11px;font-weight:600;margin-right:5px;vertical-align:1px} .mpill.ai{background:var(--sink);color:var(--ink2)} .mpill.wait{background:var(--warn);color:var(--on-acc);animation:glow 2.2s infinite} .mpill.human{background:var(--ok);color:var(--on-acc)} .rvh.m-wait{background:color-mix(in srgb,var(--warn) 7%,transparent)} .rvh.m-human{background:color-mix(in srgb,var(--ok) 6%,transparent)} .tag.human{background:var(--ok);color:var(--on-acc)} .tag.onair{background:var(--info);color:var(--on-acc)} .tag.wait{background:var(--sink);color:var(--warn)} .tag.done{background:var(--sink);color:var(--ink3)} .tag.hold{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)} .tag.tg{background:transparent;border:1px solid var(--line);color:var(--ink3);font-weight:500} .tag.mine{background:var(--info);color:var(--on-acc)} .tag.test{background:transparent;border:1px dashed var(--ink3);color:var(--ink3);font-weight:600} .ri.test{opacity:.72} .ri.test:hover{opacity:1} .facts{display:flex;gap:4px 14px;flex-wrap:nowrap;overflow:hidden;padding:5px 12px;background:color-mix(in srgb,var(--brand) 6%,transparent);border-bottom:1px solid var(--line)} .facts div{font-size:12px;display:flex;gap:4px;align-items:baseline;white-space:nowrap;min-width:0} .facts b{color:var(--ink3);font-weight:500;font-size:11px;flex:none} .facts span{font-weight:500;overflow:hidden;text-overflow:ellipsis} @media (min-width:1181px){.live:not(.nopro) .facts{display:none}} .iss{display:flex;align-items:center;gap:5px;margin:2px 0 3px;font-size:12px;color:var(--ink2);min-width:0} .iss .k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .ic{flex:none;display:inline-block;font-size:11px;font-weight:600;line-height:16px;padding:0 6px;border-radius:6px;background:var(--sink);color:var(--ink2);letter-spacing:0;white-space:nowrap} .ic.hi{background:#FDECEC;color:#B42318} .ic.c-quote{background:#FDE7EF;color:#B3134D}.ic.c-pricing{background:#FFF1E6;color:#B54708}.ic.c-moq{background:#E8F0FE;color:#1B4FBF}.ic.c-samples{background:#EEF6EE;color:#1F7A3E}.ic.c-formula{background:#F3F0FF;color:#5B3DB8}.ic.c-packaging{background:#FFF7DB;color:#8A6400}.ic.c-certification{background:#E6F6F4;color:#0F766E}.ic.c-shipping{background:#E9F4FF;color:#0B5CAD}.ic.c-payment{background:#EEF0F3;color:#3F4450}.ic.c-visit_or_tour{background:#FDECEC;color:#B42318}.ic.c-other{background:var(--sink);color:var(--ink3)} .isscard{padding:5px 12px;border-bottom:1px solid var(--line);background:var(--paper)} .isscard .ish{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;min-height:24px;cursor:pointer} .isscard .ish b{font-size:13px;white-space:nowrap;flex:none} .isscard .ish .isl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--ink2)} .isscard .ish .isl i{font-style:normal;color:var(--ink3);margin:0 3px 0 6px} .isscard .ish .isl i:first-child{margin-left:0} .isscard .ish .sp{display:none} .isscard .ish .chv{flex:none;color:var(--ink3);font-size:11px;transition:transform .2s var(--ease)} .isscard.open .ish .chv{transform:rotate(180deg)} .isscard .ish button{flex:none;font-size:11px;padding:2px 8px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--ink2);cursor:pointer;white-space:nowrap} .isscard .ish button.pgo{background:var(--sink);color:var(--ink)} .isscard .ish button:disabled{opacity:.6;cursor:default} .isscard .isb{display:none;grid-template-columns:1fr 1fr;gap:6px 14px;margin:8px 0 2px} .isscard.open .isb{display:grid} .isscard .isb div{font-size:12px;line-height:1.45;color:var(--ink)} .isscard .isb b{display:block;font-size:11px;color:var(--ink3);font-weight:500;margin-bottom:1px} .isscard .isf{margin-top:6px;font-size:11px;color:var(--ink3);display:none;align-items:center;gap:8px;flex-wrap:wrap} .isscard.open .isf{display:flex} .isscard .isf button{font-size:11px;padding:2px 9px;border-radius:7px;border:1px solid var(--line);background:var(--sink);color:var(--ink);cursor:pointer} input[type=time]{width:auto;flex:1;min-width:0;padding-left:8px;padding-right:6px} .days{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}.days label{display:inline-flex;align-items:center;gap:3px;font-size:12px;margin:0;padding:4px 7px;border:1px solid var(--line);border-radius:7px;cursor:pointer}.days input{margin:0} /* ---- 고객 프로필 패널 ---- */ .pro{display:flex;flex-direction:column;min-height:0} .proh{padding:16px 15px 13px;border-bottom:1px solid var(--line);text-align:center} .proh .av{width:52px;height:52px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:25px;margin:0 auto 9px} .proh b{font-size:15px;display:block} .proh .sub{font-size:12px;color:var(--ink3);margin-top:2px} .proh .lnk{display:flex;gap:6px;justify-content:center;margin-top:10px} .proh .lnk button{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:5px 10px;font-size:12px;color:var(--ink2);cursor:pointer} .proh .lnk button:hover{border-color:var(--brand);color:var(--brand)} .prob{flex:1;overflow-y:auto} .pg{border-bottom:1px solid var(--line)} .pgh{display:flex;align-items:center;gap:7px;padding:10px 15px;cursor:pointer;user-select:none;font-size:12px;font-weight:500;color:var(--ink2);letter-spacing:.02em} .pgh:hover{background:var(--wash)} .pgh .chev{margin-left:auto;color:var(--ink3);transition:transform .18s var(--ease)} .pg.open .pgh .chev{transform:rotate(90deg)} .pf{display:flex;gap:8px;font-size:12px;padding:4px 0;align-items:baseline} .pf b{color:var(--ink3);font-weight:500;font-size:11px;flex:none;width:66px} .pf span{flex:1;min-width:0;word-break:break-word} .pf.hl span{font-weight:500;color:var(--brand)} .pf .tag{margin-left:5px;vertical-align:1px} .pf .mut{color:var(--ink3)} .pcp{margin-left:6px;border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:0 6px;font:inherit;font-size:11px;line-height:17px;color:var(--ink2);cursor:pointer;vertical-align:1px} .pcp:hover{border-color:var(--brand);color:var(--brand)} .tgs{display:flex;flex-wrap:wrap;gap:5px} .tg{display:inline-flex;align-items:center;gap:4px;background:var(--sink);border-radius:7px;font-size:11px;padding:3px 5px 3px 8px;color:var(--ink2)} .tg button{border:0;background:none;color:var(--ink3);cursor:pointer;font-size:12px;line-height:1;padding:0 1px} .tg button:hover{color:var(--warn)} .tgadd{border:1px dashed var(--line);border-radius:7px;background:none;color:var(--ink3);font-size:11px;padding:3px 9px;cursor:pointer} .tgadd:hover{border-color:var(--brand);color:var(--brand)} .qtg{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px} .qtg button{border:1px solid var(--line);background:none;border-radius:6px;font-size:11px;padding:2px 7px;color:var(--ink3);cursor:pointer} .qtg button:hover{border-color:var(--brand);color:var(--brand)} .nts{display:grid;gap:6px} .nt1{background:color-mix(in srgb,var(--info) 10%,transparent);border:1px solid color-mix(in srgb,var(--info) 28%,transparent);border-radius:9px;padding:7px 10px;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word} .nt1 small{display:block;color:var(--ink3);font-size:11px;margin-top:3px} /* ---- 상태 칩 / 헤더 액션 ---- */ .stc{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;cursor:pointer;background:var(--paper);color:var(--ink2)} .stc i{width:7px;height:7px;border-radius:50%;background:var(--ink3);display:block} .stc.open{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)} .stc.open i{background:var(--ok)} .stc.hold{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)} .stc.hold i{background:var(--warn)} .stc.closed{color:var(--ink3)} .menu{position:absolute;z-index:40;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:5px;min-width:168px;box-shadow:0 12px 34px rgba(0,0,0,.14);animation:pop .16s var(--ease)} .menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px;font-size:13px;cursor:pointer;color:var(--ink)} .menu button:hover{background:var(--sink)} .menu button.dz{color:var(--warn)} .menu hr{border:0;border-top:1px solid var(--line);margin:4px 2px} .menu .kbd{margin-left:auto;font-size:11px;color:var(--ink3)} /* ---- 답장 / 메모 작성 ---- */ .cbar{display:flex;align-items:center;gap:6px;padding:6px 10px 0;border-top:1px solid var(--line);min-width:0} .cmt{display:flex;gap:2px;padding:0;border:0;flex:none} .cmt button{border:0;background:none;padding:4px 9px;border-radius:8px;font-size:12px;font-weight:500;color:var(--ink3);cursor:pointer;white-space:nowrap} .cmt button.on{background:var(--sink);color:var(--ink)} .cmt button.on.note{background:color-mix(in srgb,var(--info) 18%,transparent);color:var(--info)} .cmt .sp,.cmt .hint{display:none} .rvi.note{background:color-mix(in srgb,var(--info) 7%,transparent)} .rvi.note textarea{border-color:color-mix(in srgb,var(--info) 40%,transparent)} .rvi.note .p{background:var(--info)} .mb.note{background:color-mix(in srgb,var(--info) 11%,transparent);border:1px solid color-mix(in srgb,var(--info) 30%,transparent);color:var(--ink);max-width:82%} .mb.note .nb{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--info);margin-bottom:3px;letter-spacing:.02em} .mb.note .nb svg{flex:none} .sr{position:absolute;left:10px;right:10px;bottom:100%;margin-bottom:6px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.14);max-height:230px;overflow-y:auto;z-index:30;animation:pop .16s var(--ease)} .sr div{padding:9px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sr div:last-child{border-bottom:0} .sr div.on,.sr div:hover{background:var(--sink)} .sr .hd{font-size:11px;color:var(--ink3);padding:7px 12px;cursor:default;background:var(--wash)} .dv{align-self:center;font-size:11px;color:var(--ink3);background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:2px 12px;margin:10px auto 6px} .logs{align-self:center;margin:4px auto;max-width:88%;text-align:center} .logs>button{border:1px dashed var(--line);background:none;color:var(--ink3);border-radius:99px;font-size:11px;padding:2px 12px;cursor:pointer} .logs>button:hover{color:var(--ink2);border-color:var(--ink3)} .logs .in{display:none;margin-top:5px} .logs.open .in{display:block} .star{border:0;background:none;color:var(--ink3);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px} .star.on{color:#F5B301} .ri .st1{color:#F5B301;font-size:11px} .rd{font-size:11px;color:var(--brand);font-weight:500} /* 고객 실시간 상태: 접속(활동 중 · 자리 비움 · 오프라인), 읽음 표시, 입력 중 */ .pz{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ink3);margin-right:6px;vertical-align:1px} .pz i,.tag.pzt i{width:7px;height:7px;border-radius:50%;background:var(--ink3);flex:none} .pz.on{color:var(--ok)}.pz.on i{background:var(--ok)} .pz.away{color:var(--warn)}.pz.away i{background:var(--warn)} .pz small{font-size:11px;font-weight:500;color:var(--ink3);margin-left:2px} .tag.pzt{display:inline-flex;align-items:center;gap:3px} .tag.pzt.on{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}.tag.pzt.on i{background:var(--ok)} .tag.pzt.away{background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--warn)}.tag.pzt.away i{background:var(--warn)} .ri .mt .nrd{color:var(--warn);font-weight:500} .ri .lst.ty{color:var(--ok);font-weight:500} .tyd{display:inline-flex;gap:2px;margin-right:5px;vertical-align:1px} .tyd i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:tyb 1.2s infinite} .mb.typing{display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:0 13px} .mb.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:tyb 1.2s infinite} .mb.typing i:nth-child(2),.tyd i:nth-child(2){animation-delay:.16s} .mb.typing i:nth-child(3),.tyd i:nth-child(3){animation-delay:.32s} @keyframes tyb{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}} @media (prefers-reduced-motion:reduce){.mb.typing i,.tyd i{animation:none!important;opacity:.6}} .rcpt{margin-left:6px;font-weight:500} .rcpt.yes{color:var(--ok)} .rcpt.no{color:var(--ink3)} .rv{display:flex;flex-direction:column;min-height:0;position:relative} .rvh{padding:7px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;flex-wrap:nowrap;min-height:50px} .rvh .em{width:32px;height:32px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;flex:none} .rvh .who{min-width:0;flex:1;display:flex;align-items:center;gap:8px} .rvh .who b{font-size:14px;display:inline-block;flex:none;max-width:min(40%,260px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text;border-radius:6px;padding:0 4px;margin-left:-4px;transition:background .15s var(--ease)} .rvh .who b:hover{background:var(--sink)} .rvh .who input.ren{font-size:14px;font-weight:600;padding:3px 8px;width:min(260px,60vw);border-radius:8px} .rvh .who span{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .rvh .who .mpill.human,.rvh .who .mpill.wait{color:var(--on-acc)}.rvh .who .mpill.ai{color:var(--ink2)} /* owner 10-17 UI pass: the grey header text made the green With agent pill unreadable */ .rvh .acts{margin-left:0;flex:none;display:flex;gap:5px;flex-wrap:nowrap} .rvh .acts button{padding:6px 10px;font-size:12px} .moreb{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:4px 9px;font-size:12px;color:var(--ink3);cursor:pointer} .moreb:hover{color:var(--brand);border-color:var(--brand)} .info{padding:10px 14px;background:var(--wash);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 16px;font-size:12px;color:var(--ink2)} .info b{color:var(--ink3);font-weight:500;margin-right:5px} #rvbody{flex:1;overflow-y:auto;padding:14px;background:var(--wash);display:flex;flex-direction:column;gap:3px} .mrow+.mrow{margin-top:2px} .mrow.gapped{margin-top:10px} .mmeta{font-size:11px;color:var(--ink3);margin:2px 0 0 34px} .mmeta.r{text-align:right;margin:2px 2px 0 0} .mrow{display:flex;gap:8px;align-items:flex-end;max-width:100%;position:relative} .mtool{display:flex;gap:1px;flex:none;align-self:center;margin:0 4px;opacity:0;pointer-events:none; background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:2px; box-shadow:0 3px 10px rgba(0,0,0,.1);transition:opacity .13s var(--ease)} .mrow:hover .mtool{opacity:1;pointer-events:auto} .mtool button{width:24px;height:24px;border:0;background:none;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;padding:0;color:var(--ink3);display:flex;align-items:center;justify-content:center} .mtool button:hover{background:var(--sink);color:var(--ink)} .mrow.right .mtool{order:-1} .rxs{display:flex;gap:3px;flex-wrap:wrap;margin:3px 0 0 34px} .rxs.r{justify-content:flex-end;margin:3px 2px 0 0} .rxs:empty{display:none} .rx1{display:inline-flex;align-items:center;gap:3px;background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:1px 7px;font-size:11px;cursor:pointer;line-height:1.6} .rx1:hover{border-color:var(--brand)} .rx1.mine{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);font-weight:500} .qt{border-left:2px solid currentColor;padding-left:7px;margin-bottom:5px;font-size:12px;opacity:.62;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;line-height:1.45;max-width:100%} .rebar{display:flex;align-items:center;gap:9px;padding:8px 12px;background:var(--sink);border-top:1px solid var(--line);font-size:12px} .rebar .q{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)} .rebar b{color:var(--brand);font-size:11px;flex:none} .rebar button{border:0;background:none;color:var(--ink3);cursor:pointer;font-size:16px;line-height:1;flex:none} .rebar button:hover{color:var(--ink)} .epick{position:absolute;background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:4px 6px;display:flex;gap:2px;box-shadow:0 10px 28px rgba(0,0,0,.18);z-index:46;animation:pop .14s var(--ease)} .epick button{width:28px;height:28px;border:0;background:none;border-radius:50%;font-size:16px;cursor:pointer;padding:0;transition:transform .12s var(--ease)} .epick button:hover{background:var(--sink);transform:scale(1.18)} .mrow.right{justify-content:flex-end} .mrow .av{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:14px} .mrow .sp{width:26px;flex:none} .mb{max-width:70%;padding:9px 14px;border-radius:19px;font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word} .mb.tail-l{border-bottom-left-radius:6px} .mb.tail-r{border-bottom-right-radius:6px} .mb{transform-origin:bottom left} .mrow.right .mb{transform-origin:bottom right} .mrow.fresh .mb,.mb.fresh{animation:bubIn 430ms cubic-bezier(.22,.92,.3,1)} .mb.ph{padding:4px;background:var(--paper);border:1px solid var(--line);max-width:240px} .mb.ph img{display:block;width:100%;border-radius:15px;cursor:zoom-in} .lb{position:fixed;inset:0;z-index:90;background:rgba(8,10,14,.9);display:flex;align-items:center;justify-content:center;padding:24px;animation:pop .16s var(--ease)} .lb img{max-width:100%;max-height:100%;border-radius:12px} .lb button{position:absolute;top:16px;right:20px;border:0;background:none;color:#fff;font-size:30px;line-height:1;cursor:pointer} .mrow.fresh + .mmeta{animation:up .26s var(--ease) .15s} .mb.user{background:var(--paper);border:1px solid var(--line)} .mb.bot{background:var(--sink)} .mb.agent{background:var(--brand);color:var(--brand-ink)} .mrow.right .mb{margin-left:34px} .mb.system{align-self:center;background:transparent;color:var(--ink3);font-size:12px;border:1px dashed var(--line);border-radius:99px;padding:3px 12px;margin:4px auto} .mb small{display:block;font-size:11px;opacity:.6;margin-top:4px} .mb.flag{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--warn) 65%,transparent)} .tpl{display:flex;gap:5px;flex-wrap:nowrap;overflow-x:auto;padding:0;margin:0;flex:1;min-width:0;scrollbar-width:none} .tpl::-webkit-scrollbar{display:none} .tpl:empty{display:none} .tpl button{flex:none;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:4px 10px;font-size:12px;color:var(--ink2);cursor:pointer;transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease)} .tpl button:hover{border-color:var(--brand);color:var(--brand)} .rvi{padding:6px 10px 9px;display:flex;gap:8px;align-items:flex-end;position:relative} .rvi textarea{min-height:40px;max-height:130px;font-family:inherit;font-size:14px;flex:1} .empty{margin:auto;text-align:center;color:var(--ink3);font-size:13px;line-height:1.8} .note{padding:8px 14px;font-size:12px;color:var(--ink3);border-bottom:1px solid var(--line);background:var(--wash)} table{width:100%;border-collapse:collapse;font-size:13px} th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top} th{color:var(--ink3);font-size:12px;font-weight:500} /* 지식베이스 편집기 */ .kbtop{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px} .kbtop input[type=search]{flex:1;min-width:160px;padding:8px 11px;font-size:13px} .kbstat{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .kbstat span{font-size:12px;border-radius:99px;padding:4px 11px;background:var(--sink);color:var(--ink2)} .kbstat span.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);font-weight:500} .kbsec{border:1px solid var(--line);border-radius:12px;margin-bottom:9px;overflow:hidden;background:var(--paper)} .kbsec.todo{border-color:var(--warn)} .kbh{display:flex;align-items:center;gap:9px;padding:11px 13px;cursor:pointer;user-select:none} .kbh:hover{background:var(--wash)} .kbh b{font-size:14px;font-weight:500;flex:1;min-width:0} .kbh .cnt{font-size:11px;color:var(--ink3)} .kbh .warn{background:var(--warn);color:var(--on-acc);border-radius:5px;font-size:11px;font-weight:600;padding:1px 6px} .kbh .chev{color:var(--ink3);transition:transform .18s var(--ease)} .kbsec.open .kbh .chev{transform:rotate(90deg)} .kbbody textarea{min-height:120px;font-size:13px} .kbhint{font-size:12px;color:var(--ink3);margin:7px 0 0;line-height:1.6} .kbraw{min-height:56vh} .pre1{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)} .pre1:last-child{border-bottom:0} .pre1 input{font-weight:500;padding:6px 10px;font-size:13px} .pre1 .pv{grid-column:1;font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;cursor:pointer} .pre1.open .pv{display:none} .pre1 textarea{grid-column:1 / -1;min-height:96px;font-family:inherit;font-size:13px;line-height:1.55;display:none} .pre1.open textarea{display:block} .pre1 .pb{display:flex;gap:4px} .pre1 .pb button.tg{transition:transform .2s var(--ease);font-size:15px} .pre-ed{max-height:62vh;overflow:auto;padding-right:2px} .pre1.open .pb button.tg{transform:rotate(180deg)} .pre1 .pb button{width:28px;height:28px;border:1px solid var(--line);background:var(--paper);border-radius:8px;color:var(--ink3);cursor:pointer;font-size:13px;line-height:1;padding:0} .pre1 .pb button:hover{color:var(--ink);border-color:var(--ink3)} .pre1 .pb button.x:hover{color:var(--warn);border-color:var(--warn)} .pre1.fresh{animation:up .3s var(--out)} .tpl .tlb{display:none} .tpl button.ed{border-style:dashed;color:var(--ink3)} .tpl button.ed:hover{border-color:var(--brand);color:var(--brand)} .modal{position:fixed;inset:0;z-index:70;background:rgba(20,10,16,.42);display:flex;align-items:center;justify-content:center;padding:18px;animation:pop .18s var(--ease)} .mbox{background:var(--paper);border:1px solid var(--line);border-radius:16px;width:100%;max-width:640px;max-height:88vh;overflow:auto;padding:18px 18px 16px;box-shadow:0 24px 60px rgba(0,0,0,.25);animation:up .28s var(--out)} @media (max-width:760px){.modal{padding:0;align-items:stretch}.mbox{max-width:none;max-height:none;border-radius:0;border:0}} .sr .ti{font-weight:600;margin-right:6px;color:var(--ink)} .sr .tx{color:var(--ink3)} .ulist{list-style:none;display:grid;gap:6px} .ulist li{display:flex;align-items:center;gap:10px;background:var(--wash);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px} .ulist li span{flex:1} /* 로그인. 애니메이션에 fill-mode 를 쓰지 않습니다 (안 돌면 화면이 비어 보이는 함정). */ #login{max-width:360px;margin:14vh auto 0;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px 28px 24px;animation:up .4s var(--ease)} #login .lmark{width:44px;height:44px;border-radius:14px;background:var(--brand);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;margin-bottom:14px} #login h2{font-size:20px;font-weight:600;letter-spacing:-.3px;margin-bottom:3px} #login .sub{color:var(--ink3);font-size:13px;margin-bottom:18px} #login label{margin:0 0 6px} #login .pwrap{position:relative} #login .pwrap input{padding-right:44px;letter-spacing:.12em;font-size:15px;height:44px} #login .pwrap input.bad{border-color:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 18%,transparent)} #login .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:none;border-radius:8px;color:var(--ink3);cursor:pointer;display:flex;align-items:center;justify-content:center} #login .eye:hover{background:var(--sink);color:var(--ink)} #login .eye:focus-visible{outline:2px solid var(--brand);outline-offset:1px} #lerr{display:flex;align-items:center;gap:6px;color:var(--warn);font-size:13px;font-weight:500;min-height:20px;margin-top:8px} #lerr:empty{display:block} #lerr svg{flex:none} #lcaps{color:var(--ink3);font-size:12px;min-height:16px;margin-top:2px} #login .p{width:100%;margin-top:10px;height:44px;font-size:14px} /* ---- 모션. 짧고 탄력 있게: 눌렀다, 바뀌었다, 들어왔다가 손끝에 느껴지게. ---- */ :root{--out:cubic-bezier(.2,1,.4,1);--snap:cubic-bezier(.36,0,0,1)} /* --out: 오버슈트 없는 감속 곡선(quint 계열) */ button:focus-visible,.stc:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .nin{position:relative} .nind{position:absolute;left:0;bottom:-1px;height:2px;width:100px;background:var(--brand);border-radius:2px;transform-origin:left center;transform:scaleX(0);transition:transform .45s var(--out)} .nin.ready button.on::after{display:none} @keyframes tabIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} section.tabin{animation:tabIn .32s var(--out)}section.tabin.ldopen{animation:none} .stsec.tabin{animation:tabIn .32s var(--out)} .s,.seg button,.moreb,.stc,.tpl button,.proh .lnk button,.ri .acts button,.qtg button,.tgadd,.todo li button,.kbh,.pgh,.epick button{transition:transform .35s var(--snap),border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease),box-shadow .2s var(--ease)} .s:active,.seg button:active,.moreb:active,.stc:active,.tpl button:active,.proh .lnk button:active,.ri .acts button:active,.qtg button:active,.tgadd:active,.todo li button:active{transform:scale(.94);transition-duration:0s} .seg.main button:hover:not(.on){color:var(--ink2)} @keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}} .seg .c.bump,.bdg.bump{display:inline-block;animation:bump .42s var(--out)} @keyframes badgeIn{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}} .ri .un{animation:none}.ri.bump .un,.ri.fresh .un{animation:badgeIn .4s var(--out)} .ri{transition:background .15s var(--ease),transform .3s var(--snap)} .ri:active{transform:scale(.99);transition-duration:0s} @keyframes barIn{from{transform:scaleY(0)}to{transform:scaleY(1)}} .ri.on{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 18%,transparent)} /* selected: tint and a thin ring, no left bar (owner 10-10) */ .ri .em{transition:transform .3s var(--out)} .ri:hover .em{transform:scale(1.06) rotate(-3deg)} @keyframes rxPop{0%{transform:scale(.8)}100%{transform:scale(1)}} .rx1.pop{animation:rxPop .38s var(--out)} .rx1{transition:border-color .15s var(--ease),transform .3s var(--snap)} .rx1:active{transform:scale(.9);transition-duration:0s} @keyframes zap{0%{transform:scale(1)}30%{transform:scale(.96)}100%{transform:scale(1)}} .p.zap{animation:zap .45s var(--out)} @keyframes saved{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}100%{box-shadow:0 0 0 14px transparent}} .p.saved,.s.saved{animation:saved .7s var(--ease)} .stc.open{isolation:isolate}.stc.open i{position:relative}.stc.open i::after{animation-duration:2.4s} .rebar{animation:up .22s var(--out)} .selbar{animation:up .28s var(--out)} .pane.pick .ri .ck{animation:pop .22s var(--out)} .menu button{transition:background .12s var(--ease),transform .25s var(--snap)} .menu button:hover{transform:translateX(3px)} .epick button:hover{transform:scale(1.25) rotate(-6deg)} .epick button:active{transform:scale(.95)} .mtool{transition:opacity .13s var(--ease),transform .3s var(--out);transform:scale(.9)} .mrow:hover .mtool{transform:scale(1)} .mtool button{transition:transform .25s var(--out),background .12s var(--ease)} .mtool button:hover{transform:scale(1.15)} .hin .lg{transition:transform .5s var(--out)} .hin .lg:hover{transform:rotate(-8deg) scale(1.08)} .rv.swap #rvbody,.rv.swap .rvh{animation:tabIn .3s var(--out)} @keyframes slideIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}} .pro.swap .proh,.pro.swap .prob{animation:slideIn .32s var(--out)} /* 접기/펼치기: display 토글 대신 높이가 스르륵 */ .pgb{display:grid;grid-template-rows:0fr;padding:0 15px;transition:grid-template-rows .32s var(--out)} .pg.open .pgb{grid-template-rows:1fr} .pgb>.pgi{min-height:0;overflow:hidden} .pgb>.pgi::after{content:"";display:block;height:13px} .pg.open .pgb>.pgi{overflow:visible} .kbbody{display:grid;grid-template-rows:0fr;padding:0 13px;transition:grid-template-rows .34s var(--out)} .kbsec.open .kbbody{grid-template-rows:1fr} .kbbody>.kbi{min-height:0;overflow:hidden} .kbbody>.kbi::after{content:"";display:block;height:13px} .kbsec.open .kbbody>.kbi{overflow:visible} /* 대시보드: 숫자는 굴러 올라오고 막대는 자라납니다 */ .kpi dd{transition:color .3s var(--ease)} .bars div{transform-origin:bottom center;transition:transform .55s var(--out),background .15s var(--ease)} .bars div.pre{transform:scaleY(0)} .meter i{transition:transform .8s var(--out)} .kpi{transition:transform .35s var(--out),box-shadow .35s var(--out)} .kpi:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06)} .card{transition:box-shadow .3s var(--ease)} .todo li{transition:transform .3s var(--out),background .15s var(--ease)} .todo li:hover{transform:translateX(3px)} .ulist li{animation:up .3s var(--out)} .chd b{position:relative} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}} #login .p[disabled]{opacity:.6;cursor:progress} #login .foot{margin-top:14px;font-size:12px;color:var(--ink3);text-align:center} @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}} /* 로그인 성공 → 카드가 살짝 부풀며 사라지고, 헤더·메뉴·패널이 차례로 들어옵니다 */ #login.ok .p{background:var(--ok);transition:background .25s var(--ease)} #login.ok .pwrap input{border-color:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)} @keyframes lgo{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(1.03) translateY(-10px)}} #login.out{animation:lgo .34s cubic-bezier(.4,0,1,1);pointer-events:none} @keyframes markPop{0%{transform:scale(1)}40%{transform:scale(.94)}100%{transform:scale(1)}} #login.ok .lmark{animation:markPop .5s var(--out)} /* 입장: JS 가 pre-* 로 시작 위치를 잡고 순서대로 떼면 transition 이 제자리로 데려옵니다. 안 돌면 그냥 제자리에 보입니다. */ .enter{transition:opacity .55s var(--out),transform .7s var(--out)} .pre-hdr{transform:translateY(-100%);opacity:0} .pre-nav{transform:translateY(-8px);opacity:0} .pre-pane{transform:translateY(22px) scale(.985);opacity:0} #login.shake{animation:shake .38s var(--ease)} @media (max-width:480px){#login{margin:8vh 14px 0;padding:22px 20px 20px}} /* ---- 반응형. 넓은 화면 3단 → 중간은 2단 + 고객 정보 시트 → 폰은 한 화면씩(목록 → 대화 전체화면 → 고객 정보 시트) ---- */ .rvback,.pclose{display:none} @media (max-width:1180px){ .live{grid-template-columns:min(var(--lw,320px),38vw) 6px minmax(0,1fr) 0 0} .live .grip2,.live .pro{display:none} /* 고객 정보는 오른쪽에서 밀려 들어오는 시트 */ .live.pro-open .pro{display:flex;position:fixed;top:0;right:0;bottom:0;width:min(360px,92vw);z-index:60;border-radius:0;border:0;border-left:1px solid var(--line);box-shadow:-16px 0 40px rgba(0,0,0,.18);animation:sheetIn .3s var(--out)} .pclose{display:flex;position:absolute;top:10px;right:10px;width:32px;height:32px;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--paper);border-radius:9px;font-size:18px;line-height:1;color:var(--ink3);cursor:pointer} .proh{position:relative} .scrim{position:fixed;inset:0;background:rgba(20,10,16,.35);z-index:59;animation:pop .2s var(--ease)} } @keyframes sheetIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}} @media (max-width:760px){ main{padding:8px 8px 40px} header{padding:0 12px} .hin{height:50px;gap:8px} .hin select{width:112px} /* 상단 메뉴: 한 줄로 가로 스크롤 (밑줄은 같이 스크롤) */ .nin{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch} .nin::-webkit-scrollbar{display:none} .nin button{flex:none;padding:11px 12px;font-size:13px} /* 실시간 상담: 한 화면씩 */ .live,.live.nopro{display:block;height:auto;min-height:0} .live .grip,.live .grip2,.hgrip{display:none} .live .pane:first-child{display:flex;min-height:0} #rooms{overflow:visible;flex:none;border-top:1px solid var(--line)} .live .rv{display:none} .live.room .pane:first-child{display:none} .live.room .rv{display:flex;position:fixed;inset:0;z-index:50;border-radius:0;border:0;animation:roomIn .28s var(--out)} .rvback{display:flex;flex:none;width:34px;height:34px;align-items:center;justify-content:center;border:0;background:var(--sink);border-radius:10px;color:var(--ink);cursor:pointer;margin-right:-2px} .rvh{padding:10px 10px;gap:8px;flex-wrap:nowrap;padding-top:max(10px,env(safe-area-inset-top))} .rvh .who{flex:1;min-width:0;display:block} .rvh .who>b,.rvh .who>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%} .rvh .acts{margin-left:0;flex:none;flex-wrap:nowrap;gap:5px} .rvh .acts button{padding:7px 9px;font-size:12px} .rvh .acts .stc span{display:none} .rvh .acts .stc{padding:7px 8px} .rvh .acts .stc i{margin:0} .tz-l .rvh{flex-wrap:wrap;row-gap:6px} .tz-l .rvh .who{flex:1 1 calc(100% - 50px)} .tz-l .rvh .acts{margin-left:auto} #btake,#brel{display:none!important} /* 폰에서는 더보기 메뉴 안으로 (답장하면 자동으로 직접 응대) */ #rvbody{padding:12px 10px} .mb{max-width:82%} .mtool{display:none} /* 폰은 길게 눌러 반응/답장 대신 메뉴 사용 */ .rvi{padding:8px 8px calc(8px + env(safe-area-inset-bottom))} .live.pro-open .pro{width:100vw;border-left:0} .facts{flex-wrap:wrap} .isscard .isb{grid-template-columns:1fr} /* 나머지 탭: 카드 한 줄로, 표는 가로 스크롤 */ .masonry{columns:1} .kpis{grid-template-columns:1fr 1fr} .card{padding:14px 12px} .card table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch} .kbtop input[type=search]{flex:1 1 100%} .toast{max-width:92vw} } @keyframes roomIn{from{transform:translateX(10%);opacity:0}to{transform:none;opacity:1}} body.lock{overflow:hidden} /* ---- 상담 요청 탭: 카드 목록 + 상세. 넓은 화면은 2단, 좁은 화면은 카드를 누르면 상세가 전체 화면으로 ---- */ #t-lead{word-break:keep-all} /* 이메일 탭, owner 10-06: 왼쪽 목록, 오른쪽 대화. 넓은 화면은 두 칸, 폰은 목록에서 누르면 전체 화면 */ .mlhead{display:flex;align-items:center;gap:14px;margin:2px 0 12px;flex-wrap:wrap} .mlttl{display:grid;gap:1px;margin-right:auto} .mlttl h1{font-size:22px;margin:0;letter-spacing:-.01em} .mlttl .muted{font-size:13px} .mlseg{display:flex;gap:3px;background:var(--sink);border-radius:11px;padding:3px} .mlseg button{all:unset;cursor:pointer;font-size:13px;font-weight:500;color:var(--ink2);padding:6px 12px;border-radius:8px;display:flex;align-items:center;gap:6px;white-space:nowrap} .mlseg button b{font-size:12px;font-weight:600;color:var(--ink3);font-variant-numeric:tabular-nums} .mlseg button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)} .mlseg button.need b{color:var(--pink)} .mlwarn{display:flex;gap:10px;align-items:flex-start;background:var(--lemon);color:var(--lemon-ink);border-radius:12px;padding:9px 14px;font-size:13px;line-height:1.5;margin-bottom:10px} .mlwarn b{font-weight:600} .mllist{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;align-content:start;display:grid} .mlgh{font-size:12px;font-weight:600;color:var(--ink3);padding:10px 14px 6px;letter-spacing:.02em;display:flex;gap:6px;background:var(--wash);border-bottom:1px solid var(--line)} .mli{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);position:relative;transition:background-color .12s var(--ease)} .mli:hover{background:var(--wash)} .mli.on{background:var(--sink)} .mli.on{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 18%,transparent)} /* selected: tint and a thin ring, no left bar (owner 10-10) */ .mli .av,.mdh .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;color:#fff;background:hsl(var(--h,220) 45% 52%)} .mli.dim .av{filter:grayscale(1);opacity:.55} .mli .l1{display:flex;align-items:baseline;gap:6px;min-width:0} .mli .l1 b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mli .l1 small{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:6} #fxlist .mli .l1 small{flex-shrink:0} .mli .l1 b{flex-shrink:.4;min-width:min(4.5em,100%)} /* owner 10-17 UI pass: the job number gives way first, the product name stays readable */ .mli .l1 time{margin-left:auto;font-size:12px;color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums} .mli .l1 time.late{color:var(--pink);font-weight:600} .mli .l2{display:flex;align-items:center;gap:6px;margin-top:3px;min-width:0} .mli .l2 span{font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .mli .l2{overflow:hidden} /* owner 10-14 QA2: the 이메일 row chips wrap to a second line instead of being cut, and each chip keeps its size */ .mli .l2{flex-wrap:wrap;row-gap:3px;overflow:visible}.mli .l2>i,.mli .l2>.rsp,.mli .l2>.asgc{flex:none} .mli .l3{display:block;margin-top:3px;font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} /* 원하는 것은 칩 뒤에 묻히지 않게 따로 한 줄 (owner 10-06) */ .mlchip{flex:none;font-style:normal;font-size:11px;font-weight:600;border-radius:999px;padding:1px 7px;white-space:nowrap;background:var(--sink);color:var(--ink2)} .mlchip.need{background:var(--pink-s);color:var(--pink-d)}.mlchip.agec.warn{background:var(--lemon);color:var(--lemon-ink)}.mlchip.agec.late{background:var(--pink-s);color:var(--pink-d)}.mlchip.hold{background:var(--lemon);color:var(--lemon-ink)}.mlchip.wait{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}.mlchip.done,.mlchip.ok{background:var(--mint);color:var(--ok)}.mlchip.skip{background:var(--sink);color:var(--ink3)} .mldet{display:none;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:14px} .mdh{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)} .mdh .av{width:42px;height:42px;font-size:14px;flex:none} .mdh .w{min-width:0;flex:1} .mdh .nm{font-size:16px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .mdh .sb{font-size:13px;color:var(--ink3);margin-top:1px;display:flex;flex-wrap:wrap;gap:4px 10px} .mdh .sb button{all:unset;cursor:pointer;color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px} .mdback{display:none} .mdv{margin:14px 18px 0;border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start} .mdv .ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:600;color:#fff} .mdv b{font-size:15px;font-weight:600;display:block;line-height:1.3} .mdv span{font-size:13px;line-height:1.5;display:block;margin-top:2px} .mdv.need{background:var(--pink-s);color:var(--pink-d)}.mdv.need .ic{background:var(--pink)} .mdv.ok{background:var(--mint);color:var(--ok)}.mdv.ok .ic{background:var(--ok)} .mdv.skip{background:var(--sink);color:var(--ink2)}.mdv.skip .ic{background:var(--ink3)} .mdv.hold{background:var(--lemon);color:var(--lemon-ink)}.mdv.hold .ic{background:var(--warn)} .mdacts{display:flex;flex-wrap:wrap;gap:6px;padding:12px 18px 0} .mdacts a,.mdacts button{font-size:13px;text-decoration:none} .mdacts .pri{background:var(--ink);color:var(--paper);border-color:var(--ink)} .mdsum{margin:12px 18px 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:13px;line-height:1.55;color:var(--ink)} .mdsum em{font-style:normal;font-size:12px;font-weight:600;color:var(--ink3);margin-right:6px} .mdsum .wn{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px} .mdsum .wn i{font-style:normal;font-size:12px;font-weight:500;background:var(--sink);border-radius:7px;padding:3px 8px} .mdsum .wn i b{font-weight:600;margin-left:4px} .mdnote{margin:10px 18px 0;font-size:13px;color:var(--lemon-ink);background:var(--lemon);border-radius:9px;padding:6px 10px} .mdthr{padding:14px 18px 18px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px} .mlchip.quote,.mdv.quote{background:color-mix(in srgb,#7c4dff 13%,transparent);color:#6b3fe0}.mdv.quote .ic{background:#7c4dff} .mlchip.draft{background:var(--ink);color:var(--paper)} .mlchip.src{background:transparent;border:1px solid var(--line);color:var(--ink3);font-weight:500} .mmatts{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;margin-top:8px} /* [attgrid 10-16] owner: file chips stretched to the photo height and left big empty boxes; files now sit first as compact chips, photos after them as same-size thumbnails, and a photo that cannot be shown becomes a compact chip too */ .mmatts>.mmatt,.mmatts>.mmimg.mxaheic{order:-1;align-self:flex-start;height:auto;line-height:1.4;flex:0 0 100%;box-sizing:border-box;max-width:100%} .mmatts>.mmatt i,.mmatts>.mmimg.mxaheic{color:var(--ink3)} .mmatt{all:unset;cursor:pointer;font-size:12px;font-weight:500;border:1px solid var(--line);border-radius:8px;padding:4px 9px;color:var(--ink);background:var(--wash);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mmatt i{font-style:normal;font-weight:500;color:var(--ink3);margin-left:4px} .mmatt.off{cursor:default;color:var(--ink3);border-style:dashed} .mmrd{font-style:normal;font-size:11px;font-weight:600;margin-left:6px;padding:1px 6px;border-radius:9px;background:color-mix(in srgb,#1a7f43 13%,transparent);color:#1a7f43}.mmimg{position:relative}.mmimg .mmrd{position:absolute;left:4px;bottom:4px;margin:0;background:var(--paper)} .mmimg{all:unset;cursor:zoom-in;display:block;width:92px;height:92px;border-radius:9px;overflow:hidden;border:1px solid var(--line);background:var(--sink)} .mmimg img{width:100%;height:100%;object-fit:cover;display:block} .mdinfo{margin:12px 18px 0;border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:8px} .mdih{font-size:12px;font-weight:600;color:var(--ink3)} .mdir{display:grid;gap:2px;font-size:13px;line-height:1.5;padding-top:6px;border-top:1px dashed var(--line)} .mdir:first-of-type{border-top:0;padding-top:0} .mdir em{font-style:normal;font-size:12px;font-weight:600;color:var(--ink2)} .mdir b{font-weight:600;color:var(--ink)} .mdir span{color:var(--ink3)}.mdir span.q{color:var(--ink2);background:var(--wash);border-radius:8px;padding:5px 8px;margin-top:2px} .mdir .s{justify-self:start;font-size:12px;margin-top:3px} .mdai{display:flex;gap:6px} .mdpre .mdpt{display:inline-flex;align-items:center;gap:8px}.mdpre .mdsp,.mdai2>.mdsp{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:var(--wash);color:var(--aic,var(--info))} .mdph{margin:2px 0 8px;font-size:13px;line-height:1.5;color:var(--ink2)} .mdpf{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:8px;margin:6px 0;font-size:13px;font-weight:500;color:var(--ink2)} .mdpf input{font:inherit;font-weight:400;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);min-width:0} .mdchk{font-size:13px;line-height:1.5;color:var(--pink-d);background:var(--pink-s);border-radius:9px;padding:7px 10px}.mdchk b{margin-right:4px} .mdkof{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ink3);margin-left:auto;white-space:nowrap;cursor:pointer}.mdkof+.mdbig{margin-left:0}.mdkol{font-size:12px;color:var(--warn);margin:2px 0 4px}html body .fxkeep,html body .fxkeep.din{animation:none!important}.cpr{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 5px;border-radius:7px;font-size:12px;font-weight:600;font-style:normal;background:var(--brand);color:var(--brand-ink);font-variant-numeric:tabular-nums}.cpr.l2{background:color-mix(in srgb,#7c3aed 70%,var(--paper))}.cpr.l3{background:color-mix(in srgb,#7c3aed 40%,var(--paper));color:var(--ink)}html body #iqlist .iqln .iql2.cprw,.cprw{display:block!important;font-size:12px;color:var(--ink2);line-height:1.4;white-space:normal;overflow-wrap:anywhere}.cprw b{color:#7c3aed;font-weight:600;margin-right:4px}.cprup{font-weight:600;color:#7c3aed}.mdwarn{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:0 0 8px;padding:9px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 12%,var(--paper));color:var(--ink);font-size:13px;line-height:1.45}.mdwarn b{color:var(--warn);font-weight:600;white-space:nowrap}.iqwarn{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);font-size:11px;font-weight:600;font-style:normal;white-space:nowrap}.mdtail{margin-top:6px;padding:8px 12px;border:1px dashed var(--line);border-radius:10px;background:var(--wash)}.mdtailk{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ink2);cursor:pointer}.mdtailh{font-size:12px;color:var(--ink3);margin:2px 0 4px}.mdtailt{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:13px;line-height:1.55;color:var(--ink3);max-height:180px;overflow:auto} .mdrev{display:grid;gap:8px}.mdrevh{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}.mdrevh small{color:var(--ink3)}.mdrevg{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mdrevg>div>b{display:block;font-size:12px;color:var(--ink3);margin-bottom:4px} .mdrevg{align-items:start}.mdrevg .mdpane{box-sizing:border-box;display:block;width:100%;min-height:220px;margin:0;padding:10px 12px;font:inherit;font-size:14px;line-height:1.6;border:1px solid var(--line);border-radius:10px;overflow:auto;resize:vertical} .mdrevg .mdrevkt.mdpane{background:var(--wash);white-space:pre-wrap;word-break:break-word;max-height:none;color:inherit} .mdrevre{margin-top:6px} .mdrevkt{white-space:pre-wrap;word-break:break-word;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--wash);font-size:13px;line-height:1.5;max-height:420px;overflow:auto} @media (max-width:900px){.mdrevg{grid-template-columns:1fr}} .qschip{display:inline-flex;align-items:center;font-size:11px;font-weight:500;color:var(--ok);background:var(--wash);border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:4px;white-space:nowrap} .qscard h4{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:13px;margin:0 0 6px}.qscard h4 small{font-weight:400;color:var(--ink3);font-size:12px}.qscard h4 .qsopen{margin-left:auto}.qsopen{min-height:28px;padding:2px 10px!important;font-size:12px} .qst2{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}.qst2 td{padding:4px 4px;border-top:1px solid var(--line);vertical-align:top}.qst2 td:first-child{width:42%}.qst2 small{color:var(--ink3)} .qst{display:inline-block;margin:0 10px 2px 0;white-space:nowrap}.qst i{font-style:normal;font-size:11px;color:var(--ok)}.qst i.r{color:var(--pink-d)}.qsx{margin:6px 0 0;font-size:12px;color:var(--ink3)}.qsx.w{color:var(--warn)} .qsflash{outline:2px solid var(--ok);outline-offset:4px;border-radius:8px} .qsh{margin-top:6px;font-size:12px}.qsh summary{cursor:pointer;color:var(--ink3)}.qsh ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px}.qsh li span{color:var(--ink3)} .pcbox{margin:10px 0 4px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--wash);font-size:13px;line-height:1.45;max-height:240px;overflow:auto}.pcbox.inl{margin:6px 0}.pcbox .pch{font-weight:600;margin-bottom:4px}.pcbox .pch .r{color:var(--pink-d)} .pcbox ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}.pcbox li.r b{color:var(--pink-d)}.pcbox li.y b{color:var(--warn)}.pcbox li.w{color:var(--ink3)}.pcbox li.ok{color:var(--ok)}.pcbox li.q{color:var(--ink3);font-size:12px}.pcbox li.q b{font-weight:500}.pcbox q.pcsrc{font-style:normal}.pcbox q{display:block;color:var(--ink3);font-size:12px;margin-top:1px;quotes:none;white-space:pre-wrap;word-break:break-word} .mdqq{border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--wash);font-size:13px;line-height:1.45}.mdqqh{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.mdqqh small{color:var(--ink3)} .mdqm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 6px;font-size:12px;color:var(--ink2)}.mdqm span{flex:1;min-width:160px}.mdcl{display:inline-flex;align-items:center;gap:6px}.mdcl::before{content:"";flex:none;width:24px;height:14px;border-radius:999px;background:var(--line) radial-gradient(circle at 7px 50%,#fff 5px,transparent 5.5px)}.mdcl[aria-pressed=true]{border-color:var(--ok);color:var(--ok)}.mdcl[aria-pressed=true]::before{background:var(--ok) radial-gradient(circle at 17px 50%,#fff 5px,transparent 5.5px)}.mdqmk{font-style:normal;font-weight:600;font-size:11px;padding:1px 7px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}.mdqmk.q{color:var(--ok)}.mdqmk.r{color:var(--ink2)}.qdrw{font-size:11px;color:var(--ink3);margin:1px 0 3px}.qdtg,.qdwc{font-style:normal;font-weight:600;font-size:11px;padding:1px 6px;border-radius:999px;white-space:nowrap}.qdtg.loss,.qdwc.loss{background:var(--pink-s);color:var(--pink-d)}.qdtg.thin,.qdwc.thin{background:var(--lemon);color:var(--lemon-ink)}.mdqdt tr.tg.loss td{color:var(--pink-d)}.mdqdt tr.tg.thin td{color:var(--lemon-ink)}.qdwb{border-radius:10px;padding:7px 10px;margin:0 0 8px;font-size:12px;line-height:1.45;border:1px solid var(--line)}.qdwb.loss{background:var(--pink-s);color:var(--pink-d)}.qdwb.thin{background:var(--lemon);color:var(--lemon-ink)}.qdwb ul{margin:3px 0 2px;padding-left:16px}.qdwb small{opacity:.8}.qdv{padding:10px 12px 9px;display:grid;gap:8px}.qdvh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.qdvh>b{font-size:13px}.qdvh>small{margin-left:auto;font-size:11px;opacity:.75}.qdvc{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--paper) 82%,transparent)}.qdvc.loss{color:#b4234a}.qdvc.thin{color:#8a6a00}.qdvg{margin:2px 0 -2px;font-size:11px;font-weight:600;opacity:.75}.qdvl{list-style:none;margin:0;padding:0;display:grid;gap:6px}.qdvr{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(0,2fr) auto;align-items:center;gap:6px 12px;padding:7px 10px;border-radius:9px;background:color-mix(in srgb,var(--paper) 78%,transparent);color:var(--ink)}.qdvn{min-width:0;display:flex;flex-direction:column}.qdvn b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qdvn small{font-size:11px;color:var(--ink3);opacity:1}.qdvbar{position:relative;height:8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 9%,transparent)}.qdvfill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:#d93a5c}.qdvr.thin .qdvfill{background:#e0a400}.qdvmk{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:2px}.qdvmk.c{background:var(--ink)}.qdvmk.f{background:transparent;border-left:2px dashed #1a8f5a;width:0}.qdvlg{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:5px;font-size:11px;color:var(--ink3)}.qdvlg b{color:var(--ink);font-weight:600}.qdvlg .c::before,.qdvlg .f::before,.qdvlg .t::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:-1px}.qdvlg .t::before{background:#d93a5c}.qdvr.thin .qdvlg .t::before{background:#e0a400}.qdvlg .c::before{width:2px;background:var(--ink)}.qdvlg .f::before{width:0;border-left:2px dashed #1a8f5a;border-radius:0}.qdvm{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}.qdvr.loss .qdvm{background:#fde2e8;color:#b4234a}.qdvr.thin .qdvm{background:#fff3c4;color:#8a6a00}.qdvx{margin:0;padding-left:16px}.qdvf{margin:0;font-size:11px;opacity:.8}/* owner 10-17: 답장 큐 is one small lightning button next to refresh; on, it is dark with a yellow bolt and the count in a tiny badge */.rqtg{position:relative;overflow:visible}.rqtg.on,html body #t-inq .rqtg.on{background:var(--ink)!important;border-color:var(--ink)!important;color:#FACC15!important}.rqtg.on svg{fill:#FACC15}.rqtg i{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;border-radius:999px;background:var(--pink);color:#fff;font-style:normal;font-weight:600;font-size:11px;line-height:17px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--paper)}.rqtg i:empty{display:none}button.qdvh{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;cursor:pointer;color:inherit}button.qdvh:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:6px}.qdvcv{flex:none;transition:transform .18s var(--ease,ease)}.qdv.open .qdvcv{transform:rotate(180deg)}.qdv:not(.open){gap:4px}.qdv:not(.open) .qdvbd{display:none}.qdvbd{display:grid;gap:8px}.qdvpv{margin:0;font-size:12px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qdvpv i{font-style:normal;color:var(--ink3)}.qdvpm{font-weight:600}.qdvpm.loss{color:#b4234a}.qdvpm.thin{color:#8a6a00}@media (max-width:560px){.qdvr{grid-template-columns:minmax(0,1fr) auto}.qdvv{grid-column:1 / -1;grid-row:2}}.mdstn{margin:6px 0;padding:8px 10px;border-radius:10px;background:var(--lemon);color:var(--lemon-ink);font-size:13px}.mdstb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 6px;padding:5px 9px;border-radius:9px;background:var(--lemon);color:var(--lemon-ink);font-size:12px}.mdstb span{flex:1;min-width:160px} /* owner 10-17: status pills never end in ..., the date is a lighter part */ .rsp,.rsp .rst{overflow:visible!important;text-overflow:clip!important;max-width:none!important}.rsp .rst{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}.rsp .rsd{font-weight:500;opacity:.82;font-variant-numeric:tabular-nums} /* owner 10-17: the 문의 detail action bar, small tools on the left, the three main actions on the right ending with the reply button */ @media (min-width:761px){ #iqdet .iqact .iqbtns{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #iqdet .iqact .iqbtns::after{content:"";order:10;flex:1 1 auto} #iqdet .iqact .iqbtns>*{height:40px;min-height:40px;box-sizing:border-box;border-radius:10px;margin:0} #iqdet .iqact .iqbtns>.qaibar{order:20}#iqdet .iqact .iqbtns>.aibtn{order:21}#iqdet .iqact .iqbtns>.p{order:22;padding:0 18px;font-weight:600} #iqdet .iqact .iqbtns>.ico{width:40px;padding:0;display:inline-flex;align-items:center;justify-content:center} #iqdet .iqact .iqbtns>.iqgm{width:auto;padding:0 12px;gap:6px;font-size:13px;font-weight:500;color:var(--ink2)} #iqdet .iqact .iqbtns>.iqstsel{width:auto;min-width:120px;padding:0 30px 0 12px} #iqdet .iqact .iqbtns>.qaibar,#iqdet .iqact .iqbtns>.aibtn{padding:0 14px;gap:6px} } .mdstb.warn{background:var(--pink-s);color:var(--pink-d)} .mdqq ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:0;max-height:320px;overflow:auto;overscroll-behavior:contain}.mdqq li{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;border-top:1px solid var(--line);padding:5px 0}.mdqq li>b{font-weight:500;flex:1 1 220px;min-width:0}.mdqq li>i{font-style:normal;font-size:11px;color:var(--ink3);white-space:nowrap}.mdqq li>i.p{color:var(--ok)} .mdqq .qx{border:0;background:none;color:var(--ink3);cursor:pointer;font-size:16px;line-height:1;padding:0 4px;min-height:24px;margin-left:auto}.mdqq .qo{display:inline-flex;flex-wrap:wrap;gap:4px}.mdqq .qo button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:3px 8px;min-height:28px;font:inherit;font-size:12px;cursor:pointer;text-align:left} .mdqq .qo button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.mdqq li>input[type=text]{flex:1 1 160px;min-width:120px;font:inherit;font-size:13px;padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}.mdqq li>label{font-size:12px;color:var(--ink3);display:inline-flex;gap:4px;align-items:center;white-space:nowrap} @media (max-width:760px){.mdqq li>input[type=text]{font-size:16px}.mdqq .qo button{min-height:36px}} .qdfl{list-style:none;margin:0;padding:0;display:grid;gap:6px}.qdfl li{display:flex;gap:8px;align-items:center;justify-content:space-between} .mdqd{border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--wash);font-size:12px;line-height:1.45}.mdqd summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}.mdqd summary span{color:var(--ink3)}.mdqd summary .w{color:var(--warn)} .mdqdf{margin:6px 0 0;padding-left:16px}.mdqdf li.r{color:var(--pink-d);font-weight:500} .mdqdt{width:100%;border-collapse:collapse;margin-top:6px;font-variant-numeric:tabular-nums}.mdqdt th,.mdqdt td{text-align:right;padding:3px 5px;vertical-align:top;white-space:nowrap}.mdqdt th{color:var(--ink3);font-weight:500;border-bottom:1px solid var(--line)} .mdqdt th:first-child,.mdqdt td.nm,.mdqdt tr.off td{text-align:left;white-space:normal}.mdqdt tr.g td,.mdqdt tr.off td{border-top:1px solid var(--line)}.mdqdt td small{display:block;color:var(--ink3);font-size:11px}.mdqdt td.nm small{display:inline} .mdqdt .fm{color:var(--ink3);margin:1px 0 3px}.mdqdt .nt{color:var(--ink3);font-size:11px;margin-top:3px}.mdqdt td.w{color:var(--pink-d)} .mdqdseg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.mdqdseg button{border:0;background:var(--paper);color:var(--ink);padding:3px 7px;min-height:28px;font:inherit;font-size:11px;cursor:pointer}.mdqdseg button+button{border-left:1px solid var(--line)}.mdqdseg button[aria-pressed="true"]{background:var(--ink);color:var(--paper);font-weight:500} /* owner 10-13: the quote calc, compact */ .mdqd.v2 summary{font-size:12px} .qdtop{display:flex;align-items:flex-start;gap:8px;margin-top:6px}.qdtop>.s.sm{margin-left:auto;flex:none;min-height:26px;height:26px;padding:0 10px;font-size:12px} .qdcs{display:flex;flex-wrap:wrap;gap:4px;min-width:0} .qdc{font-style:normal;font-size:11px;line-height:1.4;color:var(--ink2);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:2px 8px;max-width:100%} .qdred{margin-top:6px;border:1px solid color-mix(in srgb,var(--pink-d) 40%,var(--line));background:color-mix(in srgb,var(--pink-d) 7%,var(--paper));border-radius:8px;padding:5px 9px;font-size:12px;color:var(--pink-d)} .qdred b{font-weight:600}.qdred ul{margin:2px 0 0;padding-left:16px} .qdth{display:grid;grid-template-columns:repeat(4,1fr);margin-top:8px;padding:0 4px 2px;border-bottom:1px solid var(--line);font-size:11px;font-weight:500;color:var(--ink3);text-align:right} .qdp{padding:6px 0 5px;border-bottom:1px solid var(--line)}.qdp:last-child{border-bottom:0} .qdph{display:flex;align-items:center;flex-wrap:wrap;gap:3px 7px;min-width:0} .qdph b{font-size:13px}.qdph small{color:var(--ink3);font-size:11px}.qdph .fm{color:var(--ink3);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40%} .qdph .mdqdseg{margin-left:auto} .mdqdseg.sm button{min-height:22px;height:22px;padding:0 8px;font-size:11px} .mdqdt.sm{margin-top:2px;table-layout:fixed}.mdqdt.sm td{width:25%;padding:1px 4px;line-height:1.35}.mdqdt.sm td small{display:inline;margin-left:4px;font-size:11px} .qdnt{margin-top:2px}.qdntb{all:unset;cursor:pointer;font-size:11px;color:var(--ink3)}.qdntb::after{content:" ▾";display:inline-block;transition:transform var(--mo-state) var(--mo-ease)}.qdnt.open .qdntb::after{transform:rotate(180deg)} .qdntl>div{overflow:hidden;min-height:0}.qdntl{display:grid;grid-template-rows:0fr;font-size:11px;color:var(--ink3);transition:grid-template-rows var(--mo-state) var(--mo-ease)}.qdnt.open .qdntl{grid-template-rows:1fr;margin-top:2px} @media (prefers-reduced-motion:reduce){.qdntl,.qdntb::after{transition:none}} .mdai2{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--aic,var(--info)) 5%,var(--paper))} .mdaif{flex:1;min-width:0;display:grid;gap:6px}.mdaif>b{font-size:13px;color:var(--ink)}.mdaif small{font-size:12px;color:var(--ink3);line-height:1.45} .mdai input{flex:1;min-width:0;font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink)} .mdai .s{font-size:13px} .mdain{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--info);background:color-mix(in srgb,var(--info) 9%,transparent);border-radius:9px;padding:6px 10px} .mdain span{flex:1}.mdain .s{font-size:12px} .mdob{margin:12px 18px 0;font-size:13px;font-weight:500;border-radius:9px;padding:7px 11px;background:color-mix(in srgb,var(--info) 12%,transparent);color:var(--info)} .mdob.ok{background:var(--mint);color:var(--ok)}.mdob.err{background:var(--pink-s);color:var(--pink-d)} .mdc{margin:12px 18px 0;border:1.5px solid var(--ink);border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;background:var(--paper);min-width:0} .mdch{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mdch b{font-size:14px;font-weight:600}.mdch .s{margin-left:auto;font-size:12px} /* owner 10-15: the reply draft 닫기 is easy to see, dark instead of white */ .mdch [data-mlcompx]{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600}.mdch [data-mlcompx]:hover{opacity:.88} .mdcmi{font-size:12px;color:var(--ink3);display:flex;gap:4px;align-items:center;flex-wrap:wrap}.mdcmi i{font-style:normal;font-weight:600;color:var(--pink-d);background:var(--pink-s);border-radius:6px;padding:1px 6px} .mdcm{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--ink3)}.mdcm b{color:var(--ink);font-weight:500} .mdcc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--ink3);margin:0 0 6px;min-width:0}.mdccl{font-weight:500;color:var(--ink2)}.mdccc{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:1px 1px 1px 9px;border:1px solid var(--line);border-radius:999px;background:var(--sink);color:var(--ink);overflow-wrap:anywhere}.mdccc button{all:unset;cursor:pointer;flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;color:var(--ink3);font-size:15px}.mdccc button:hover{background:var(--line);color:var(--ink)}.mdccc button:focus-visible{outline:2px solid var(--ink)}.mdcci{flex:1 1 200px;min-width:0;border:0;border-bottom:1px dashed var(--line);background:transparent;font:inherit;color:var(--ink);padding:4px 2px}.mdcci:focus{outline:none;border-bottom-color:var(--ink)} .mdcs{font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--wash);color:var(--ink)} .mdct{font:inherit;font-size:14px;line-height:1.6;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--wash);color:var(--ink);resize:vertical;min-height:170px} .fmtbar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin:4px 0 4px;min-width:0}.fmtbar .fmtb{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 6px;border:1px solid transparent;border-radius:8px;background:none;color:var(--ink2);font:inherit;font-size:14px;line-height:1;cursor:pointer}.fmtbar .fmtb:hover,.fmtbar .fmtb:focus-visible{background:var(--wash);border-color:var(--line);color:var(--ink)}.fmtbar .fmtb b,.fmtbar .fmtb i,.fmtbar .fmtb u{font-family:Georgia,serif;font-size:15px}.fmtbar .fmtpv{margin-left:6px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--ink3);font:inherit;font-size:12px;cursor:pointer}.fmtbar .fmtpv.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}.fmtbar .fmtnote{flex-basis:100%;font-size:12px;color:var(--ink3);margin-top:2px}.fmtprev{margin-top:6px;padding:10px 14px;border:1px dashed var(--line);border-radius:10px;font-size:14px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere;max-height:360px;overflow:auto}.fmtprev p{margin:0 0 10px}.fmtprev .fmtpvh{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink3);margin:0 0 6px}.fmtprev .fmtpvb>:last-child{margin-bottom:0}.fmtprev ul,.fmtprev ol{margin:0 0 10px;padding-left:22px}.fmtprev a{color:var(--info);text-decoration:underline}@media (max-width:640px){.fmtbar .fmtb{min-width:36px;height:36px}} .mdcb{display:flex;flex-wrap:wrap;gap:6px} /* owner 10-13: motion system, AI waits, the ask bar and the send button */ .mdcb{align-items:center} .mdaib{display:flex;align-items:center;gap:6px;height:34px;padding:0 4px 0 8px;margin:6px 0 4px;border:1px solid var(--line);border-radius:10px;background:var(--paper)} .mdaib:focus-within{border-color:color-mix(in srgb,var(--aic) 55%,var(--line))} .mdaibi{display:inline-grid;place-items:center;color:var(--aic);flex:none}.mdaibi svg{width:15px;height:15px} .mdaib input{flex:1;min-width:0;height:30px;border:0;background:transparent;font:inherit;font-size:13px;color:var(--ink);outline:none;padding:0} .mdaib .s.sm{height:26px;min-height:26px;padding:0 10px;font-size:12px;flex:none} .mdaib.busy .mdaibi svg{animation:aiTurn 1.6s linear infinite} .airun{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--aic);white-space:nowrap} .airun .aispin{display:inline-grid;place-items:center;font-style:normal}.airun .aispin svg{width:14px;height:14px;animation:aiTurn 1.6s linear infinite} .airun .airs{font-weight:500;color:var(--ink3);font-variant-numeric:tabular-nums;min-width:2.4em} .airun .airl.xf{animation:aiXf var(--mo-state) var(--mo-ease)} @keyframes aiTurn{to{transform:rotate(360deg)}} @keyframes aiXf{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}} .aiprog{position:relative;height:3px;margin:-10px -12px 8px;border-radius:3px 3px 0 0;overflow:hidden;background:color-mix(in srgb,var(--aic) 14%,transparent)} .aiprog i{position:absolute;inset:0;transform-origin:0 50%;background:var(--aic);transition:transform .5s var(--mo-ease)} .mdcw .mdch .airun{margin-left:auto;margin-right:6px} .aibtn.aibusy,[data-mldraft].aibusy,[data-mlquote].aibusy{pointer-events:none} .mdsend{all:unset;box-sizing:border-box;margin-left:auto;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 20px;border-radius:10px;background:var(--brand);color:var(--brand-ink);font-size:14px;font-weight:600;cursor:pointer;transition:transform var(--mo-press) var(--mo-ease),opacity var(--mo-state) var(--mo-ease);box-shadow:0 1px 0 rgba(0,0,0,.08)} .mdsend:hover{opacity:.92}.mdsend:active{transform:scale(.97)}.mdsend:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .mdsend:disabled,.mdsend[disabled]{opacity:.45;cursor:default} .mdsend .sdi{display:inline-grid;place-items:center;min-width:16px} .mdsend.snd-go{pointer-events:none} /* owner 11-06: the plane flew off and left a hole beside the words, and a white bar sat on the white button. The icon place now holds a small spinner */ .mdsend.snd-go .sdi svg{display:none} .mdsend.snd-go .sdi::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:sndSpin .7s linear infinite} @keyframes sndSpin{to{transform:rotate(360deg)}} .mdsend.snd-ok{background:#15803d;color:#fff;pointer-events:none} .mdsend.snd-ok .sdi svg{animation:sndPop var(--mo-success) var(--mo-spring)} .mdsend.snd-err{background:#cf3a35;color:#fff;animation:sndShake 420ms var(--mo-ease)} @keyframes sndFly{to{transform:translate(18px,-18px) rotate(14deg);opacity:0}} .mdsend{transition:transform var(--mo-press) var(--mo-ease),opacity var(--mo-state) var(--mo-ease),background-color .25s ease,color .25s ease} .mdsend.snd-go::before,.mdsend.snd-ok::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:currentColor;transform-origin:left center;will-change:transform,opacity} .mdsend.snd-go::before{opacity:.28;transform:scaleX(0);animation:sndBar 2.6s cubic-bezier(.12,.75,.25,1) var(--sndt,0ms) forwards} .mdsend.snd-ok::before{animation:sndBarDone .55s var(--mo-ease) forwards} .mdsend.snd-re .sdi svg{animation:none;opacity:0} .mdc.mdout{opacity:0;pointer-events:none;transition:opacity .2s ease} .sndaway{opacity:0!important;scale:.965;translate:0 14px;pointer-events:none!important;transition:opacity .34s cubic-bezier(.4,0,.2,1),scale .38s cubic-bezier(.4,0,.2,1),translate .38s cubic-bezier(.4,0,.2,1)!important;animation:none!important} .iqhbk.sndaway{scale:1;translate:none} .sndfin{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;pointer-events:none} .sndfin .sfc{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 40px 22px;border-radius:24px;background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 24px 70px rgba(0,0,0,.22),0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);animation:sfIn .46s cubic-bezier(.2,.8,.2,1) both} .sndfin .sfo{position:relative;display:grid;place-items:center;width:64px;height:64px;margin-bottom:8px} .sndfin .sfo i{position:absolute;inset:0;border-radius:50%;background:var(--ok);opacity:0;animation:sfFill .34s cubic-bezier(.2,.8,.2,1) .42s forwards} .sndfin .sfo::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ok);opacity:0;animation:sfRing .7s cubic-bezier(.2,.7,.3,1) .5s} .sndfin svg{position:relative;fill:none;stroke-linecap:round;stroke-linejoin:round} .sndfin circle{stroke:var(--ok);stroke-width:3;stroke-dasharray:158;stroke-dashoffset:158;transform:rotate(-90deg);transform-origin:center;animation:sfDraw .46s cubic-bezier(.65,0,.45,1) .04s forwards} .sndfin path{stroke:#fff;stroke-width:4.2;stroke-dasharray:36;stroke-dashoffset:36;animation:sfDraw .3s cubic-bezier(.65,0,.45,1) .58s forwards} .sndfin .sfl{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:0;animation:sfUp .36s var(--mo-ease) .5s both} .sndfin .sfn{font-size:13px;color:var(--ink3);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:sfUp .36s var(--mo-ease) .58s both} .sndfin.out .sfc{animation:sfOut .34s cubic-bezier(.4,0,1,1) forwards} @keyframes sfIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}} @keyframes sfDraw{to{stroke-dashoffset:0}} @keyframes sfFill{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}} @keyframes sfRing{0%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.55)}} @keyframes sfUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes sfOut{to{opacity:0;transform:scale(.94) translateY(-10px)}} @media (prefers-reduced-motion:reduce){.sndaway{transition:none!important}.sndfin{display:none}} @keyframes sndBar{to{transform:scaleX(.88)}} @keyframes sndBarDone{0%{transform:scaleX(.88);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}} @keyframes sndSweep{to{transform:translateX(100%)}} @keyframes sndPop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}} @keyframes sndShake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}} .mdc.din .mdct{animation:aiLand var(--mo-success) var(--mo-ease) backwards} @keyframes aiLand{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}} .mdcl.aierr{color:#cf3a35;font-weight:500} .iqe.just .iqec{animation:aiLand var(--mo-success) var(--mo-ease) backwards} @media (prefers-reduced-motion:reduce){.mdsend,.mdsend *,.mdsend::after,.mdsend::before,.mdc.mdout,.airun *,.aiprog i,.mdaib *,.mdc.din .mdct,.iqe.just .iqec{animation:none!important;transition:none!important}}.mdcb .s{font-size:13px}.mdcb .pri{background:var(--ink);color:var(--paper);border-color:var(--ink)} .mdcn{margin:0;font-size:12px;color:var(--ink3)} .mdch .mdcm{flex:1 1 220px;min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--ink3)} .mdch .mdcm b{font-weight:500;color:var(--ink2)}.mdch .mdcm .ar{margin:0 6px}.mdch .mdcm i{font-style:normal;margin-left:8px} .mdch .mdbig{margin-left:0}.mdch .mdbig+.s{margin-left:0} .mdbig{display:inline-grid;place-items:center;width:32px;height:32px;padding:0!important;flex:none} .mdcmi{margin-top:-2px} @media (min-width:1000px){.ldwrap .mdc:not(.big) .mdct,.mlwrap .mdc:not(.big) .mdct{height:max(240px,calc(var(--ldh,760px) - 330px))}.ldwrap .iqcf .iqform2:not(.big) textarea{height:max(220px,calc(var(--ldh,760px) - 195px))}} .iqcomp .mdc:not(.big){margin:2px 0 0} #iqdet:has(.iqcomp) .iqact{display:none} .iqcf .iqform2{margin:2px 0 0;border:1.5px solid var(--ink);border-radius:14px;padding:12px 14px;background:var(--paper)} .iqfh{display:flex;align-items:center;gap:8px;min-width:0}.iqfh b{font-size:14px;font-weight:600;flex:none} .iqfh .muted{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px} .iqfh select{width:auto;max-width:200px;height:32px;padding:0 8px;font-size:13px} .mdbk{position:fixed;inset:0;z-index:69;background:rgba(12,12,16,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mdFade .2s var(--out)} .mdc.big,.iqform2.big{position:fixed;z-index:70;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1200px,calc(100vw - 40px));height:92vh;margin:0;display:flex;flex-direction:column;gap:10px;padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:0 30px 90px rgba(0,0,0,.32);animation:mdPop .26s var(--out)} .mdc.big>*,.iqform2.big>*{flex-shrink:0} .mdc.big .mdct,.iqform2.big textarea{flex:1 1 auto;height:auto;min-height:120px;resize:none;font-size:15px;line-height:1.75;padding:14px 16px} /* owner 10-13: the full-screen editor scrolls inside, the header and the send row stay in view, the customer text is clamped */ html.mdlock,html.mdlock body{overflow:hidden} .mdc.big{overflow:auto;overscroll-behavior:contain;padding-top:0;padding-bottom:0} /* owner 10-26 "the window for editing email is too small": a slim header with the 참조 box in it, a one-line warning, the AI request in the format toolbar, the signature and note folded, one button row with 더보기, and the text field takes the rest of the height */ .mdc.big .mdch{gap:6px;flex-wrap:nowrap;overflow:hidden;padding-top:8px;padding-bottom:8px} .mdc.big .mdch .mlchip.mdmorn,.mdc.big .mdch .mdcm i{display:none} .mdc.big .mdch .mdcm{min-width:150px;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px} .mdc.big .mdch .mdkof{font-size:12px;white-space:nowrap} .mdc.big .mdch button.s{min-height:30px;padding:0 10px;font-size:13px;white-space:nowrap} .mdc.big .mdch .mdcc{display:flex;align-items:center;gap:4px;flex:0 1 170px;min-width:100px;margin:0;padding:0;border:0;overflow:hidden} .mdc.big .mdch .mdcc .mdccl{display:none} .mdc.big .mdch .mdcc input{min-height:28px;font-size:12px;border:1px solid var(--line);border-radius:8px;padding:0 8px;flex:1;min-width:60px} .npw:empty{display:none}.npw{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px}.nphd{font-size:12.5px;color:var(--ink2)}.npc{font:inherit;font-size:12.5px;font-weight:500;padding:3px 10px;border:1px solid #f97316;border-radius:999px;background:rgba(249,115,22,.14);color:var(--ink);cursor:pointer;transition:background-color .15s ease}.npc:hover{background:rgba(249,115,22,.26)}.npc:focus-visible,.npb:focus-visible,.npx:focus-visible,.npdel:focus-visible{outline:2px solid #f97316;outline-offset:2px}.rxed.nphot{cursor:pointer}::highlight(npnew){background-color:rgba(22,163,74,.22)} .npop{position:fixed;z-index:99990;box-sizing:border-box;overflow:auto;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 12px 32px rgba(0,0,0,.2);opacity:0}.npop.in{opacity:1;animation:npIn .16s cubic-bezier(.2,.7,.2,1)}.npop.out{opacity:0;animation:npOut .11s ease-in}@keyframes npIn{from{opacity:0;transform:translateY(4px) scale(.985)}to{opacity:1;transform:none}}@keyframes npOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(2px)}}.npp{display:flex;align-items:flex-start;gap:8px}.npt{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.35}.npx{flex:none;width:26px;height:26px;margin:-3px -3px 0 0;border:0;border-radius:7px;background:transparent;color:var(--ink3);font-size:18px;line-height:1;cursor:pointer}.npx:hover{background:var(--sink)}.npctx{margin:3px 0 0;font-size:12px;line-height:1.4;color:var(--ink3)}.npm{margin:8px 0;font-size:12.5px;color:var(--ink3)}.npb{display:flex;gap:9px;width:100%;margin-top:6px;padding:8px 9px;text-align:left;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:inherit;cursor:pointer;transition:border-color .14s ease,background-color .14s ease}.npb:hover{border-color:#f97316;background:rgba(249,115,22,.07)}.npb.on{border-color:#f97316;background:rgba(249,115,22,.16)}.npop em{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:5px;background:var(--sink);color:var(--ink2);font-size:11px;font-style:normal;font-weight:600}.npb span{min-width:0}.npb b{display:block;font-size:13px;font-weight:600}.npb b i{font-style:normal;font-weight:500;color:var(--warn)}.npb small{display:block;margin-top:2px;font-size:12.5px;line-height:1.42;color:var(--ink2);white-space:pre-wrap}.npsk i{display:block;height:44px;margin-top:6px;border-radius:10px;background:var(--sink);animation:npSk 1.2s ease-in-out infinite alternate}@keyframes npSk{from{opacity:.55}to{opacity:1}}.npai{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}.npai label{display:flex;align-items:center;gap:7px;margin-bottom:6px;font-size:13px;font-weight:500}.npai textarea{display:block;box-sizing:border-box;width:100%;min-height:52px;resize:vertical;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink);font:inherit;font-size:13.5px}.npai textarea:focus{outline:0;border-color:#f97316}.npf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px}.npdel{padding:3px 2px;border:0;background:none;color:var(--ink3);font:inherit;font-size:12.5px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}@media (prefers-reduced-motion:reduce){.npop.in,.npop.out,.npsk i{animation:none}.npb,.npc{transition:none}} .mdc.big .mdwarn{display:block;padding:5px 10px;margin:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;cursor:pointer} .mdc.big .mdwarn b,.mdc.big .mdwarn span{display:inline} .mdc.big .mdwarn b{margin-right:6px} .mdc.big .mdwarn.open{white-space:normal} .mdc.big .fmtbar{align-items:center} .mdc.big .fmtbar .mdaib{margin:0 0 0 auto;width:min(340px,46%);border:0;padding:0;background:none} .mdc.big .fmtbar .mdaib input{min-height:28px;font-size:13px} .mdc.big .rxed.mdct{min-height:max(260px,calc(92vh - 300px))} .mdtailtg{margin-right:auto} .mdc.big .mdtail:not(.open) .mdtailh,.mdc.big .mdtail:not(.open) .mdtailt,.mdc.big .mdtail:not(.open) .mdnotee{display:none} .mdc.big .mdtail{padding-top:4px;padding-bottom:4px} .mdcb .mdcbx{display:none} .mdcb.more .mdcbx{display:contents} .mdcbm{border-style:dashed} .mdcb.more .mdcbm{background:var(--sink)} .mdc.big>.mdch{position:sticky;top:0;z-index:2;background:var(--paper);padding:14px 0 8px;margin:0;border-bottom:1px solid var(--line)} .mdc.big>.mdcb{position:sticky;bottom:0;z-index:2;background:var(--paper);padding:10px 0 14px;margin-top:auto;border-top:1px solid var(--line)} .mdc.big .mdct{min-height:42vh} /* 가격 미리보기 owner 10-20: never takes a click */ .plbox{position:fixed;left:0;top:0;width:0;height:0;z-index:70;pointer-events:none;opacity:0;transition:opacity .25s ease} .plclip{position:fixed;overflow:hidden;pointer-events:none} .plbox.on{opacity:1} .mdck{margin:0 0 10px;padding:10px 12px 11px;border-radius:12px;background:color-mix(in srgb,var(--warn) 9%,var(--paper));border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);box-shadow:inset 3px 0 0 var(--warn)} .mdck[hidden]{display:none} .mdckh{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:13px;line-height:1.4;color:var(--ink2)} .mdckh b{color:var(--warn);font-size:13px;font-weight:600;letter-spacing:0} .mdcki{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn);flex:none} .mdcks{flex:1 1 220px;min-width:0} .mdckl{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px} .mdckl button{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;padding:6px 9px;border-radius:8px;border:1px solid color-mix(in srgb,var(--warn) 22%,transparent);background:var(--paper);color:var(--ink);font:inherit;font-size:13px;line-height:1.45;cursor:pointer;transition:background .15s,border-color .15s} .mdckl button:hover,.mdckl button:focus-visible{background:color-mix(in srgb,var(--warn) 12%,var(--paper));border-color:color-mix(in srgb,var(--warn) 55%,transparent);outline:none} .mdckl i{flex:none;display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--warn);color:#fff;font-style:normal;font-size:11px;font-weight:600;margin-top:1px} .mdckl span{min-width:0;overflow-wrap:anywhere} ::highlight(ckwarn){background-color:color-mix(in srgb,var(--warn) 24%,transparent);text-decoration:underline wavy var(--warn);text-decoration-thickness:1.5px;text-underline-offset:3px} ::highlight(ckfocus){background-color:color-mix(in srgb,var(--warn) 48%,transparent)} ::highlight(phfill){background-color:rgba(249,115,22,.34);color:inherit;text-decoration:underline solid #f97316;text-decoration-thickness:2px;text-underline-offset:3px} .plmk{position:absolute;border-radius:5px;background:color-mix(in srgb,var(--accent) 22%,transparent);box-shadow:0 0 0 2px var(--accent)} .plcard{position:fixed;padding:10px 12px;border-radius:12px;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:13px} .plt{font-weight:600;margin-bottom:6px} .plrow{display:grid;grid-template-columns:1fr auto auto auto;gap:4px 10px;align-items:baseline;padding:3px 0;border-top:1px solid var(--line)} .pll{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)} .plmg{font-size:12px;font-weight:600} .plmg.good,.plbig.good b{color:var(--ok,#1a7f4b)}.plmg.warn,.plbig.warn b{color:var(--warn,#b26a00)}.plmg.bad,.plbig.bad b,.plr.bad b,.plr.bad small{color:#e5484d} .plpop{position:fixed;z-index:70;display:block;visibility:hidden;opacity:0;transform:translateY(5px) scale(.97);transform-origin:right center;transition:opacity .14s ease,transform .2s cubic-bezier(.2,.8,.2,1),visibility 0s linear .2s,top .14s cubic-bezier(.2,.8,.2,1),left .14s cubic-bezier(.2,.8,.2,1);pointer-events:none;width:280px;padding:10px 12px;border-radius:12px;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.2);font-size:13px} .plh{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}.plh b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.plh span{color:var(--ink2);flex:none} .plbig{display:flex;justify-content:space-between;align-items:baseline;padding:2px 0 6px}.plbig b{font-size:22px;font-variant-numeric:tabular-nums} .plr{display:grid;grid-template-columns:72px auto 1fr;gap:8px;align-items:baseline;padding:2px 0;font-variant-numeric:tabular-nums}.plr span{color:var(--ink2)}.plr small{color:var(--ink3);text-align:right} .pls{margin-top:5px;font-size:11px;color:var(--ink3);line-height:1.45} .plpop.on{visibility:visible;opacity:1;transform:none;transition:opacity .14s ease,transform .2s cubic-bezier(.2,.8,.2,1),visibility 0s,top .14s cubic-bezier(.2,.8,.2,1),left .14s cubic-bezier(.2,.8,.2,1)}.plpop.nt{transition:none} .mdtailr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mdtailo{font-size:12px;font-weight:600;color:var(--warn,#b26a00)}.mdnotee{width:100%;box-sizing:border-box;margin:6px 0 2px;font:inherit;font-size:13px;font-style:italic;line-height:1.5;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);resize:vertical} .mnh{font-size:13px;color:var(--ink3);line-height:1.55;margin:4px 0 10px}.mnl{display:block;font-size:13px;font-weight:600;margin:10px 0 4px}.mnt{width:100%;box-sizing:border-box;font:inherit;font-size:13px;font-style:italic;line-height:1.55;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);resize:vertical}.mnb{display:flex;gap:8px;margin-top:10px} textarea.rxhid{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;margin:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;resize:none!important;flex:none!important} .rxed{display:block;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;outline:none;cursor:text;max-height:70vh;text-align:left} .rxed:focus{border-color:var(--ink3);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 8%,transparent)} .rxed[contenteditable=false]{cursor:default} .rxed{position:relative}.rxed.rxempty::before{content:attr(data-ph);position:absolute;color:var(--ink3);pointer-events:none} .rxed>div,.rxed p{margin:0;min-height:1em}.rxed ul,.rxed ol{margin:0;padding-left:1.5em}.rxed li{margin:0}.rxed a{color:var(--info,#2563eb);text-decoration:underline}.rxed b,.rxed strong{font-weight:600} .mdc.big .rxed{max-height:none} .fmtbar.rxbar .fmtpv,textarea.rxhid~.fmtprev{display:none!important}.fmtbar .fmtb.on{background:var(--ink);color:var(--paper)} .qmw{position:fixed;left:0;top:0;width:0;height:0;z-index:90;pointer-events:none}.qmb{position:fixed;border-radius:5px;background:rgba(255,200,0,.42);box-shadow:0 0 0 2px rgba(255,190,0,.35);opacity:0;transition:opacity .16s ease}.qmw.on .qmb{opacity:1}.qmw.off .qmb{opacity:0;transition:opacity .6s ease} @media (prefers-reduced-motion:reduce){.plbox,.plpop,.plpop.on{transition:none}} .mdc.big .mdq>div{max-height:calc(1.55em * 6);overflow:auto;overscroll-behavior:contain} .mdc.big .mdqq{font-size:12px;padding:6px 10px}.mdc.big .mdqq ul{max-height:min(34vh,300px)} .mdc.big .mdrevg{grid-template-columns:1fr 1fr} .mdc.big .mdrevg .mdpane{min-height:40vh} @keyframes mdPop{from{opacity:0;transform:translate(-50%,-48%) scale(.985)}to{opacity:1;transform:translate(-50%,-50%)}} @keyframes mdFade{from{opacity:0}to{opacity:1}} button.spin svg{animation:rfSpin .75s linear infinite} button.spin{cursor:progress} button.spun{color:var(--ok)!important;border-color:color-mix(in srgb,var(--ok) 45%,var(--line))!important;transition:color .2s,border-color .2s} @keyframes rfSpin{to{transform:rotate(360deg)}} .tierb{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;margin-right:5px;border-radius:5px;font-size:11px;font-weight:600;font-style:normal;line-height:1;color:#fff;flex:none;vertical-align:1px} .tierb.t-S{background:#7c3aed}.tierb.t-A{background:#d81b60}.tierb.t-B{background:#2563eb}.tierb.t-C{background:#64748b} .iqtiers{display:inline-flex;flex:none;align-self:center;align-items:center;gap:7px} .iqtg{display:inline-flex;border:1px solid var(--line);border-radius:9px;background:var(--paper)} .iqtg button:first-child{border-radius:8px 0 0 8px}.iqtg button:last-child{border-radius:0 8px 8px 0} .iqtiers button.t-S{--tc:#7c3aed}.iqtiers button.t-A{--tc:#d81b60}.iqtiers button.t-B{--tc:#2563eb}.iqtiers button.t-C{--tc:#64748b}.iqtiers button.t-D{--tc:#8a7f74} .iqtiers button{all:unset;box-sizing:border-box;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink3);transition:background-color .15s var(--ease),color .15s var(--ease)} .iqtg button+button{border-left:1px solid var(--line)} .iqtiers button.iqts{border:1px solid color-mix(in srgb,#7c3aed 40%,var(--line));border-radius:9px;background:var(--paper);color:#7c3aed} .iqtiers button.iqts.on{border-color:var(--brand);background:var(--brand);color:var(--brand-ink);box-shadow:0 2px 10px rgba(0,0,0,.1)} .iqtiers button:hover{color:var(--ink)} .iqtiers button.on.t-S{background:#7c3aed;color:#fff}.iqtiers button.on.t-A{background:#d81b60;color:#fff}.iqtiers button.on.t-B{background:#2563eb;color:#fff}.iqtiers button.on.t-C{background:#64748b;color:#fff}.iqtiers button.on.t-D{background:#8a7f74;color:#fff} .iqtiers button:active{transform:scale(.94)} .callchip{display:inline-flex;align-items:center;gap:3px;flex:none;height:20px;padding:0 7px;border-radius:99px;background:#fdecef;color:#c2185b;font-size:12px;font-weight:600;white-space:nowrap} .callchip svg{flex:none} .callchip.big{align-self:center;height:28px;padding:0 10px;font-size:12px} .callbtn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:5px;flex:none;align-self:center;height:32px;padding:0 11px;border-radius:9px;border:1.5px solid #147a4a;color:#147a4a;background:var(--paper);font-size:13px;font-weight:600;white-space:nowrap;transition:background-color .15s var(--ease),color .15s var(--ease)} .callbtn:hover{background:#e6f4ec} .callbtn.act{border-style:dashed}.callbtn:active{transform:scale(.96)}.callbtn.need{border-color:#d93a5c;color:#c12a4d;background:color-mix(in srgb,#d93a5c 8%,var(--paper))}.callbtn.need:hover{background:color-mix(in srgb,#d93a5c 14%,var(--paper))} .callbtn.done{border:1.5px solid #147a4a;color:#fff;background:#147a4a;font-weight:600}.callbtn.done:hover{background:#0f6a3f} .calltel{align-self:center;flex:none;font-size:13px;font-weight:600;color:var(--ink2);text-decoration:underline;white-space:nowrap} #iqdet .h>.callgrp{order:10} .callgrp{display:inline-flex;align-items:center;gap:6px;flex:none;align-self:center;flex-wrap:nowrap} .callbtn small{font-weight:500;opacity:.75;font-size:11px} .callbtn.sm{height:28px;padding:0 9px;font-size:12px;border-style:dashed} /* owner 10-13: 통화 완료 표시 and 통화 기록 are chips of the same size as 통화 필요, a thin solid border */ #iqdet .callchip.big{height:24px;padding:0 9px;font-size:12px} #iqdet .callbtn.act,#iqdet .callbtn.sm{height:24px;padding:0 9px;border-radius:99px;border:1px solid color-mix(in srgb,#147a4a 55%,var(--line));font-size:12px;font-weight:600;gap:3px} #iqdet .callbtn.act svg,#iqdet .callbtn.sm svg,#iqdet .callchip.big svg{width:12px;height:12px} #iqdet .callbtn.done{height:24px;padding:0 9px;border-radius:99px;font-size:12px} .iqcalls h4{display:flex;align-items:center;gap:6px} .iqcl{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:4px} .iqcl li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:7px 10px;border-radius:9px;background:var(--bg2,rgba(0,0,0,.035));font-size:13px} .iqcl li b{font-weight:600;white-space:nowrap}.iqcln{flex:1 1 200px;min-width:0} .iqcld{all:unset;cursor:pointer;margin-left:auto;padding:0 6px;font-size:16px;line-height:1;opacity:.45}.iqcld:hover{opacity:1} .iqclf{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end} .iqclf label{display:grid;gap:3px;font-size:12px}.iqclf label.w{flex:1 1 240px} .iqclf input{height:34px;padding:0 9px;border-radius:8px;border:1px solid var(--line,#ddd);background:var(--paper);color:inherit;font:inherit;font-size:13px;box-sizing:border-box;width:100%} .iqclf .row,.iqcalls .row{display:flex;gap:6px;flex-wrap:wrap} @media (prefers-color-scheme:dark){:root:not([data-theme=light]) .callchip{background:#3a1626;color:#ff8ab4}} :root[data-theme=dark] .callchip{background:#3a1626;color:#ff8ab4} /* grade picked, owner 10-12: a springy pop, a ring in the grade color and a small burst of dots. animation-delay is set to minus the time already played, so the re-render after the server answers continues the same motion instead of starting over */ @media (prefers-reduced-motion:no-preference){ .iqtiers button.pop{position:relative;z-index:1;animation:tierPop .6s cubic-bezier(.2,.8,.2,1) both} .iqtiers button.pop::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:tierRing .7s ease-out both;animation-delay:inherit} .iqtiers button.pop::before{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;pointer-events:none;background:transparent; box-shadow:0 -15px 0 var(--tc),13px -8px 0 var(--tc),13px 8px 0 var(--tc),0 15px 0 var(--tc),-13px 8px 0 var(--tc),-13px -8px 0 var(--tc);animation:tierBurst .65s cubic-bezier(.2,.7,.3,1) both;animation-delay:inherit} @keyframes tierPop{0%{transform:scale(.92)}100%{transform:scale(1)}} @keyframes tierRing{0%{box-shadow:0 0 0 0 var(--tc);opacity:.75}100%{box-shadow:0 0 0 13px var(--tc);opacity:0}} @keyframes tierBurst{0%{transform:scale(.35);opacity:0}25%{opacity:1}100%{transform:scale(1.55);opacity:0}} /* S picked (owner 10-12): a bigger, special moment. The button spins up with a bounce, a gold and violet halo turns around it, two waves of gold, pink and violet sparks fly out, and a light sweep crosses the face */ .iqtiers button.iqts.pop{animation:sPop 1.1s cubic-bezier(.2,.8,.2,1) both,sShine 1.1s ease-out both;background-image:linear-gradient(var(--brand),var(--brand));background-size:250% 100%,100% 100%;background-repeat:no-repeat} .iqtiers button.iqts.pop::after{display:none;inset:-5px;border-radius:13px;background:conic-gradient(from 0deg,#f5c542,#a855f7,#ec4899,#f5c542);filter:blur(5px);z-index:-1;animation:sHalo 1.1s ease-out both;animation-delay:inherit} .iqtiers button.iqts.pop::before{display:none;width:5px;height:5px;margin:-2.5px 0 0 -2.5px; box-shadow:0 -22px 0 #f5c542,16px -16px 0 #ec4899,22px 0 0 #a855f7,16px 16px 0 #f5c542,0 22px 0 #ec4899,-16px 16px 0 #a855f7,-22px 0 0 #f5c542,-16px -16px 0 #ec4899, 0 -13px 0 -1px #fde68a,13px 0 0 -1px #f0abfc,0 13px 0 -1px #fde68a,-13px 0 0 -1px #c4b5fd;animation:sSpark 1s cubic-bezier(.15,.75,.3,1) both;animation-delay:inherit} @keyframes sPop{0%{transform:scale(.92)}100%{transform:scale(1)}} @keyframes sShine{0%,30%{background-position:180% 0,0 0}100%{background-position:-80% 0,0 0}} @keyframes sHalo{0%{opacity:0;transform:scale(.6) rotate(0)}30%{opacity:.95}100%{opacity:0;transform:scale(1.5) rotate(320deg)}} @keyframes sSpark{0%{transform:scale(.2) rotate(0);opacity:0}20%{opacity:1}100%{transform:scale(2) rotate(45deg);opacity:0}} } @media (max-width:760px){.iqtiers button{width:36px;height:36px}} /* 담당자 (owner 10-10): initials chip on customer rows, picker in the 통합 문의 header, multi-select bar, home toggle, settings */ .asgc{display:inline-grid;place-items:center;flex:none;min-width:22px;height:20px;padding:0 5px;margin:0 0 0 5px;border-radius:99px;font-size:11px;font-weight:600;font-style:normal;line-height:1;letter-spacing:0;white-space:nowrap;vertical-align:1px;background:hsl(var(--ah,220) 72% 92%);color:hsl(var(--ah,220) 58% 30%)} .asgc.me{box-shadow:inset 0 0 0 1.5px hsl(var(--ah,220) 58% 40%)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .asgc{background:hsl(var(--ah,220) 30% 25%);color:hsl(var(--ah,220) 85% 84%)}:root:not([data-theme="light"]) .asgc.me{box-shadow:inset 0 0 0 1.5px hsl(var(--ah,220) 70% 70%)}} :root[data-theme="dark"] .asgc{background:hsl(var(--ah,220) 30% 25%);color:hsl(var(--ah,220) 85% 84%)} :root[data-theme="dark"] .asgc.me{box-shadow:inset 0 0 0 1.5px hsl(var(--ah,220) 70% 70%)} .iqrb>.asgc,.mli .l2>.asgc{margin:0} .asgp{display:inline-flex;align-items:center;gap:6px;flex:none;align-self:center;min-width:0;font-size:13px;color:var(--ink2)} .asgp .asgpl{font-size:12px;font-weight:600;color:var(--ink3);white-space:nowrap} .asgp select{width:auto;min-width:92px;max-width:150px;height:32px;padding:0 8px;font-size:13px} .asgp.ro .asgc{margin:0} .asgp .asgpn{font-weight:600;white-space:nowrap} .asgrel{border:0;background:none;padding:0 6px;min-height:32px;font-size:12px;font-weight:600;color:var(--brand);cursor:pointer} .asgtake{flex:none;align-self:center;height:32px;padding:0 12px!important;font-size:13px;font-weight:600;white-space:nowrap} #t-inq .ldwrap>.iqtools #iqq{grid-column:1 / 4} #t-inq .ldwrap>.iqtools .asgbar{grid-column:1 / -1;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--paper)} #t-inq .ldwrap>.iqtools .asgbar[hidden]{display:none} #t-inq .ldwrap>.iqtools .asgbar select{width:auto;min-width:120px;flex:0 1 auto;height:36px} .asgbar b{font-size:13px;margin-right:auto;white-space:nowrap} .asgbar button{height:36px;padding:0 12px;font-size:13px} .iqr.asgpk{cursor:pointer} .iqr.asgpk .iqav2{color:transparent;background:var(--paper);box-shadow:inset 0 0 0 2px var(--line)} .iqr.asgpk .iqav2 i{display:none} .iqr.asgon .iqav2{box-shadow:none;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat} .asgemb{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:8px} .asghm{display:inline-flex;flex:none;margin-left:8px;border:1px solid var(--line);border-radius:99px;overflow:hidden;vertical-align:middle} .asghm button{border:0;background:none;height:28px;padding:0 10px;font-size:12px;font-weight:600;color:var(--ink3);cursor:pointer;white-space:nowrap} .asghm button+button{border-left:1px solid var(--line)} .asghm button.on{background:var(--ink);color:var(--paper)} .asghm i{font-style:normal;opacity:.75} .opasg{width:auto;max-width:140px;height:34px;padding:0 8px;font-size:13px} .asgset .asgmodes{display:grid;gap:6px;margin:4px 0 10px} .asgset .asgmode{display:flex;gap:10px;align-items:flex-start;padding:8px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer} .asgset .asgmode.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)} .asgset .asgmode input{margin-top:3px;flex:none} .asgset .asgmode span{display:flex;flex-direction:column;gap:2px;min-width:0} .asgset .asgmode b{font-size:14px} .asgset .asgmode small{font-size:12px;color:var(--ink3);line-height:1.45} .asgset .asgpool,.asgset .asgrules{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px} .asgset .asgrules{flex-direction:column;align-items:stretch} .asgset .asgsub{font-size:12px;font-weight:600;color:var(--ink3);margin-right:4px;white-space:nowrap} .asgset .asgchk{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:99px;font-size:13px;cursor:pointer} .asgset .asgchk.on{border-color:var(--brand);color:var(--brand);font-weight:600} .asgset .asgrule,.asgset .asgmove{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:6px;align-items:center} .asgset .asgrule.rest{grid-template-columns:auto minmax(0,1fr)} .asgset .asgrule select,.asgset .asgmove select{width:100%;min-width:0;height:36px} .asgset .asgrules>.s{align-self:flex-start} .asgset .asgarr{color:var(--ink3);flex:none} .asgset .sc input[type=number]{width:80px;height:36px;text-align:right} .asgset .asgsave{justify-content:flex-end;gap:8px;margin-top:10px} .asgset .asgsave .muted{margin-right:auto;font-size:12px} .asgset .asglog{list-style:none;margin:0;padding:0;display:grid;gap:6px} .asgset .asglog li{display:flex;gap:8px;align-items:baseline;font-size:13px;line-height:1.45;min-width:0} .asgset .asglog time{flex:none;color:var(--ink3);font-size:12px;min-width:56px} .asgset .asglog b{flex:none} .asgset .asglog span{min-width:0;overflow-wrap:anywhere;color:var(--ink2)} @media (max-width:760px){ html body #iqdet .lddh .h>.asgp,html body #iqdet .lddh .h>.asgtake{order:10} .asgp select{height:36px;font-size:16px} .asgtake,.asgrel{min-height:36px} .asghm button{height:36px;padding:0 12px} .opasg{height:40px;font-size:16px;max-width:none;flex:1 1 40%} .asgset .sc input[type=number]{font-size:16px} #t-inq .ldwrap>.iqtools .asgbar b{flex:1 0 100%} } @media (max-width:760px){#iqdet .iqbtns{flex-wrap:wrap}#iqdet .iqbtns .iqstsel{order:-1;flex:1 1 100%;max-width:none}} @media (max-width:520px){.iqhead{flex-wrap:wrap}#t-inq .iqhact{margin-left:auto}} header .nin.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)} .stsys{display:grid;gap:2px} .sysr{display:grid;grid-template-columns:12px auto 1fr;align-items:baseline;gap:4px 10px;padding:7px 0;border-top:1px solid var(--line);font-size:13px} .sysr:first-child{border-top:0}.sysr b{font-weight:500;white-space:nowrap}.sysr span{color:var(--ink2);text-align:end;min-width:0;overflow-wrap:anywhere}.sysr small{color:var(--ink3)} .sdot{width:9px;height:9px;border-radius:50%;background:var(--ink3);align-self:center}.sdot.ok{background:var(--ok)}.sdot.warn{background:var(--warn)}.sdot.bad{background:#dc2626} .sdot.wait{background:var(--ink3);animation:mdBreath 1.2s var(--ease) infinite} .stfz{display:inline-flex;align-items:center;gap:6px}.stfz span{min-width:46px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink2)} #st-mail textarea{width:100%;font:inherit;font-size:13px;line-height:1.55;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--wash);color:var(--ink);resize:vertical} .cin{animation:compIn .32s var(--out)} @keyframes compIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .mdc.din .mdct,.mdc.din .mdcs,.mdc.din .mdcmi{animation:dIn .5s var(--out) backwards} .mdc.din .mdct{animation-delay:.06s} @keyframes dIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} .mdq{border:1px solid var(--line);border-radius:10px;background:var(--wash);font-size:13px;min-width:0} .mdq summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:center;padding:8px 12px;font-weight:600;color:var(--ink2)} .mdq summary::-webkit-details-marker{display:none} .mdq summary span{font-weight:400;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0} .mdq[open] summary span{display:none} .mdq>div{padding:0 12px 10px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:22vh;overflow:auto;color:var(--ink2);line-height:1.6} @media (max-width:999px){.iqcomp .mdct,.iqcf .iqform2 textarea,#t-mail .mdct{min-height:38vh}} @media (max-width:420px){#mename{display:none}} @media (max-width:760px){#iqdet .lddh .h{flex-wrap:wrap;row-gap:8px}#iqdet .lddh .w{flex:1 1 calc(100% - 110px)}#iqdet .lddh .h>.iqtrsw{margin-left:46px}.mdch .mdbig+.s{margin-left:auto}.mdbig,.mdbk{display:none!important}.mdc.big,.iqform2.big{position:static;transform:none;width:auto;height:auto;animation:none;box-shadow:none;padding:12px 14px}.mdch .mdcm{flex-basis:100%;order:3}} .mdcl{font-size:13px;color:var(--ink2);padding:6px 0} .mdthh{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink3);letter-spacing:.02em} .mdthh button{margin-left:auto;font-size:12px} .mm{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--paper)} .mm.out{background:var(--wash)} .mm.form{border-style:dashed} .mmh{display:flex;align-items:center;gap:8px;min-width:0} .mmh .who{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mmh .who i{font-style:normal;font-weight:500;color:var(--ink3);margin-left:4px} .mmh .dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--pink)} .mm.out .mmh .dot{background:var(--info)} /* owner 10-13: the 이메일 tab reads like a chat too, ours on the right */ .mm.out{margin-left:18%;background:color-mix(in srgb,var(--brand) 8%,var(--paper));border-color:color-mix(in srgb,var(--brand) 26%,var(--line))} .mm.in{margin-right:18%} @media (max-width:760px){.mm.out{margin-left:12%}.mm.in{margin-right:12%}}.mm.form .mmh .dot{background:var(--warn)} .mmh time{margin-left:auto;font-size:12px;color:var(--ink3);white-space:nowrap} .mmh button{all:unset;cursor:pointer;font-size:12px;font-weight:500;color:var(--ink2);border:1px solid var(--line);border-radius:7px;padding:2px 7px;white-space:nowrap} .mmh button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)} .mms{font-size:13px;font-weight:500;color:var(--ink2);margin-top:4px} .mmb{font-size:14px;line-height:1.62;color:var(--ink);margin-top:6px;overflow-wrap:anywhere} .mmb p{margin:0 0 8px}.mmb p:last-child{margin-bottom:0} .mmb ul,.mmb ol{margin:0 0 8px;padding-left:20px}.mmb li{margin:1px 0} .mmb.clip{max-height:190px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)} .mmfull{all:unset;cursor:pointer;font-size:12px;font-weight:500;color:var(--ink2);margin-top:4px;display:inline-block} .mmtr{margin-top:8px;border-radius:9px;background:color-mix(in srgb,var(--info) 9%,transparent);padding:8px 11px} .mmtr em{font-style:normal;font-size:11px;font-weight:600;color:var(--info);display:block;margin-bottom:3px} .mmc{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-size:13px;color:var(--ink2);min-width:0} /* 이메일 tab redesign, owner 10-25: chat bubbles like 통합 문의, one status group, the summary folded */ #t-mail .mdthr{gap:10px} .mlbub{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px;align-items:end;padding-right:12%;min-width:0} .mlbub.d-out{grid-template-columns:minmax(0,1fr) 30px;padding-right:0;padding-left:12%} .mlbub.d-form{padding-right:6%} .mlav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;color:#fff;background:hsl(var(--h,220) 52% 50%);flex:none} .mlav.out{background:var(--pink)}.mlav.form{background:var(--warn)} #t-mail .mlbub.d-in .mm,#t-mail .mlbub.d-form .mm{background:var(--sink);border-color:var(--line)} #t-mail .mlbub .mm{margin:0;border-radius:16px 16px 16px 5px;padding:10px 14px 11px;min-width:0} #t-mail .mlbub.d-out .mm{border-radius:16px 16px 5px 16px} #t-mail .mlbub .mmh{font-size:12px;gap:6px;flex-wrap:wrap} #t-mail .mlbub .mmh .dot{display:none} #t-mail .mlbub .mms{margin-top:2px;font-size:13px} #t-mail .mlbub .mmb{margin-top:4px} .mlday{display:flex;align-items:center;gap:10px;margin:4px 0 0;font-size:12px;font-weight:600;color:var(--ink3)} .mlday::before,.mlday::after{content:"";flex:1;height:1px;background:var(--line)} #t-mail .mdacts.mlv2a{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 18px 0} .mlpri{display:flex;flex-wrap:wrap;gap:6px} .mlseg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)} .mlseg>.s{border:0!important;border-radius:0!important;border-right:1px solid var(--line)!important;background:transparent;box-shadow:none} .mlseg>.s:last-child{border-right:0!important} .mllk{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto} .mllk>.s{background:transparent} #t-mail .mdv{margin:10px 18px 0;padding:9px 12px;grid-template-columns:22px minmax(0,1fr);gap:9px;align-items:center} #t-mail .mdv .ic{width:22px;height:22px;font-size:12px} #t-mail .mdv b{font-size:14px;display:inline;margin-right:6px} #t-mail .mdv span{display:inline;font-size:13px;margin:0} .mlsumd{margin:10px 18px 0;border:1px solid var(--line);border-radius:12px;background:var(--paper)} .mlsumd>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;min-width:0} .mlsumd>summary::-webkit-details-marker{display:none} .mlsumd>summary b{font-size:13px;flex:none} .mlsumd>summary span{flex:1;min-width:0;font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mlsumv{flex:none;width:7px;height:7px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(45deg);transition:transform .2s} .mlsumd[open] .mlsumv{transform:rotate(-135deg)} .mlsumd>:not(summary){margin-left:12px;margin-right:12px}.mlsumd>:last-child{margin-bottom:10px} .mlsumd .mdsum{margin-top:0} @media (max-width:760px){.mlbub{grid-template-columns:24px minmax(0,1fr);padding-right:3%}.mlbub.d-out{grid-template-columns:minmax(0,1fr) 24px;padding-left:3%}.mlav{width:24px;height:24px;font-size:11px}.mllk{margin-left:0}#t-mail .mdacts.mlv2a,#t-mail .mdv,.mlsumd{margin-left:12px;margin-right:12px}#t-mail .mdacts.mlv2a{padding-left:0;padding-right:0}} @media (prefers-reduced-motion:reduce){.mlsumv{transition:none}} .mmc:hover{background:var(--wash)} .mmc b{font-weight:600;color:var(--ink);white-space:nowrap} .mmc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1} .mmc time{font-size:12px;color:var(--ink3);white-space:nowrap} .ldsplit{display:none} /* owner 10-13: hidden below the two pane breakpoint */ @media (min-width:1000px){ #t-mail .mlwrap{grid-template-columns:minmax(300px,380px) minmax(0,1fr);height:var(--ldh,640px)} /* owner 10-13: the list and detail widths are adjustable, a splitter between them, the width kept per viewer */ @media (min-width:1000px){#t-inq>.ldwrap,#t-mail .mlwrap{position:relative}#t-inq>.ldwrap.lwset{grid-template-columns:var(--lw) minmax(0,1fr)}#t-mail .mlwrap.lwset{grid-template-columns:var(--lw) minmax(0,1fr)} .ldsplit{display:block;position:absolute;top:0;bottom:0;left:calc(var(--lwx,500px) + 6px);width:12px;margin-left:-6px;cursor:col-resize;z-index:5;touch-action:none;outline:none} .ldsplit::before{content:"";position:absolute;top:0;bottom:0;left:5px;width:2px;border-radius:2px;background:transparent;transition:background-color var(--mo-state) var(--mo-ease)} .ldsplit::after{content:"";position:absolute;top:50%;left:3px;width:6px;height:28px;margin-top:-14px;border-radius:4px;background:var(--line);opacity:0;transition:opacity var(--mo-state) var(--mo-ease)} .ldsplit:hover::before,.ldsplit:focus-visible::before,.ldsplit.drag::before{background:color-mix(in srgb,var(--ink) 30%,transparent)} .ldsplit:hover::after,.ldsplit:focus-visible::after,.ldsplit.drag::after{opacity:1} html.lddrag,html.lddrag *{cursor:col-resize!important;user-select:none}} #t-mail .mllist,#t-mail .mldet{height:100%;overflow-y:auto;overscroll-behavior:contain} #t-mail .mldet{display:block} main:has(> #t-mail:not([hidden])){padding-bottom:16px} } @media (max-width:999px){ #t-mail.ldopen .mldet{display:block;position:fixed;inset:0;z-index:55;overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:0;animation:roomIn .28s var(--out);-webkit-overflow-scrolling:touch} .mdback{display:inline-flex} .mdacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.mdacts>*{text-align:center;justify-content:center;padding-left:6px;padding-right:6px}.mdacts .pri{grid-column:1/-1} .mlhead{gap:10px}.mlseg{order:3;width:100%;overflow-x:auto}.mlseg button{flex:1;justify-content:center;padding:6px 8px} } .ldbar{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px} .ldhd{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .ldttl{display:flex;align-items:baseline;gap:8px;flex:1 1 auto;min-width:0} .ldttl b{font-size:15px;font-weight:500;white-space:nowrap} .ldact{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .ldact .s{padding:7px 11px;font-size:13px} .ldact .ico{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center} .ldext{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:500;color:var(--ink)} .ldext svg{flex:none;color:var(--ink3)} .ldtools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px} .ldtools input[type=search]{flex:1 1 220px;min-width:0;padding:8px 11px;font-size:13px} .ldtools .s{padding:7px 11px;font-size:13px} .ldtools .s.act{border-color:var(--ink);font-weight:500} .ldf{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .ldf select{width:auto;max-width:200px;padding:7px 8px;font-size:13px} .ldfbtn{display:none} .ldwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start} .ldlist{display:grid;gap:10px;min-width:0} .lddet{display:none;min-width:0} .ldempty{display:grid;gap:8px;justify-items:center;text-align:center;padding:40px 18px;color:var(--ink3);font-size:13px;line-height:1.6;background:var(--paper);border:1px dashed var(--line);border-radius:14px} .ldempty b{color:var(--ink);font-size:14px;font-weight:500} .ldempty .s{text-decoration:none} .lddet .ldempty{border:0;border-radius:0;padding:64px 24px} @media (min-width:1000px){#fxdet:has(>.ldempty:only-child),#vsdet:has(>.ldempty:only-child){display:flex;flex-direction:column;justify-content:center}} .ldnone{color:var(--ink3);font-weight:400} .ldnote{font-size:12px;color:var(--ink3);margin-top:6px;line-height:1.55} .ldav{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none} .ldav.sm{width:28px;height:28px;border-radius:9px;font-size:14px} .ldc{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;min-width:0;transition:border-color .15s var(--ease),box-shadow .2s var(--ease)} .ldc:hover{border-color:color-mix(in srgb,var(--ink3) 55%,var(--line))} .ldc.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)} .ldc.test{opacity:.75} .ldc .h,.lddh .h{display:flex;gap:10px;align-items:flex-start;min-width:0} /* header buttons on one line with the star and trash icons, owner 10-07 */ .lddh .h>.frtog,.lddh .h>.iqstarb{align-self:center} .lddh .h>.frtog{padding:6px 12px;font-size:12px;margin-right:2px} .ldc .w,.lddh .w{flex:1;min-width:0} /* polish 10-11: the 통합 문의 detail header keeps one row only while it fits. Narrower panes get two rows like on phones, name and icons on top, the controls under the name below 1200px in every language (owner 10-17: the Assignee picker and the BLUWHA buttons made one row cut the status pill to a few letters). The name never drops below 120px */ @media (min-width:761px){ #iqdet .lddh{container:iqdh/inline-size} #iqdet .lddh .h{flex-wrap:wrap;row-gap:8px} #iqdet .lddh .h>.w{min-width:120px} /* owner 10-17: one thin line: name, grades, 담당, then the icons on the right. The call button left the header (the 통화 기록 card keeps it) and the language switch moved down to the 이메일 기록 bar, so there is no second row at any width */ #iqdet .lddh .h{align-items:center;column-gap:8px;row-gap:8px} #iqdet .lddh .h>.w{order:1;flex:1 1 160px;min-width:140px} #iqdet .lddh .h>.iqtiers{order:2;flex:none} #iqdet .lddh .h>.asgwrap{order:3;flex:none} #iqdet .lddh .h>.iqstarb.ib2fx{order:6;margin-left:auto} #iqdet .lddh .h>.iqstarb.ib2nx{order:7}#iqdet .lddh .h>.iqstarb.iqmpv{order:8} #iqdet .lddh .h>.iqstarb:not(.ib2fx):not(.ib2nx):not(.iqmpv):not(.iqfsb){order:9}#iqdet .lddh .h>.iqfsb{order:10}#iqdet .lddh .h>.iqhm{order:11} #iqdet .lddh .h::after{display:none} #iqdet .lddh .iqtiers button{height:32px;min-height:32px;min-width:30px;padding:0 9px;font-size:13px} #iqdet .lddh .iqtrsw button{height:28px;min-height:28px;padding:0 10px;font-size:13px} #iqdet .lddh .callbtn{height:32px} #iqdet .lddh .asgwrap .asgpl{font-size:12px} @container iqdh (max-width:959px){#iqdet .lddh .h{column-gap:6px}#iqdet .lddh .h>.iqav2{display:none}#iqdet .lddh .h>.ib2fx:not(.on){width:34px;min-width:34px;padding:0}#iqdet .lddh .h>.ib2fx:not(.on) span{display:none}} } .ldc .nm{font-size:15px;font-weight:500;line-height:1.35;overflow-wrap:anywhere} .ldc .sb,.lddh .sb{font-size:12px;color:var(--ink3);line-height:1.45;overflow-wrap:anywhere} .ldc .tm{flex:none;text-align:right;font-size:12px;color:var(--ink2);line-height:1.35;white-space:nowrap} .ldc .tm small{display:block;font-size:11px;color:var(--ink3)} .ltags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px} .ltags:empty{display:none} .ltags .tag{font-size:11px;padding:2px 7px;border-radius:6px;font-weight:500} .tag.rs{background:var(--sink);color:var(--ink2)} .tag.rs.hot{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)} .tag.same{background:color-mix(in srgb,var(--info) 13%,transparent);color:var(--info)} .lcx{display:grid;gap:5px;margin-top:10px} .lc{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;min-width:0;font-size:13px} .lc .ci{flex:none;display:flex;color:var(--ink3);font-style:normal} .lc .v{flex:1 1 150px;min-width:0;font-weight:500;overflow-wrap:anywhere} .lbs{display:flex;gap:5px;flex:none} .lbt{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink2);font:inherit;font-size:12px;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap;transition:border-color .15s var(--ease),color .15s var(--ease),transform .3s var(--snap)} .lbt:hover{border-color:var(--brand);color:var(--brand)} .lbt:active{transform:scale(.94);transition-duration:0s} .lbt.sm{height:22px;padding:0 7px;font-size:11px;margin-left:6px;vertical-align:1px} .lai{margin-top:10px;background:var(--wash);border:1px solid var(--line);border-radius:10px;padding:8px 10px} .lai .kd{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;font-weight:500;margin-bottom:3px} .lrows{margin-top:8px} .lr{display:flex;gap:8px;font-size:13px;line-height:1.55;padding:1.5px 0;min-width:0} .lr>b{flex:none;width:34px;color:var(--ink3);font-weight:500;font-size:12px;line-height:1.7} .lr>span{flex:1;min-width:0;overflow-wrap:anywhere} .lr.act>span{font-weight:500} .lr .hl,.kv .hl{color:var(--brand);font-weight:500} .lr .tag,.kv .tag{vertical-align:1px} .lbtns{display:flex;gap:6px;margin-top:10px} .lbtns .s{padding:7px 12px;font-size:13px} .ldtop{position:sticky;top:0;z-index:2;background:var(--paper);border-bottom:1px solid var(--line);padding:14px 16px 12px} .lddh .nm{font-size:16px;font-weight:600;line-height:1.35;overflow-wrap:anywhere} .lddx .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px} .lddx .acts .s,.lddx .acts .p{padding:8px 13px;font-size:13px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center} .ldx{display:none;flex:none;width:36px;height:36px;align-items:center;justify-content:center;border:0;background:var(--sink);border-radius:10px;color:var(--ink);cursor:pointer} .ldsecs{columns:2 300px;column-gap:28px;padding:0 16px 18px} .lsec{padding:13px 0 12px;border-bottom:1px solid var(--line);min-width:0;break-inside:avoid;-webkit-column-break-inside:avoid} .lsec.full{column-span:all;border-bottom:0} .lsec h4{font-size:12px;font-weight:500;color:var(--ink2);letter-spacing:.02em;margin-bottom:7px} .kv{display:flex;align-items:baseline;gap:10px;font-size:13px;line-height:1.55;padding:2px 0;min-width:0} .kv>b{flex:none;width:92px;color:var(--ink3);font-weight:500;font-size:12px;line-height:1.7;overflow-wrap:anywhere} .kv>span{flex:1;min-width:0;overflow-wrap:anywhere} .kv .mono{font-size:12px} .kv .ua{word-break:break-all} .lq{margin:0;padding:8px 11px;background:var(--wash);border-radius:10px;font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere} .lhist{display:grid;gap:8px} .lh1{font-size:13px;line-height:1.55;min-width:0} .lh1 .m{color:var(--ink2);overflow-wrap:anywhere} .lh1 .lpg{font-size:12px;overflow-wrap:anywhere} .lsame{display:grid;gap:6px} .lsame button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:8px 10px;cursor:pointer;font-size:13px;color:var(--ink);min-width:0} .lsame button:hover{border-color:var(--brand)} .lsame .t{flex:1;min-width:0} .lsame .t b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lsame .t small{display:block;font-size:11px;color:var(--ink3)} .lsame .why{display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-end;flex:0 1 auto} .lsame .why i{font-style:normal;font-size:11px;font-weight:500;border-radius:6px;padding:1px 6px;background:color-mix(in srgb,var(--info) 13%,transparent);color:var(--info);white-space:nowrap} .ltx{display:grid;gap:6px;background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:10px} .lm{max-width:86%;padding:7px 11px;border-radius:14px;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere} .lm small{display:block;font-size:11px;color:var(--ink3);margin-bottom:2px;white-space:normal} .lm.u{justify-self:start;background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:5px} .lm.b{justify-self:end;background:var(--sink);border-bottom-right-radius:5px} .lm.a{justify-self:end;background:var(--brand);color:var(--brand-ink);border-bottom-right-radius:5px} .lm.a small{color:inherit;opacity:.7} .lm.n{justify-self:center;max-width:94%;background:color-mix(in srgb,var(--info) 10%,transparent);border:1px solid color-mix(in srgb,var(--info) 26%,transparent)} /* 손가락으로 쓰는 기기(태블릿 포함)는 작은 버튼도 누르기 쉽게 */ @media (pointer:coarse){ .lbt{height:34px;padding:0 12px;font-size:12px} .lbt.sm{height:32px;padding:0 11px} .lbtns .s{min-height:40px} } /* 넓은 화면: 목록과 상세가 창 높이에 맞춰 각자 스크롤 (높이는 ldFit 이 --ldh 로 맞춥니다) */ @media (min-width:1000px){ main:has(> #t-lead:not([hidden])){padding-bottom:16px} .ldwrap{grid-template-columns:minmax(380px,500px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:var(--ldh,calc(100vh - 250px));min-height:420px;align-items:stretch} .ldlist{overflow-y:auto;overscroll-behavior:contain;align-content:start;padding:0 6px 16px 0} .lddet{display:block;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);border:1px solid var(--line);border-radius:14px} } /* 좁은 화면: 상세는 전체 화면, 이름 줄만 위에 붙어 있고 태그와 버튼은 같이 스크롤 */ @media (max-width:999px){ #t-lead.ldopen .lddet{display:block;position:fixed;inset:0;z-index:55;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);animation:roomIn .28s var(--out);-webkit-overflow-scrolling:touch} .ldx{display:flex} .ldtop{display:contents} .lddh{position:sticky;top:0;z-index:2;background:var(--paper);border-bottom:1px solid var(--line);padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top))} .lddh .h{align-items:center} .lddx{padding:10px 14px 12px;border-bottom:1px solid var(--line)} .lddx .ltags{margin-top:0} .ldsecs{padding-bottom:calc(24px + env(safe-area-inset-bottom))} } @media (max-width:760px){ .ldbar{padding:10px 12px} .ldact{width:100%} .ldact .ldext{flex:1 1 auto;justify-content:center;height:38px} .ldmail{display:none} .ldfbtn{display:inline-flex;align-items:center;height:40px} .ldtools input[type=search]{height:40px;font-size:16px} .ldf{display:none;width:100%;grid-template-columns:1fr 1fr;gap:6px} .ldtools.open .ldf{display:grid} .ldf select{max-width:none;width:100%;height:40px;font-size:14px} .ldf .s{height:40px} .ldc{padding:12px} .lbt{height:34px;padding:0 12px;font-size:12px} .lbt.sm{height:34px;padding:0 12px} .kv a:not(.lbt),.lh1 a{display:inline-block;padding:4px 0} .lbtns .s{flex:1 1 0;height:40px} .lddx .acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .lddx .acts .s,.lddx .acts .p{height:40px;padding:0 8px} .ldsecs{columns:1;padding:0 14px 24px} .kv>b{width:84px} } /* ---- 후속 연락 (대화는 닫지 않고, 우리가 마지막으로 답한 뒤 조용한 대화를 모읍니다) ---- */ .seg.sub button.fup.has{color:var(--warn)} .seg.sub button.fup.has.on{border-bottom-color:var(--warn)} .tag.fu{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)} .tag.hot{background:var(--warn);color:var(--on-acc)} .tpl .tlb.fu{color:var(--warn)} .tpl button.fu{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));color:var(--warn)} /* ---- 방문자 탭과 대화의 사이트 활동 (상담 요청 탭의 목록·상세 틀을 같이 씁니다) ---- */ .nin .bdg.soft{background:var(--sink);color:var(--ink2);animation:none} .vsst{font-size:12px} #vsmin{width:auto;padding:7px 8px;font-size:13px} .vsmine{padding:6px 10px;font-size:13px} .vsmine[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)} .tag.me{background:var(--info);color:var(--on-acc)} .vsc .ldav{font-size:20px} .vsev{margin-top:7px;font-size:12px;color:var(--ink2);overflow-wrap:anywhere} .ltags button.tag{border:0;cursor:pointer;font:inherit;font-size:11px;padding:2px 7px;border-radius:6px;font-weight:500} .jpages{list-style:none;display:grid;gap:5px;margin:6px 0 0;padding:0} .jpages li{display:flex;gap:8px;font-size:13px;line-height:1.45;min-width:0} .jpages .jt{flex:none;width:58px;color:var(--ink3);font-variant-numeric:tabular-nums} .jpages .jn{flex:1;min-width:0;overflow-wrap:anywhere} .jpages .jn small{display:block;color:var(--ink3);font-size:11px} .jpages .jck{display:flex;flex-direction:column;gap:2px;margin-top:4px;padding-left:8px;border-left:2px solid var(--line)} .jpages .jck i{font-style:normal;font-size:12px;color:var(--ink2)} .jpages .jck i em{font-style:normal;color:var(--ink3);margin-right:6px;font-variant-numeric:tabular-nums} .jpages .jck i.rage,.jpages .jck i.dead{color:var(--warn)} .jpages .jm{flex:none;color:var(--ink3);font-size:11px;text-align:right;white-space:nowrap} .jvh{font-size:12px;font-weight:500;color:var(--ink2);margin-top:12px} .jvh:first-child{margin-top:0} .jev{display:grid;gap:5px} .jev div{font-size:13px;line-height:1.45;overflow-wrap:anywhere} .jev .k{font-weight:500;margin-right:4px} .jev .key .k{color:var(--brand)} .jev small{display:block;color:var(--ink3);font-size:11px} #psite{font-size:12px} #psite .jpages .jt{width:44px} #psite .s{margin-top:8px;padding:6px 10px;font-size:12px} @media (max-width:999px){ #t-vis.ldopen .lddet{display:block;position:fixed;inset:0;z-index:55;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);animation:roomIn .28s var(--out);-webkit-overflow-scrolling:touch} } @media (min-width:1000px){ main:has(> #t-vis:not([hidden])){padding-bottom:16px} } /* 영어 화면은 이름표가 길어서 상담 요청 카드의 이름표 칸을 넓힙니다 (한국어는 두 글자라 34px) */ html[lang="en"] .lr>b{width:64px} .tag.spam{background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--muted);border-color:color-mix(in srgb,var(--muted) 35%,transparent)} .ri.spamrow{opacity:.72} .tag.nocx{background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent)} /* 통합 문의 compact (owner 10-05: "takes up too much space"): title, search and actions on one line, tighter list and detail */ #t-inq .ldbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 12px;margin-bottom:10px} #t-inq .ldhd{display:contents} #t-inq .ldttl{order:1} #t-inq .ldtools{order:2;flex:1 1 320px;margin-top:0} #t-inq .ldtools input{padding-top:7px;padding-bottom:7px} #t-inq .ldact{order:3;margin-left:0} #t-inq .iqmailnote{order:4;flex-basis:100%;margin-top:0} #t-inq #iqstat{font-size:11px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #t-inq .iqr{min-height:50px;padding:7px 12px;gap:2px 8px} #t-inq #iqlist:not(.dense) .iql2:not(:has(.iqn)){display:none} #t-inq #iqlist .iqx .wantv{margin-top:4px} #t-inq #iqlist .iqx .iqsrc{margin-top:4px} #t-inq #iqlist .iqx .iqlast{margin-top:3px} #t-inq .ldtop{padding:10px 14px 9px} #t-inq .lddh .nm{font-size:15px} #t-inq .iqbody{gap:10px;padding:0 14px 14px} #t-inq .iqwho{padding-top:6px} #t-inq .iqwho .kv{padding:1px 0} /* 누구인지, owner 10-13: compact rows */ #t-inq .iqwho.cmp{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 20px;padding-top:4px;padding-bottom:4px} #t-inq .iqwho.cmp .kv{font-size:12px;line-height:1.4;padding:2px 0;align-items:center;min-height:22px;gap:8px} #t-inq .iqwho.cmp .kv>b{width:62px;flex:none;font-size:11px;line-height:1.4;color:var(--ink3);font-weight:500;white-space:normal;overflow-wrap:break-word} #t-inq .iqwho.cmp .kv>span{display:flex;flex-wrap:wrap;align-items:center;gap:3px 5px;min-width:0} #t-inq .iqwho.cmp .kv>span>a:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%} #t-inq #iqdet .iqwho.cmp .lbt.sm,#t-inq .iqwho.cmp .lbt.sm{height:20px;min-height:20px;padding:0 7px;margin:0;font-size:11px;line-height:1;border-radius:6px} #t-inq .iqwho.cmp .iqchs{flex-wrap:wrap;gap:3px} #t-inq .iqwho.cmp .iqch{font-size:11px} #t-inq .iqwho.cmp .iqsc{font-size:11px;padding:1px 6px} .foldin{animation:foldIn var(--mo-state) var(--mo-ease) backwards} @keyframes foldIn{from{opacity:.6;transform:translateY(-3px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.foldin{animation:none}} .cx .cxb{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--mo-state) var(--mo-ease)} .cx.cxopen .cxb{grid-template-rows:1fr} .cx .cxi{overflow:hidden;min-height:0;opacity:.6;transition:opacity var(--mo-state) var(--mo-ease)} .cx.cxopen .cxi{opacity:1} .cx .cxchev{all:unset;box-sizing:border-box;cursor:pointer;border-radius:6px;flex:none;display:inline-grid;place-items:center;width:22px;height:22px;color:var(--ink3);transition:transform var(--mo-state) var(--mo-ease)} .cx.cxopen .cxchev{transform:rotate(180deg)} @media (prefers-reduced-motion:reduce){.cx .cxb,.cx .cxchev,.cx .cxi{transition:none}} .cx .cxchev:hover{background:var(--sink);color:var(--ink)} #iqdet .iqbody>section.iqf>.iqfh2{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;-webkit-user-select:none} #iqdet .iqbody>section.iqf>.iqfh2>*{margin-left:0;min-width:0} #iqdet .iqbody>section.iqf>.iqfh2>.iqfsp{flex:1 1 auto;min-width:8px} #iqdet .iqbody>section.iqf>.iqfh2>.cxchev{margin-left:2px} #iqdet .iqbody>section.iqcalls>h4:last-child{margin-bottom:0}#iqdet#iqdet .iqbody>section.iqcalls:has(>h4:last-child){padding-bottom:0} #iqdet .iqbody>section.iqcalls:not(.iqf)>h4>.crxadd{margin-left:auto;margin-right:30px} #iqdet .iqbody>section.iqf:not(.cxopen)>.iqfh2{margin-bottom:0} #iqdet .iqbody>section.iqf.cxopen>.cxb>.cxi{padding-top:2px} #iqdet .iqbody>section.iqf>.iqfh2:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px} .kvcl{display:block;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;flex:1} .kvcl.open{white-space:normal;overflow:visible} .kvcl:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-radius:4px} .kvx{flex:none;text-decoration:none;color:var(--ink3);font-size:12px} .kvsrc{flex:none;font-size:11px}.kvsrc a{margin-right:2px} .kvsep{color:var(--ink2)}.kvsep+.kvsep:before,.kvsep+.lbt{margin-left:4px} .kvlink{all:unset;cursor:pointer;color:var(--ink2);font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%} .kvlink.mute{color:var(--ink3)}.kvlink:hover{color:var(--ink)}.kvlink:focus-visible{outline:2px solid var(--brand);border-radius:4px} @media (max-width:760px){#t-inq #iqdet .iqwho.cmp .lbt.sm{height:26px;min-height:26px;padding:0 9px}#t-inq .iqwho.cmp{grid-template-columns:1fr}} #t-inq .iqcard{padding:10px 12px} #t-inq .iqcard>h4{margin-bottom:6px} #t-inq .iqcard .wantv{margin:4px 0 6px} #t-inq .iqcard .wt{padding:4px 10px 4px 4px} #t-inq .iqcard .wti{width:36px;height:36px} #t-inq .iqcard .wtq{font-size:15px} #t-inq .iqtlsec{margin-top:12px;padding-top:10px} @media (max-width:999px){#t-inq .ldtools{flex-basis:100%;order:4}#t-inq .iqmailnote{order:5}} .mb .mtr{margin-top:8px;padding-top:7px;border-top:1px dashed color-mix(in srgb,currentColor 25%,transparent);font-size:.94em;opacity:.85;white-space:pre-wrap} .mtool .mtrb{font-size:11px;font-weight:600;padding:0 6px;width:auto} /* 목록 보기: 한눈에 / 자세히 보기 (owner 10-05) */ .dens{display:inline-flex;background:var(--sink);border-radius:10px;padding:3px;gap:0} .dens button{border:0;background:transparent;color:var(--ink3);font-size:12px;font-weight:500;padding:6px 11px;border-radius:8px;cursor:pointer;white-space:nowrap} .dens button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.10),0 0 0 1px var(--line)} /* 원하는 제품과 수량을 사진과 큰 숫자로 */ .wantv{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px} .wt{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:12px;background:var(--paper)} .wti{flex:none;width:46px;height:46px;border-radius:9px;background:var(--sink);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--ink3)} .wti img{width:100%;height:100%;object-fit:cover;display:block} .wtt{display:flex;flex-direction:column;min-width:0;line-height:1.3} .wtt b{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px} .wtq{font-size:18px;font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--ink)} .wtq.no{font-size:12px;font-weight:500;color:var(--ink3)} .wts{font-size:11px;color:var(--ink3);font-weight:500} .wantv.sm .wti{width:34px;height:34px;border-radius:7px} .wantv.sm .wtq{font-size:14px} .wantv.sm .wt{padding:4px 10px 4px 4px;border-radius:10px} /* 한눈에: 이름, 상태, 원하는 것만 */ #ldlist.dense .ldc{padding:10px 12px} #ldlist.dense .ldc .lcx,#ldlist.dense .ldc .lai,#ldlist.dense .ldc .lrows,#ldlist.dense .ldc .lbtns{display:none} #ldlist.dense .ldc .ltags:empty{display:none} #ldlist.dense .ldc .wantv{margin-top:8px} #iqlist .iqx{display:none} #iqlist:not(.dense) .iqx{display:block;grid-column:2 / -1;min-width:0} #iqlist:not(.dense) .iqr{align-items:start} #iqlist{grid-auto-rows:max-content} #iqlist:not(.dense) .iql2 .wn{display:none} #iqlist:not(.dense) .iql2:empty{display:none} .iqsrc{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px} /* where the inquiry came from, owner 10-07: clear at a glance in both views */ .iqch{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;line-height:1;padding:3px 8px 3px 6px;border-radius:999px;white-space:nowrap;flex:none} .iqch svg{width:12px;height:12px;flex:none} .iqch.f{background:color-mix(in srgb,#2563eb 12%,transparent);color:var(--c-blue)} .iqch.c{background:color-mix(in srgb,#7c3aed 13%,transparent);color:var(--c-violet)} .iqch.m{background:color-mix(in srgb,#16a34a 13%,transparent);color:var(--c-green)} .iqch.s{background:color-mix(in srgb,#ea580c 13%,transparent);color:var(--c-orange)} .iqch.a{background:var(--sink);color:var(--ink2)} .iqch.s{min-height:0;min-width:0} /* class s = sample box chip, not the button class */ .iqchs{display:inline-flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:4px;margin-inline-start:6px;vertical-align:middle} .iqchs.dt{margin:0} .iqchs .iqt{font-weight:500;opacity:.8;margin-inline-start:2px} .iqsrc i{font-style:normal;font-size:11px;font-weight:500;padding:2px 7px;border-radius:6px;background:var(--sink);color:var(--ink2)} .iqsrc i.c{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)} .iqsrc i.f{background:color-mix(in srgb,var(--info) 12%,transparent);color:var(--info)} .iqlast{font-size:12px;color:var(--ink2);margin-top:6px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .iqpth{width:18px;height:18px;border-radius:4px;object-fit:cover;vertical-align:-4px;margin-right:5px} /* 상세 맨 아래: 방문, 기기, 시간 정보 (접힘) */ .ldmore{column-span:all;margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:0 14px} .ldmore>summary{cursor:pointer;list-style:none;padding:12px 0;font-size:12px;font-weight:500;color:var(--ink3);display:flex;align-items:center;gap:6px} .ldmore>summary::-webkit-details-marker{display:none} .ldmore>summary:before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .2s} .ldmore[open]>summary:before{transform:rotate(45deg)} .ldmore .ldsecs{padding:0 0 10px} .lsec.want .wantv{margin-top:0} /* 웹사이트 문의 탭 (2026-10-05 개편): 고객 한 명에 한 줄, 상세는 누구인지, 원하는 것, 하나의 기록, 아래 작업 줄. 목록과 상세 틀은 상담 요청 탭과 같습니다 */ #iqf,#iqch,#iqmk,#iqsort{width:auto;max-width:220px;padding:7px 8px;font-size:13px} .iqsc{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--sink);color:var(--ink2);white-space:nowrap} .iqsc.s3{background:color-mix(in srgb,#dc2626 13%,transparent);color:var(--c-red)}.iqsc.s2{background:color-mix(in srgb,#ea580c 13%,transparent);color:var(--c-orange)}.iqsc.s1{background:color-mix(in srgb,#2563eb 11%,transparent);color:var(--c-blue)} .iqmailnote{margin-top:8px;font-size:12px;color:var(--ink3);cursor:help;display:flex;align-items:center;gap:6px} .iqs{display:inline-block;font-size:11px;font-weight:500;padding:2px 7px;border-radius:6px;background:var(--sink);color:var(--ink2);white-space:nowrap} .iqs.new{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)} .iqs.open{background:color-mix(in srgb,var(--info) 13%,transparent);color:var(--info)} .iqs.done{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)} .iqs.unr{background:var(--warn);color:var(--on-acc)} #iqlist{gap:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;align-content:start} /* owner 10-17 "make it fast": rows and emails outside the visible area skip layout and paint until they scroll in, they look the same */ /* owner 10-19 "the list keeps changing its size as it loads": rows off screen were drawn at a guessed 92 px, about 930 px short on 31 rows, and every load redraws the list so the guesses came back; every row is drawn at its real height now */ /* owner 10-19 scroll glitch: the email history no longer skips drawing off-screen emails. Every redraw made new rows that started at a guessed 140 px and grew to their real height while scrolling, so 더 보기, 접기 and every anchor landed in the wrong place */ #iqlist .ldempty{border:0;border-radius:0} .iqr{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:60px;padding:9px 14px;border-bottom:1px solid var(--line);cursor:pointer;outline:none;transition:background-color .12s var(--ease)} .iqr:last-child{border-bottom:0} .iqr:hover{background:color-mix(in srgb,var(--sink) 55%,transparent)} .iqr.on{background:var(--sink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 18%,transparent)} .iqr:focus-visible{box-shadow:inset 0 0 0 2px var(--info)} .iqav2{position:relative;width:32px;height:32px;border-radius:50%;background:var(--sink);color:var(--ink2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;letter-spacing:.02em;flex:none} .iqr.on .iqav2{background:var(--paper)} .iqav2 i{position:absolute;top:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:var(--warn);border:2px solid var(--paper)} .iqav2.cdr{box-shadow:0 0 0 2px color-mix(in srgb,var(--warn) 75%,transparent),0 0 14px 4px color-mix(in srgb,var(--warn) 55%,transparent)} /* owner 10-19: more noticeable */ .iqr.on .iqav2.cdr{box-shadow:0 0 0 2.5px var(--warn),0 0 18px 6px color-mix(in srgb,var(--warn) 70%,transparent)} /* the selected row sits on grey, owner 10-19: stronger there */ .iqav2.cdnew{animation:cdNew .9s cubic-bezier(.2,.8,.2,1) 2} /* [mdlive 10-26] a draft that just arrived live pulses twice */ @keyframes cdNew{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}} @media (prefers-reduced-motion:reduce){.iqav2.cdnew{animation:none}} .iqr.on .iqav2 i{border-color:var(--sink)} .iqav2.lg{width:38px;height:38px;font-size:13px} /* owner 10-22: paid sample customers, a slow breathing ring that fades from mint to violet to pink and back (box-shadow and background only, no layout) */ .iqav2.sbp{color:var(--ink);animation:iqSbp 4.2s ease-in-out infinite} @keyframes iqSbp{0%,100%{box-shadow:0 0 0 2px rgba(16,185,129,.85),0 0 3px 1px rgba(16,185,129,.25);background-color:color-mix(in srgb,#10b981 16%,var(--paper))}33%{box-shadow:0 0 0 2px rgba(99,102,241,.85),0 0 14px 5px rgba(99,102,241,.32);background-color:color-mix(in srgb,#6366f1 15%,var(--paper))}66%{box-shadow:0 0 0 2px rgba(236,72,153,.85),0 0 9px 3px rgba(236,72,153,.26);background-color:color-mix(in srgb,#ec4899 13%,var(--paper))}} .iqr.asgpk .iqav2.sbp,.iqr.asgon .iqav2.sbp{animation:none} /* owner 10-27 iPhone crash: the list 더 보기 button of a phone, and no endless or blur animations in that list on a phone, where each one made WebKit keep its own layer: the paid ring stays as a still ring, translated text appears without the blur */ .iqlimw{display:flex;justify-content:center;padding:14px 12px 20px} .iqlimw .s{min-width:160px} @media (max-width:999px){#iqlist .iqav2.sbp{animation:none;box-shadow:0 0 0 2px rgba(16,185,129,.85);background-color:color-mix(in srgb,#10b981 16%,var(--paper))}#iqlist .iqtx.trin,#iqlist .iqtx.trwait,#iqlist .trx.busy,#iqlist .trst,#iqlist .iqav2.cdnew{animation:none}#iqlist .iqtx.trwait,#iqlist .trx.busy{opacity:.7}} @media (prefers-reduced-motion:reduce){.iqav2.sbp{animation:none;box-shadow:0 0 0 2px rgba(16,185,129,.85);background-color:color-mix(in srgb,#10b981 16%,var(--paper))}} .iqm{min-width:0} .iql1{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 7px;min-width:0;white-space:nowrap;overflow:hidden} .iql1 b{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 0 auto;max-width:100%} .iql1 .co{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto} .iql1 .fl,.lddh .fl{font-size:13px;flex:none;font-weight:400} .iql2{display:flex;align-items:center;gap:6px;min-width:0;margin-top:2px} .iqsum{font-size:13px;font-weight:500;color:var(--ink);margin:2px 0 6px;line-height:1.35} .iqsum .iqttl{white-space:normal} .iqlow{font-style:normal;font-size:11px;font-weight:600;color:#b91c1c;background:color-mix(in srgb,#dc2626 10%,transparent);padding:1px 6px;border-radius:6px;margin-left:4px} .mdcw .mdwl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink2);margin:6px 0 12px} .mdsp{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--aic) 13%,transparent);color:var(--aic);animation:mdBreath 1.6s var(--ease) infinite} @keyframes mdBreath{0%,100%{opacity:1}50%{opacity:.55}} .mddot{display:inline-flex;gap:3px;margin-left:2px} .mddot i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.35;animation:mdDot 1.1s var(--ease) infinite} .mddot i:nth-child(2){animation-delay:.15s}.mddot i:nth-child(3){animation-delay:.3s} @keyframes mdDot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}} .mdsk{display:grid;gap:9px;padding:4px 0 6px} .mdsk i{display:block;height:10px;border-radius:6px;background:var(--sink);position:relative;overflow:hidden;animation:mdLine .4s var(--out) backwards} .mdsk i:nth-child(2){animation-delay:.12s}.mdsk i:nth-child(3){animation-delay:.24s}.mdsk i:nth-child(4){animation-delay:.36s}.mdsk i:nth-child(5){animation-delay:.48s} .mdsk i::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--paper) 70%,transparent),transparent);animation:mdShim 1.4s ease-in-out infinite} @keyframes mdLine{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @keyframes mdShim{to{transform:translateX(100%)}} .aibz{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;max-width:100%} .aibz .mdsp{width:20px;height:20px;border-radius:7px;flex:none} .aibz .mdsp svg{width:13px;height:13px} .aibz .mddot{margin-left:0;flex:none} .aibz.lite{gap:6px} .aibt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mdain.err{color:var(--pink-d);background:var(--pink-s);margin:0 0 6px} .mdain.busy{color:var(--aic);background:color-mix(in srgb,var(--aic) 8%,transparent);animation:aiIn .25s var(--out) backwards} .mdain.busy span{flex:none}.mdain.busy .aibz{flex:1;font-weight:500} @keyframes aiIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}} .mdtr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:12px 14px;margin:0 0 8px;border-radius:14px;background:var(--wash);border:1px solid color-mix(in srgb,var(--aic) 32%,transparent);box-shadow:0 10px 28px -18px color-mix(in srgb,var(--aic) 70%,transparent)} .mdtr.nw{animation:trIn .38s cubic-bezier(.2,.8,.2,1)} .mdtrg{width:36px;height:36px;border-radius:11px;background:var(--aic);color:#fff;font-weight:600;font-size:18px;display:grid;place-items:center;overflow:hidden} .mdtrg b{grid-area:1/1;animation:trFlip 1.8s cubic-bezier(.6,0,.3,1) infinite}.mdtrg b:nth-child(2){animation-delay:-.9s} .mdtrl{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--aic)}.mdtr small{color:var(--ink3);font-size:12px} .mdtrbar{grid-column:1/-1;height:6px;border-radius:99px;background:color-mix(in srgb,var(--aic) 14%,transparent);overflow:hidden;display:block} .mdtrbar em{display:block;height:100%;width:100%;border-radius:inherit;background:var(--ink2);transform-origin:left;animation:trFill 9s cubic-bezier(.12,.7,.25,1) forwards;position:relative;overflow:hidden} .mdtrbar em::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-100%);animation:mdShim 1.1s ease-in-out infinite} .mdct.aiw.trw,.mdct.trw{opacity:.4;filter:blur(.8px) saturate(.6);transition:opacity .3s,filter .3s} .mdct.trdone{animation:trDone 1.3s ease} @keyframes trIn{from{opacity:0;transform:translateY(-6px) scale(.98)}} @keyframes trFlip{0%{transform:translateY(115%);opacity:0}12%,45%{transform:none;opacity:1}57%,100%{transform:translateY(-115%);opacity:0}} @keyframes trFill{from{transform:scaleX(.05)}to{transform:scaleX(.93)}} @keyframes trDone{0%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 45%,transparent);opacity:.6}35%{opacity:1}100%{box-shadow:0 0 0 0 transparent}} @media (prefers-reduced-motion:reduce){.mdtr,.mdtrg b,.mdtrbar em,.mdtrbar em::after,.mdct.trdone{animation:none!important}.mdtrg b:nth-child(2){display:none}.mdtrbar em{transform:scaleX(.6)}} .mdct.aiw{opacity:.72;cursor:progress;background-image:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--aic) 13%,transparent) 50%,transparent 70%);background-size:260% 100%;background-repeat:no-repeat;animation:aiSweep 1.6s ease-in-out infinite} @keyframes aiSweep{from{background-position:130% 0}to{background-position:-30% 0}} .iqsc .mddot{margin:0} .fbprog .row .aibz{color:var(--aic);font-weight:500} @media (prefers-reduced-motion:reduce){.mdsp,.mddot i,.mdsk i,.mdsk i::after,.mdct.aiw,.mdain.busy{animation:none!important;opacity:1}} .iqpts{margin:2px 0 8px;padding:0;list-style:none;display:grid;gap:3px} .iqpts li{position:relative;padding-left:12px;font-size:13px;line-height:1.4;color:var(--ink)} .iqpts li::before{content:"";position:absolute;left:2px;top:.55em;width:4px;height:4px;border-radius:50%;background:var(--ink3)} .iql2 .wn{font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .iqn{flex:none;font-size:11px;font-weight:500;color:var(--ink2);background:var(--sink);border-radius:5px;padding:1px 6px;white-space:nowrap} .iqr.on .iqn{background:var(--paper)} .iqrt{display:grid;justify-items:end;gap:4px;text-align:right;min-width:0} .iqrt .tm{font-size:12px;color:var(--ink3);white-space:nowrap} .iqrt .tm.nw{color:var(--warn);font-weight:500} .iqrb{display:flex;gap:8px;align-items:center} .iqml{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--ink3);white-space:nowrap} .iqml svg{flex:none} .iqml.in{color:var(--warn);font-weight:500} .iqsd{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink2);white-space:nowrap} .iqsd::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink3);flex:none} .iqsd.new::before{background:var(--warn)} .iqsd.open::before{background:var(--info)} .iqsd.done::before{background:var(--ok)} .iqgh{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:6px;padding:8px 14px 6px;font-size:12px;font-weight:500;color:var(--ink2);background:var(--paper);border-bottom:1px solid var(--line);letter-spacing:.02em} .iqgh span{font-weight:500;color:var(--ink3);font-variant-numeric:tabular-nums} .iqgh.need{color:var(--warn)} #iqdet .ldtop .h{align-items:center} .iqbody{padding:2px 16px 18px;display:grid;gap:16px;min-width:0} .iqsec h4,.iqcard h4{font-size:12px;font-weight:500;color:var(--ink2);letter-spacing:.02em;margin-bottom:8px} .iqsec h4 .muted{font-weight:400} .iqwho{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:0 24px;padding-top:12px} .iqwho .kv .lbt{margin-left:4px} #iqdet>*{flex-shrink:0} #iqdet .iqbody{flex:1 0 auto;align-content:start} .iqcard{background:color-mix(in srgb,var(--info) 7%,var(--paper));border:1px solid color-mix(in srgb,var(--info) 30%,var(--line));border-radius:12px;padding:14px 16px;min-width:0} .iqcard>h4{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--info);letter-spacing:0;margin-bottom:10px} .iqtlsec{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)} .iqtlsec>h4{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:0;margin-bottom:14px} .iqtlsec>h4 svg{color:var(--ink3)} .iqreqs{list-style:none;display:grid;gap:6px;margin-bottom:8px} .iqreqs li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:13px;line-height:1.45} .iqreqs b{font-weight:500} .iqreqs span{color:var(--ink2);font-size:13px} .iqreqs small{color:var(--ink3);font-size:11px;font-variant-numeric:tabular-nums} .iqcard .lq{margin-top:8px;background:var(--paper);font-size:13px;white-space:normal} .iqsaid+.iqsaid{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)} .iqsaid small{display:block;color:var(--ink3);font-size:11px;font-weight:500} .iqfx{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px} .iqfx h5{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--info);margin-bottom:4px;min-width:0} .iqfx h5 .muted{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .iqfx ul{list-style:none;display:grid;gap:3px} .iqfx li{display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:1.5} .iqfx li span{flex:1;min-width:0;overflow-wrap:anywhere} .iqfx li small{flex:none;font-size:11px;color:var(--ink3)} /* 기록 = 진짜 타임라인 (owner 10-10: 둥근 카드의 굵은 왼쪽 색 줄은 쓰지 않습니다). 왼쪽에 2px 레일 하나, 항목마다 레일 위 28px 동그라미에 종류 아이콘 (받은 메일 봉투, 보낸 메일 종이비행기, 견적 폼, 메시지, 채팅, 메모), 카드는 중립: 종이색, 1px 선, 보통 둥글기. 색은 동그라미에만: 고객 쪽 파랑, 우리 쪽 회색, 채팅 보라, 샘플 주황, 견적서 초록. 팀만 보는 메모와 시스템은 점선 */ .iqtl2{position:relative;list-style:none;display:grid;gap:10px;margin:0;padding:0} .iqtl2::before{content:"";position:absolute;left:13px;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--line)} .iqe{--t:var(--ink3);position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;align-items:start;min-width:0} .iqe.d-in{--t:var(--info)}.iqe.d-out{--t:var(--ink2)}.iqe.k-chat{--t:var(--aic)}.iqe.k-smp{--t:var(--warn)}.iqe.k-quo{--t:var(--ok)} .iqen{position:relative;z-index:1;width:28px;height:28px;margin-top:7px;border-radius:50%;display:grid;place-items:center;color:var(--t);background:color-mix(in srgb,var(--t) 14%,var(--paper));box-shadow:0 0 0 3px var(--paper)} .iqen svg{width:14px;height:14px;display:block} .iqe.d-int .iqen{background:var(--paper);box-shadow:0 0 0 3px var(--paper),inset 0 0 0 1px var(--line)} .iqec{min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 14px 11px} .iqe.d-int .iqec{background:transparent;border-style:dashed} .iqeh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-bottom:6px;font-size:12px;color:var(--ink3);min-width:0} .iqek{font-weight:600;color:var(--t);white-space:nowrap} .iqe.d-out .iqek,.iqe.d-int .iqek{color:var(--ink2)} .iqes{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .iqet{margin-left:auto;white-space:nowrap} .iqtx{font-size:13px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere} .iqtx.sub{font-weight:500} .iqtx.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .iqmore{border:0;background:none;padding:3px 0;font-size:12px;color:var(--info);cursor:pointer;font-weight:500} /* 통합 문의 = 이메일 탭의 정보까지 전부 (owner 10-06): 이메일 상태 줄, 메일함, 첨부, 대시보드에서 보낸 메일, 샘플 박스, 견적서 */ .iqmlst .iqmlsh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}.iqmlst .iqmlsh svg{color:var(--ink3)}.iqmlst .iqmlsh .s{margin-left:auto} .iqmln{margin-top:6px;font-size:13px;line-height:1.5;color:var(--ink2);white-space:pre-wrap}.iqmlst .mdob,.iqe .mdob{margin:8px 0 0} .iqtl2 .iqday{display:flex;align-items:center;margin:10px 0 -2px;padding-left:40px;font-size:12px;font-weight:600;color:var(--ink3);letter-spacing:.02em} .iqtl2 .iqday:first-child{margin-top:0} .iqft{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 5px;min-width:0;color:var(--ink3)} .iqft b{font-weight:500;color:var(--ink2);overflow-wrap:anywhere}.iqft b.us{color:var(--ink)} .iqft i{font-style:normal;color:var(--ink3)} .iqft i.iqcc{margin-left:6px;padding:0 6px;border-radius:5px;background:var(--sink);font-size:12px;font-weight:500;color:var(--ink2)} .iqtl2 .iqet{display:inline-flex;align-items:baseline;gap:6px}.iqtl2 .iqet b{font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums} .iqec>.iqtx.sub{margin-bottom:2px} @media (max-width:760px){.iqtl2::before{left:12px}.iqe{grid-template-columns:26px minmax(0,1fr);column-gap:10px}.iqen{width:26px;height:26px;margin-top:6px}.iqen svg{width:13px;height:13px}.iqec{padding:9px 12px 10px}.iqeh .iqft{order:5;flex-basis:100%}.iqtl2 .iqday{padding-left:36px}} /* 고객 메모 한 줄 + 진행 단계 (owner 10-06: 누가 누구인지, 무엇을 원하는지, 어디까지 왔는지 잊지 않게) */ .cn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:flex-start;gap:8px;width:100%;padding:9px 12px;border-radius:10px;background:var(--lemon);color:var(--lemon-ink);font-size:13px;font-weight:500;line-height:1.45} .cn svg{flex:none;margin-top:2px}.cn span{min-width:0;overflow-wrap:anywhere} .cn.add{background:none;border:1px dashed var(--line);color:var(--ink3);font-weight:500}.cn.add:hover{color:var(--ink2);border-color:var(--ink3)} .cnsug{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;font-size:13px;color:var(--ink2)}.cnsug>span{margin-right:2px}.cnsug button{height:28px;padding:0 10px;font-size:12px}.cnst{display:inline-flex;margin-left:8px;font-size:12px;font-weight:600;color:#7c3aed;background:rgba(124,58,237,.08);border-radius:99px;padding:1px 8px;white-space:nowrap} .cn.ed{cursor:default;background:none;border:1px solid var(--line);padding:6px;gap:6px;align-items:center} .cn.ed input{flex:1;min-width:0;font:inherit;font-size:13px;padding:6px 8px;border:0;background:var(--wash);border-radius:7px;color:var(--ink)} .cnl{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:12px;font-weight:500;color:var(--lemon-ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cnl svg{flex:none} .cst{border:1px solid var(--line);border-radius:12px;padding:10px 12px 9px} .cstp{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px} .cstp li{position:relative;text-align:center;font-size:11px;line-height:1.3;color:var(--ink3);padding-top:16px;min-width:0} .cstp li:before{content:"";position:absolute;top:4px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--paper);border:2px solid var(--line);box-sizing:border-box;z-index:1} .cstp li:after{content:"";position:absolute;top:7px;left:-50%;width:100%;height:2px;background:var(--line)} .cstp li:first-child:after{display:none} .cstp li.on{color:var(--ink);font-weight:500}.cstp li.on:before{background:var(--brand);border-color:var(--brand)}.cstp li.on:after{background:var(--brand)} .cstp li small{display:block;font-weight:400;color:var(--ink3);font-size:11px} .cstn{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:13px;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap} .cstn b{color:var(--brand)} .iqtop2{display:grid;gap:10px;padding-top:12px} /* 샘플 결제한 고객, owner 10-27: a soft orange wash over the header and the progress, one block */ #iqdet .ldtop.sbpaid .lddh{background-image:linear-gradient(rgba(249,115,22,.14),rgba(249,115,22,.14));border-bottom-color:transparent} #iqdet .iqbody>.iqtop2.sbpaid{background:var(--paper) linear-gradient(rgba(249,115,22,.14),rgba(249,115,22,.14));margin:-10px -10px 10px;padding:4px 22px 12px;border-radius:0} .pcn{padding:0 0 10px} /* Cloudflare 카드 (owner 10-08) */ .cfr{display:grid;grid-template-columns:150px minmax(0,1fr) 150px;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:13px} .cfbar{height:8px;border-radius:99px;background:var(--sink);overflow:hidden}.cfbar i{display:block;height:100%;background:var(--ok);border-radius:99px}.cfbar i.warn{background:#e0a100}.cfbar i.bad{background:var(--pink-d)} .cfv{text-align:right;font-variant-numeric:tabular-nums}.cfv small{display:block;font-size:11px;color:var(--ink3)} .cfverd{margin:10px 0 6px;padding:10px 12px;border-radius:10px;background:var(--mint);color:var(--ok);font-weight:600;font-size:14px}.cfverd.warn{background:var(--lemon);color:var(--lemon-ink)}.cfverd small{display:block;font-weight:500;color:var(--ink2);margin-top:3px;font-size:12px} .cfby{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:13px;color:var(--ink2)}.cfby small{width:100%;color:var(--ink3)} .cfmore{padding-left:22px;font-size:13px}.cfmore summary{cursor:pointer;color:var(--ink3);display:inline-block;padding:2px 0}.cfmore .cfinc{padding-left:0;color:var(--ink2)}.cfmore .cfinc small{color:var(--ink3)} .cfinc{font-size:13px;padding:2px 0 2px 22px}.cfhelp{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--wash);font-size:13px;line-height:1.55}.cfhelp ol{margin:6px 0 0 18px} @media (max-width:640px){.cfr{grid-template-columns:1fr 110px}.cfbar{grid-column:1/-1;order:3}} /* 북마크 (owner 10-07) */ .iqstarm{display:inline-flex;color:#e0a100;margin-inline-end:4px;vertical-align:-2px} .iqstarb{all:unset;cursor:pointer;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--ink3);flex:none} .iqstarb:hover{background:var(--wash);color:var(--ink)}.iqstarb.on{color:#e0a100} .iqstarb:focus-visible{outline:2px solid var(--brand);outline-offset:2px} /* AI 계정 문제 알림 (owner 10-07): 크레딧이 떨어지면 AI 답변이 모두 멈춥니다 */ .aidown{margin:0 0 12px;padding:11px 14px;border-radius:12px;background:var(--pink-s);color:var(--pink-d);font-size:14px;line-height:1.5;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.aidown b{color:var(--pink-d)}.aidown span{flex:1;min-width:220px;color:var(--ink)}.aidown a{font-weight:600;color:var(--pink-d)} /* 공장 탭 (owner 10-06): 이메일 탭과 같은 두 칸 배치 */ @media (min-width:1000px){ #t-fx .mlwrap{grid-template-columns:minmax(300px,380px) minmax(0,1fr);height:var(--ldh,640px)} #t-fx .mllist,#t-fx .mldet{height:100%;overflow-y:auto;overscroll-behavior:contain} #t-fx .mldet{display:block} } @media (max-width:999px){ #t-fx.ldopen .mldet{display:block;position:fixed;inset:0;z-index:55;overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:0;animation:roomIn .28s var(--out);-webkit-overflow-scrolling:touch} } #t-fx .mdh .mlchip{margin-left:auto} .fxc{margin:12px 18px 0;border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0} .fxc:last-child{margin-bottom:18px} .fxh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:13px}.fxh .s,.fxh .fxup{margin-left:auto} .fxtag{all:unset;font-size:11px;font-weight:600;border-radius:999px;padding:1px 8px;background:var(--sink);color:var(--ink3);white-space:nowrap} button.fxtag{cursor:pointer}.fxtag.on{background:var(--mint);color:var(--ok)} .fxtodo{margin:10px 0 0;font-size:13px;color:var(--ink2);line-height:1.5} /* owner 10-26: the sample round, step by step */ .fxtl{margin:16px 0 4px;padding:14px 16px 6px;border:1px solid var(--line);border-radius:14px;background:var(--bg2,rgba(0,0,0,.03))} .fxtlh{font-size:12px;font-weight:600;color:var(--ink3);letter-spacing:.02em;margin-bottom:10px} .fxtl ol{list-style:none;margin:0;padding:0} .fxtl li{position:relative;display:flex;gap:12px;padding:0 0 14px} .fxtl li:not(:last-child)::before{content:'';position:absolute;left:13px;top:28px;bottom:2px;width:2px;background:var(--line)} .fxtl li.done:not(:last-child)::before{background:#2f9e44} .fxtld{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;border:2px solid var(--line);color:var(--ink3);background:var(--paper)} .fxtld svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .fxtl li.done .fxtld{background:#2f9e44;border-color:#2f9e44} .fxtl li.now .fxtld{border-color:var(--warn);color:var(--warn);box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 18%,transparent)} .fxtl li.skip .fxtld{border-style:dashed} .fxtlb{min-width:0;padding-top:4px} .fxtlb b{font-size:14px;font-weight:600} .fxtl li.todo .fxtlb b,.fxtl li.skip .fxtlb b{color:var(--ink3);font-weight:500} .fxtlm{display:block;font-size:12px;color:var(--ink3);margin-top:2px} .fxtlb .fxmadeb{margin-top:6px} .askchk{display:flex;gap:10px;align-items:flex-start;margin:12px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:600;line-height:1.45;cursor:pointer} .askchk input{margin-top:3px;flex:0 0 auto} .fxtl li.now .fxtlm{color:var(--warn);font-weight:500} .fxtlx{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px} .fxtlx span{font-size:12px;padding:3px 9px;border-radius:99px;border:1px solid var(--line);background:var(--paper)} .fxtl li.hot .fxtlx span{border-color:color-mix(in srgb,#2f9e44 45%,var(--line))} .fxgo{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}.fxsts{width:auto;padding:7px 9px;font-size:13px} .fxsafe{margin:10px 0 0;font-size:12px;color:var(--ink3);line-height:1.5} label.fxl{display:grid;gap:4px;min-width:0;margin:0 0 8px}label.fxl>span{font-size:12px;font-weight:500;color:var(--ink3)} .fxl input,.fxl textarea,.fxl select{width:100%;min-width:0} .fxacth{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:6px 2px 8px;font-size:13px}.fxacth b{font-weight:600} /* owner 10-26 "make the buttons here nice and organized": row 1 is the title and the actions (공장 채팅, the 공장 화면 pair, + 새 작업 as the main button); row 2 is the job tabs, 공장이 할 일 and 휴지통. Same buttons and ids, so the phone layout below keeps working */ .fxhi{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #t-fx .fxhead>.s{display:inline-flex;align-items:center;gap:7px} .fxbrk{display:none} @media (min-width:761px){ #t-fx .fxhead{gap:10px;row-gap:12px} #t-fx .fxhead>.mlttl{order:0;flex:1 1 auto;min-width:240px} #t-fx .fxhead>#fxchatbtn{order:1}#t-fx .fxhead>#fxmemo{order:2}#t-fx .fxhead>#fxpview{order:3}#t-fx .fxhead>#fxviewas{order:4}#t-fx .fxhead>#fxnew{order:5} #t-fx .fxhead>.fxbrk{display:block;order:6;flex-basis:100%;height:0} #t-fx .fxhead>#fxseg{order:7}#t-fx .fxhead>#fxacth{order:8;margin:0}#t-fx .fxhead>#fxtrashb{order:9;margin-left:auto} #t-fx .fxhead>.s{height:38px;padding:0 14px;border-radius:10px;font-weight:500} #t-fx .fxhead:has(#fxviewas:not([hidden]))>#fxpview{border-top-right-radius:0;border-bottom-right-radius:0} #t-fx .fxhead>#fxviewas:not([hidden]){margin-left:-11px;border-top-left-radius:0;border-bottom-left-radius:0} #t-fx .fxhead>#fxnew{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600} #t-fx .fxhead>#fxnew:hover{filter:brightness(1.08)} #t-fx .fxacth{align-items:center;height:34px;padding:0 12px;border-radius:99px;background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)} #t-fx .fxacth b{font-weight:600} } /* owner 11-02 "wasting so much vertical space": one header row on desktop, title, views, 공장이 할 일, 휴지통 and the buttons, no subtitle; below 1800px the two preview buttons show only their icon, the tooltip keeps the name */ @media (min-width:761px){ #t-fx .fxhead>.mlttl .muted{display:none} #t-fx .fxhead>.mlttl{flex:0 0 auto;min-width:0} #t-fx .fxhead>.fxbrk{display:none} #t-fx .fxhead>#fxseg{order:1}#t-fx .fxhead>#fxacth{order:2}#t-fx .fxhead>#fxtrashb{order:3;margin-left:auto} #t-fx .fxhead>#fxchatbtn{order:4}#t-fx .fxhead>#fxmemo{order:5}#t-fx .fxhead>#fxpview{order:6}#t-fx .fxhead>#fxviewas{order:7}#t-fx .fxhead>#fxnew{order:8} #t-fx .fxsum{margin-bottom:6px} } @media (min-width:761px) and (max-width:1799px){ #t-fx .fxhead>#fxpview,#t-fx .fxhead>#fxviewas{font-size:0;gap:0;padding:0 11px} } /* [fxlist 10-15] 공장 list toolbar: chips, 국가, 담당, 찾기, 정렬, the summary line and the phone filter sheet */ #fxseg button[disabled]{opacity:.42;cursor:default} #t-fx #fpcsum{display:none} .fxtb{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:0 0 10px} .fxtbf{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;min-width:0} .fxtbf:empty{display:none} .fxgrp{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0} .fxgrp>small{font-size:12px;font-weight:600;color:var(--ink3);margin:0 3px 0 0;white-space:nowrap} .fxchp{font:inherit;font-size:13px;font-weight:500;line-height:1;height:30px;padding:0 10px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink2);cursor:pointer;white-space:nowrap} .fxchp i{font-style:normal;font-size:12px;font-weight:600;color:var(--ink3);font-variant-numeric:tabular-nums} .fxchp:hover:not(:disabled):not(.on){border-color:var(--ink3);color:var(--ink)} .fxchp.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}.fxchp.on i{color:inherit;opacity:.7} .fxchp:disabled{opacity:.4;cursor:default} .fxchp:focus-visible,.fxfrad button:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .fxdot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--ink3)} .fxdot.lib{background:#2f9e44}.fxdot.match{background:#3b5bdb}.fxdot.custom{background:#d97706} .fxdot.rfq{background:#868e96}.fxdot.smpq{background:#f08c00}.fxdot.smpm{background:#3b82f6}.fxdot.smps{background:#2f9e44}.fxdot.prod{background:#7c3aed} /* owner 10-26: one color per step */ .fxctyw select{max-width:220px;height:30px}.fxctyw select.on{border-color:var(--ink);font-weight:600} .fxtb>.opasg{height:30px} .fxtbe{display:flex;align-items:center;gap:6px;margin-left:auto;min-width:0} .fxq{position:relative;display:flex;align-items:center;flex:0 1 230px;min-width:140px;margin:0} .fxq svg{position:absolute;left:10px;color:var(--ink3);pointer-events:none} .fxq input{box-sizing:border-box;width:100%;height:32px;margin:0;padding:0 10px 0 30px;font:inherit;font-size:13px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:inherit} #fxsort{flex:none;width:auto;max-width:none;height:32px} .fxfb{display:none} .fxfb i{font-style:normal;font-size:12px;font-weight:600;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper)} .fxsum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-2px 2px 10px;font-size:13px;color:var(--ink2)} .fxsum[hidden]{display:none} .fxrst{font:inherit;font-size:13px;font-weight:600;border:0;background:none;padding:2px 0;color:var(--brand);cursor:pointer;text-decoration:underline;text-underline-offset:3px} .fxfsh{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center} .fxfshb{position:absolute;inset:0;background:rgba(0,0,0,.32)} .fxfshp{position:relative;box-sizing:border-box;width:100%;max-width:560px;max-height:86vh;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);border-radius:16px 16px 0 0;padding:6px 16px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.18);animation:roomIn .24s var(--out)} .fxfshp:focus{outline:none} .fxfhd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0 4px}.fxfhd b{font-size:16px} .fxfg{padding:10px 0;border-top:1px solid var(--line)}.fxfhd+.fxfg{border-top:0} .fxfg h4{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink3)} .fxfg .fxchp{height:36px;font-size:14px;padding:0 12px} .fxfg .opasg{width:100%;max-width:none;height:40px;font-size:16px} .fxfrad{display:grid;gap:2px} .fxfrad button{font:inherit;font-size:15px;text-align:left;border:0;background:none;color:var(--ink);padding:10px 8px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:space-between} .fxfrad button.on{background:var(--sink);font-weight:600} .fxfrad button.on::after{content:"";width:6px;height:11px;border:solid currentColor;border-width:0 2.4px 2.4px 0;transform:rotate(45deg);margin:0 6px 3px 0} .fxfbt{display:flex;gap:8px;padding:12px 0 2px;border-top:1px solid var(--line);position:sticky;bottom:-14px;bottom:calc(-14px - env(safe-area-inset-bottom));background:var(--paper)}.fxfbt button{flex:1;height:44px;font-size:15px} @media (max-width:760px){ .fxtb{gap:6px;margin-bottom:8px} .fxtbf,.fxtb>.opasg,#fxsort{display:none} .fxtbe{margin-left:0;flex:1 1 100%} .fxq{flex:1}.fxq input{width:100%;height:40px;font-size:16px} .fxfb{display:inline-flex;align-items:center;gap:6px;flex:none;height:40px;padding:0 14px} .fxfb.on{border-color:var(--ink);font-weight:600} } .fxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 10px} .fx2oq{display:grid;gap:6px}.fx2oqr{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(120px,180px);gap:8px;align-items:center}.fx2oqn{min-width:0;overflow-wrap:anywhere} .fxchatb{display:inline-flex;align-items:center;gap:5px;margin-left:8px}.fxchatb b{background:var(--pink);color:#fff;border-radius:99px;padding:0 6px;font-size:11px}.fxchatb.on{border-color:var(--brand);color:var(--brand)} .fxdbk{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:70}.fxdrawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);z-index:71;margin:0;background:var(--paper);border-radius:0;overflow:auto;display:flex;flex-direction:column;box-shadow:-12px 0 32px rgba(0,0,0,.18)}.fxdrawer .fxthr{flex:1;max-height:none;align-content:end} .fxchatr{display:inline-flex;align-items:center;gap:4px;cursor:pointer}.fxchatr svg{width:12px;height:12px} .fxloose{margin:4px 0 12px;padding:10px 12px;border:1px dashed var(--line);border-radius:10px}.fxlch{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.fxlc{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 10px;border-radius:99px;background:var(--sink);font-size:13px}.fxlc select{font-size:12px;padding:2px 4px} .fxduec{display:flex;gap:4px;margin-top:4px} /* owner 10-14: status change popup and history */ .fxstq{display:grid;gap:6px;margin:4px 0 12px}.askdlg .fxstq p,.fxstq p{margin:0;font-size:13px;line-height:1.5;color:var(--ink2)}.fxstq .fxstw{color:#b45309;font-weight:600;background:rgba(245,158,11,.12);border-radius:8px;padding:6px 10px} .fxsentg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:8px}.fxsentg .fxstr select{width:100%;box-sizing:border-box}@media (max-width:520px){.fxsentg{grid-template-columns:minmax(0,1fr)}}.askdlg .fxstr,.fxstr{display:grid;gap:4px;margin:4px 0 0}.fxstr span{font-size:12px;color:var(--ink3);font-weight:500}.fxstr input{width:100%;box-sizing:border-box} @media (prefers-color-scheme:dark){:root:not([data-theme=light]) .fxstq .fxstw{color:#fbbf24}}:root[data-theme=dark] .fxstq .fxstw{color:#fbbf24} .fxqwn{margin-top:6px;padding:6px 10px;border-radius:8px;background:rgba(245,158,11,.12);color:#b45309;font-size:13px;line-height:1.5}.fxqwn b{margin-right:6px}.fxqwn span{display:block} @media (prefers-color-scheme:dark){:root:not([data-theme=light]) .fxqwn{color:#fbbf24}}:root[data-theme=dark] .fxqwn{color:#fbbf24} .mdh .fxtrb{color:var(--ink3);flex:none}.mdh .fxtrb:hover{color:#dc2626} .fxhist{margin-top:10px;font-size:13px}.fxhist summary{cursor:pointer;color:var(--ink3);font-weight:500}.fxhl{padding:4px 0;border-top:1px solid var(--line);color:var(--ink2)} /* v4, owner 10-14: sample photos, feedback card, quick requests */ .fxthumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.fxthumb{appearance:none;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;width:96px;height:96px;background:var(--sink);cursor:zoom-in}.fxthumb img{width:100%;height:100%;object-fit:cover;display:block} .fxrvfb textarea{width:100%;box-sizing:border-box}.fxqr{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0} /* 보내기 전 확인, owner 10-14 */ .askdlg.fxpredlg{width:min(680px,100%)}.fxpre{display:grid;gap:12px;margin:0 0 14px;max-height:min(52vh,460px);overflow:auto}.fxpreb{display:grid;gap:8px;border:1px solid var(--line);border-radius:12px;padding:12px}.fxpreb>b{font-size:14px}.fxpreg{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px 12px}.askdlg .fxprel,.fxprel{display:grid;gap:4px;margin:0}.fxprel span{font-size:12px;color:var(--ink3);font-weight:500;display:flex;gap:6px;align-items:center}.fxprel input{width:100%;box-sizing:border-box}.fxpres{font-style:normal;font-weight:500;font-size:11px;color:var(--brand);background:var(--sink);border-radius:6px;padding:1px 6px}.askrow.fxprerow{flex-wrap:wrap} /* 빠진 정보 메일 쓰기 chips, owner 10-14 */ .fxakl{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 10px}.fxakc{display:inline-grid;gap:2px;text-align:left;border:1px solid var(--line);background:var(--paper);color:var(--ink2);border-radius:10px;padding:7px 11px;cursor:pointer;max-width:100%}.fxakc b{font-size:13px}.fxakc small{font-size:12px;color:var(--ink3);overflow-wrap:anywhere}.fxakc{opacity:.6;transition:opacity var(--mo-state,.18s) var(--mo-ease,ease),border-color var(--mo-state,.18s) var(--mo-ease,ease)}.fxakc b:before{content:"+ ";color:var(--ink3)}.fxakc.on{opacity:1;border-color:var(--ink);background:var(--sink);color:var(--ink)}.fxakc.on b:before{content:"✓ ";color:var(--ink)}.askdlg .fxaks,.fxaks{margin:0 0 8px;font-size:13px;color:var(--ink3)}.askdlg.fxakdlg{width:min(620px,100%)} .trashb{display:inline-flex;align-items:center;gap:5px;margin-left:auto;color:var(--ink3)}.trashb svg{width:14px;height:14px}.trashb.on{color:var(--brand);border-color:var(--brand);font-weight:600} .fxcl{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 10px;font-size:13px}.fxon{color:var(--ink2);min-width:0;overflow-wrap:anywhere} .fxans{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 10px;padding:9px 12px;border-radius:10px;background:var(--mint);font-size:13px}.fxans.more{background:var(--lemon);color:var(--lemon-ink)}.fxans .s{margin-left:auto} .fxpics{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-2px 0 8px}.fxpic{display:inline-flex;gap:2px}.fxpicup{cursor:pointer} .fxits{display:grid;gap:10px;margin:4px 0 12px}.fxit{border:1px solid var(--line);border-radius:12px;padding:10px 12px 4px;background:var(--paper)} .fxith{display:flex;align-items:center;gap:8px;margin-bottom:6px;min-width:0}.fxith b{flex:1;min-width:0;overflow-wrap:anywhere}.fxitb{display:flex;gap:4px;flex:none} .fxitg{grid-template-columns:repeat(2,minmax(0,1fr))}.fxitg .w2{grid-column:1/-1}.fxiadd{justify-self:start} @media (max-width:560px){.fxitg{grid-template-columns:minmax(0,1fr)}} .fxpis{display:grid;gap:8px;margin:8px 0}.fxpi{border:1px solid var(--line);border-radius:10px;padding:8px 10px}.fxpi>b{display:block;margin-bottom:4px} .fxsave{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.fxdirty{font-size:12px;color:var(--pink-d)} .fxown{background:color-mix(in srgb,var(--lemon) 35%,var(--paper))} .fxcust{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-size:13px}.fxcust span{display:grid;min-width:0}.fxcust .s{margin-left:auto} .fxq{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px;font-size:13px}.fxq span{display:grid}.fxq small{font-size:11px;color:var(--ink3)} .fxnote{margin:0 0 10px;padding:8px 10px;background:var(--wash);border-radius:9px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere} .fxm{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;margin:2px 0 10px;font-size:13px}.fxm b{font-size:16px;color:var(--ok)}.fxm b.lo{color:var(--pink-d)} .fxfiles{display:grid;gap:6px}.fxf{display:flex;align-items:center;gap:8px;min-width:0} .fxfn{all:unset;cursor:pointer;flex:1;min-width:0;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fxfn:hover{text-decoration:underline} .fxf small{font-size:12px;color:var(--ink3);white-space:nowrap}.fxe{font-size:13px;padding:4px 0} .fxatt{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}.fxatt small{width:100%;font-size:12px;color:var(--ink3)} .fxup{cursor:pointer} .fxthr{display:grid;gap:8px;max-height:420px;overflow:auto} .fxmsg{max-width:86%;padding:8px 11px;border-radius:12px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--wash);border:1px solid var(--line)} .fxmsg.o{margin-left:auto;background:var(--ink);color:var(--paper);border-color:var(--ink)}.fxmsg small{display:block;font-size:11px;opacity:.7;margin-bottom:2px} .fxms{text-align:center;font-size:12px;color:var(--ink3);white-space:pre-wrap} .fxmin{display:flex;gap:8px;margin-top:10px;align-items:flex-end}.fxmin textarea{flex:1;min-width:0} .fxwait{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding:9px 11px;border-radius:10px;background:var(--pink-s);color:var(--pink-d);font-size:13px}.fxwait span{flex:1;min-width:160px;color:var(--ink);overflow-wrap:anywhere} .fxmore{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;width:100%;margin:0 0 10px;text-align:left}.fxmore small{font-weight:500;color:var(--ink3)} .fxgrid.fxpr{grid-template-columns:minmax(0,1.1fr) 88px minmax(0,1fr)} .fxprev{border-style:dashed}.fxpt{font-weight:600;margin-bottom:8px} .fxdl{display:grid;grid-template-columns:110px minmax(0,1fr);font-size:13px}.fxdl dt,.fxdl dd{padding:5px 0;border-bottom:1px solid var(--line)}.fxdl dt{color:var(--ink3);font-weight:500}.fxdl dd{white-space:pre-wrap;overflow-wrap:anywhere} .fxfrom{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--info) 30%,var(--line))}.fxfrom small{font-weight:500;color:var(--ink3)} #mldet .cn,#mldet .cst{margin:12px 18px 0;width:auto} .iqe .mmatts{margin-top:6px}.iqe .mmimg{width:72px;height:72px}.iqe .hmchips{margin-top:4px}.iqrow2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px;font-size:13px} .iqmore+.iqtrb{margin-left:12px} .iqtrb[disabled]{opacity:.6;cursor:progress} .iqtr{margin-top:6px;padding:8px 10px;border-radius:8px;background:var(--sink);font-size:13px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere} .iqtr small{display:block;font-size:11px;font-weight:500;color:var(--ink3);margin-bottom:2px} /* 번역 v2 (owner 10-10): 번역된 글이 본문 (원래 글과 같은 .iqtx 규칙), 아래 줄 오른쪽에 조용한 번역 표시와 원문 보기. 상자, 색 줄 없음. 기다리는 동안은 원문을 흐리게. 원문으로 볼 때 한 글만 번역하면 가는 선 아래에. 인용된 이전 메일은 점선 아래, 흐린 글자 */ .trctl{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px} .trtag{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;background:var(--sink);color:var(--ink3);font-size:11px;font-weight:500;white-space:nowrap} .trctl>.trtag{margin-left:auto;margin-right:-6px} .trone{flex:1 0 100%;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)} .trone>.trtag{margin-bottom:4px} .iqtx.trwait{color:var(--ink3);animation:trBreath 2.4s ease-in-out infinite;animation-delay:var(--trd,0ms)} .trst{display:inline-flex;align-items:center;gap:6px;height:22px;margin:3px 0;padding:0 10px 0 8px;border-radius:999px;font-size:12px;font-weight:500;color:var(--aic);background:color-mix(in srgb,var(--aic) 10%,transparent);background-image:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--aic) 18%,transparent) 50%,transparent 70%);background-size:220% 100%;background-repeat:no-repeat;animation:trSheen 2.4s linear infinite;animation-delay:var(--trd,0ms)} .trspin{width:10px;height:10px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--aic) 30%,transparent);border-top-color:var(--aic);animation:trSpin .9s linear infinite;flex:none} .trtag.cl{gap:4px;padding:0 8px 0 6px;color:var(--aic);background:color-mix(in srgb,var(--aic) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aic) 22%,transparent)} .iqtx.trin{animation:trIn .5s var(--out) both} /* owner 10-26: the language switch while the API translates: a slow light passes over the chosen option and a count of pieces left */ .iqtrsw.trbusy .segi{background-image:linear-gradient(100deg,transparent 25%,color-mix(in srgb,var(--aic) 26%,transparent) 50%,transparent 75%);background-size:240% 100%;background-repeat:no-repeat;animation:trSheen 2.4s linear infinite,trGlow 2.4s ease-in-out infinite;animation-delay:var(--trd,0ms),var(--trd,0ms)} .iqtrsw.trbusy button.on{color:var(--aic)} .iqtrsw.trbusy::after{content:attr(data-trn);position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:var(--aic);color:#fff;font-size:11px;font-weight:600;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--paper);pointer-events:none;font-variant-numeric:tabular-nums} @keyframes trBreath{0%,100%{opacity:.55}50%{opacity:.9}} @keyframes trSheen{0%{background-position:120% 0}100%{background-position:-120% 0}} @keyframes trGlow{0%,100%{box-shadow:0 1px 3px rgba(0,0,0,.10),0 0 0 1px var(--line)}50%{box-shadow:0 1px 3px rgba(0,0,0,.10),0 0 0 1px color-mix(in srgb,var(--aic) 55%,transparent),0 0 12px color-mix(in srgb,var(--aic) 30%,transparent)}} @keyframes trSpin{to{transform:rotate(360deg)}} @keyframes trIn{from{opacity:0;filter:blur(3px);transform:translateY(3px)}to{opacity:1;filter:none;transform:none}} @media (prefers-reduced-motion:reduce){.iqtx.trwait,.trx.busy,.trst,.trspin,.iqtx.trin,.iqtrsw.trbusy .segi{animation:none!important}.iqtx.trwait{opacity:.7}} .iqmore.trsw{color:var(--ink2);font-weight:500} .iqmore.trerr{color:var(--warn)} .trx.busy{color:var(--ink3);animation:trBreath 2.4s ease-in-out infinite;animation-delay:var(--trd,0ms)} .trx.err{text-decoration:underline dotted var(--warn);text-underline-offset:3px} .iqmore.trq{display:block} .trold{margin-top:6px;padding-top:8px;border-top:1px dashed var(--line)} .trold .iqtx{color:var(--ink2)} .trsum{align-self:center;white-space:nowrap;color:var(--ink3)} .trsum:empty{display:none} button.trsum{border:0;background:none;padding:4px 6px;cursor:pointer;color:var(--warn);font-weight:500;font-size:12px} .iqct{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);min-width:0;margin:0 0 2px} .iqct>li{padding:6px 0;min-width:0;overflow-wrap:anywhere} .iqct>li:first-child{padding-top:0} .iqct>li+li{border-top:1px solid var(--line)} .iqct>li>small{display:block;font-size:11px;font-weight:600;color:var(--ink3);margin-bottom:1px} .iqct>li.f-user>small{color:var(--info)}.iqct>li.f-bot>small{color:var(--aic)} #iqdet .iqcard .lq{border:1px solid var(--line);border-radius:10px} .mmb.trwait,.mmc span.trwait{color:var(--ink3)} #mldet .mdh>.iqtrsw{flex:none} @media (max-width:760px){#iqdet .lddh .h>.trsum,#mldet .mdh>.trsum{order:12}#mldet .mdh{flex-wrap:wrap;row-gap:8px}#mldet .mdh>.w{flex:1 1 calc(100% - 110px)}#mldet .mdh>.iqtrsw{order:11}} .iqact{position:sticky;bottom:0;z-index:2;background:var(--paper);border-top:1px solid var(--line);padding:10px 16px;padding-bottom:max(10px,env(safe-area-inset-bottom))} .iqbtns{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .iqbtns .p,.iqbtns .s{padding:7px 12px;font-size:13px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;height:34px} .iqbtns .ico{width:34px;padding:0;justify-content:center;margin-left:auto} .iqbtns .iqtrash{margin-left:auto} .iqbtns .iqtrash+.ico{margin-left:0} .iqbtns .iqtrash:hover{color:var(--warn);border-color:var(--warn)} .iqbtns select{width:auto;max-width:190px;height:34px;padding:0 8px;font-size:13px} .iqpickm{display:none} .iqform2{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:10px;min-width:0} .iqform2 p{font-size:12px} .iqform2 textarea{font-family:inherit;font-size:13px;line-height:1.6;min-height:96px} .iqform2 .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .iqform2 .row .s,.iqform2 .row .p{padding:7px 12px;font-size:13px;text-decoration:none} @media (max-width:999px){ #t-inq.ldopen .lddet{display:flex;flex-direction:column;position:fixed;inset:0;z-index:55;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);animation:roomIn .28s var(--out);-webkit-overflow-scrolling:touch} } @media (min-width:1000px){ main:has(> #t-inq:not([hidden])){padding-bottom:16px} #iqdet{display:flex;flex-direction:column} } @media (max-width:760px){ #iqstat{display:none} .iqtools{flex-wrap:nowrap} .iqtools input[type=search]{flex:1 1 auto} #iqf{flex:0 0 40%;max-width:none;height:40px;font-size:14px} #iqch,#iqmk,#iqsort{flex:1 1 28%;max-width:none;height:40px;font-size:14px} .iqr{padding:9px 12px;gap:10px} .iqsd{font-size:0;gap:0} .iqml{max-width:96px;overflow:hidden;text-overflow:ellipsis} .iqbody{padding:2px 14px 18px} .iqwho{grid-template-columns:1fr} .iqform2 textarea{font-size:16px} .iqbtns{flex-wrap:nowrap} .iqbtns .iqpick{display:none} .iqpickm{display:flex;margin-bottom:8px} .iqpickm select{width:100%;height:40px;font-size:16px} .iqbtns .p{flex:0 0 auto;justify-content:center;height:40px;padding:0 12px} .iqbtns .s{height:40px} .iqbtns .ico{width:40px;margin-left:0} .iqbtns select{flex:1 1 0;min-width:0;max-width:none;height:40px;font-size:16px} } /* ---- 로그인 화면: 로그인 전에만 카드를 보이는 화면 한가운데에 (좌우 14px 여백, 노치와 홈 막대를 피해서) ---- */ body:has(> #login:not(.hide)){min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom))} body:has(> #login:not(.hide)) #login{margin:0;width:min(360px,100%);max-width:none} /* 이 기기에서 자동 로그인 (owner 10-12): while the saved device secret opens the session, a skeleton card instead of the PIN pad */ #autoin{max-width:360px;margin:14vh auto 0;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 22px 18px} #autoin .uisk{padding:6px 0 0} #autoin .autoin-t{margin:12px 0 0;font-size:13px;color:var(--ink3);text-align:center} body:has(> #autoin:not(.hide)){min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))} body:has(> #autoin:not(.hide)) #autoin{margin:0;width:min(360px,100%);max-width:none} /* 마우스가 없는 기기: 목록 줄의 숨은 버튼(이름 바꾸기, 안 읽음, 휴지통)이 탭을 가로채지 않게. 같은 일은 대화의 더보기 메뉴에 있습니다 */ @media (hover:none){ .ri .acts{display:none} } /* ---- 폰 (760px 이하): 누르는 곳 44px 이상, 입력칸 16px(iOS 확대 방지), 줄은 가로 스크롤, 메뉴는 아래 시트 ---- */ @media (max-width:760px){ input[type=text],input[type=password],input[type=number],input[type=search],input[type=time],input[type=email],select,textarea, .tools2 input[type=search],.ldtools input[type=search],.kbtop input[type=search],#login .pwrap input,#rvta{font-size:16px} input[type=text],input[type=password],input[type=number],input[type=search],input[type=time],select{min-height:44px} .s,.p,.lbt,.lbt.sm,.ldx,.lbtns .s,.ldf select,.ldf .s,.ldfbtn,.lddx .acts .s,.lddx .acts .p,.lsame button,.vlist button,.ldempty .s{min-height:44px} .lbt,.lbt.sm{height:auto;padding:0 12px} #login .p{height:48px} #login .eye{width:44px;height:44px;right:2px} /* 헤더 */ .hin .lsw{padding:0} .hin .lsw button{min-height:44px;min-width:44px;padding:0 11px;font-size:12px} .hin .me{padding:0 0 0 11px} .hin .me button{min-height:44px;padding:0 13px;font-size:12px} #login .lsw button{min-height:44px;min-width:44px;font-size:12px} input[type=range]{min-height:44px} .sw{min-height:44px} .sw input[type=checkbox]{width:22px;height:22px;transform:none} .pre1 .pb button{width:44px;height:44px} /* 메뉴와 목록 탭 */ .nin button{min-height:44px} .seg.main button{min-height:44px} .seg.sub{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:0 14px;padding-bottom:0} .seg.sub::-webkit-scrollbar{display:none} .seg.sub button{flex:none;min-height:44px;min-width:44px;padding:0 1px} .tools2 button,.tools2 input[type=search]{min-height:44px} .tools2 button{min-width:44px} .tools2 button.ico{width:44px;height:44px;flex:none} .selbar button,.selbar .chk{min-height:44px} /* 대화 화면: 뒤로 가기, 즐겨찾기, 상태, 더보기, 고객 정보(아이콘) */ .rvback{width:44px;height:44px} .rvh .acts button,.rvh .acts .stc{min-height:44px;min-width:44px;justify-content:center} .rvh .acts .star{padding:0} #bpro{font-size:0;width:44px;padding:0;display:inline-flex;align-items:center;justify-content:center} #bpro::before{content:"i";display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border:1.8px solid currentColor;border-radius:50%;font-size:12px;font-weight:600;line-height:1} .isscard .ish button{min-height:44px} .cmt button{min-height:44px;padding:0 12px} .tpl button{min-height:44px;padding:0 13px} .tpl .tlb{align-self:center} #bsend{min-height:44px;min-width:64px} #btrans{min-height:44px;padding:0 12px;font-size:13px} #rvta{min-height:44px} /* 고객 정보 시트 */ .pclose{width:44px;height:44px} .proh .lnk button{min-height:44px;min-width:44px} .pgh{min-height:44px} .qtg button,.tgadd,.tgs .tg button{min-height:44px;min-width:44px;padding:0 12px} .pcp{min-height:44px;min-width:44px;padding:0 10px} /* 설정·지식베이스 */ .kbh{min-height:44px} .seg3 button{min-height:44px} .themes button{min-height:44px} .days label{min-height:44px;display:inline-flex;align-items:center} /* 상담 요청·방문자 도구 줄 */ .ldact .ico{width:44px;height:44px} .ldx{width:44px;height:44px} #vsmin{min-height:44px;font-size:16px} /* 메뉴(상태, 더보기, 필터)는 화면 아래에서 올라오는 시트 */ .menu{position:fixed!important;left:8px!important;right:8px!important;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;z-index:70;min-width:0;max-height:70vh;overflow-y:auto;border-radius:16px;padding:6px;animation:sheetUp .22s var(--out)} /* 대화 헤더는 이름이 보이게: 아바타와 즐겨찾기(더보기 메뉴에도 있음)는 폰에서 뺍니다 */ .rvh .em,#bstar{display:none!important} .menu button{min-height:44px;font-size:14px;padding:0 12px} } @keyframes sheetUp{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}} /* 폰: 대화 화면을 보이는 영역 높이에 맞춰 키보드가 올라와도 작성창이 가려지지 않게 (--vvh, --vvt 는 visualViewport 로 맞춥니다) */ @media (max-width:760px){ .live.room .rv{inset:auto;top:var(--vvt,0px);left:0;right:0;height:var(--vvh,100dvh)} } /* 분석 탭: 사이트 분석 화면을 #anhost 의 그림자 DOM 안에 그립니다 (안쪽 모양은 스크립트의 ANA_CSS). 폰에서 방문 상세를 열면 뒤 화면을 고정합니다 */ #anhost{display:block} #t-ana .ldempty .mono{font-size:12px;color:var(--ink2)} @media (max-width:1179px){ body.adm-lock{overflow:hidden} } /* 공장용 정리 (대표 전용): 모든 문의를 공장에 보여 줄 한국어 카드로. 인쇄하면 이 문서만 A4 로 나옵니다 (body.fbon 일 때만) */ .fbbtn{display:inline-flex;align-items:center;gap:6px;font-weight:500} .fbbtn[hidden]{display:none} .fbbtn svg{flex:none;color:var(--ink3)} .mbox.fbbox{max-width:860px;padding:0;display:flex;flex-direction:column;overflow:hidden} .fbbar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--paper)} .fbhd{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:8px} .fbhd b{font-size:15px;font-weight:500;white-space:nowrap} .fbtools{display:flex;gap:6px;flex-wrap:wrap;align-items:center} #btrall.on{background:#e8f0fd;border-color:#a9c4f2;color:#1d4fa3} .mlfilt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1 1 100%;margin-top:8px} .mlfilt #mlrefresh{margin-left:auto} .mlsel{flex:0 0 auto;max-width:150px;height:34px;border:1px solid var(--line);border-radius:10px;padding:0 6px;font:inherit;font-size:13px;background:var(--paper);color:inherit} .mlq{flex:1 1 200px;max-width:320px;min-width:150px;height:34px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-size:13px;background:var(--paper);color:inherit} .fbmode{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.fbmode button{border:0;background:transparent;padding:6px 11px;font-size:13px;font-weight:500;color:var(--ink2);cursor:pointer}.fbmode button.on{background:var(--ink,#111);color:#fff} .frtog{flex:none;align-self:flex-start;border:1px solid var(--line);background:var(--paper);color:var(--ink2);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;margin-right:6px}.frtog.on{background:#e8f5ec;border-color:#9fd3b0;color:#1d6b3a} .frchip{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border-radius:99px;background:#e8f5ec;color:#1d6b3a;margin-left:6px;vertical-align:1px} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ic.c-quote{background:rgba(240,106,151,.15);color:#F59BBB;border-color:rgba(240,106,151,.35)}:root:not([data-theme="light"]) .ic.c-pricing{background:rgba(253,186,116,.15);color:#FDBA74;border-color:rgba(253,186,116,.35)}:root:not([data-theme="light"]) .ic.c-moq{background:rgba(147,180,255,.15);color:#9DB9FF;border-color:rgba(147,180,255,.35)}:root:not([data-theme="light"]) .ic.c-samples{background:rgba(134,239,172,.15);color:#86EFAC;border-color:rgba(134,239,172,.35)}:root:not([data-theme="light"]) .ic.c-formula{background:rgba(196,165,255,.15);color:#C9AEFF;border-color:rgba(196,165,255,.35)}:root:not([data-theme="light"]) .ic.c-packaging{background:rgba(253,230,138,.15);color:#FDE68A;border-color:rgba(253,230,138,.35)}:root:not([data-theme="light"]) .ic.c-certification{background:rgba(94,234,212,.15);color:#5EEAD4;border-color:rgba(94,234,212,.35)}:root:not([data-theme="light"]) .ic.c-shipping{background:rgba(125,211,252,.15);color:#7DD3FC;border-color:rgba(125,211,252,.35)}:root:not([data-theme="light"]) .ic.c-payment{background:rgba(203,213,225,.15);color:#CBD5E1;border-color:rgba(203,213,225,.35)}:root:not([data-theme="light"]) .ic.c-visit_or_tour{background:rgba(252,165,165,.15);color:#FCA5A5;border-color:rgba(252,165,165,.35)}:root:not([data-theme="light"]) .frchip{background:rgba(134,239,172,.15);color:#86EFAC;border-color:rgba(134,239,172,.35)}:root:not([data-theme="light"]) .frtog.on{background:rgba(134,239,172,.15);color:#86EFAC;border-color:rgba(134,239,172,.35)}} :root[data-theme="dark"] .ic.c-quote{background:rgba(240,106,151,.15);color:#F59BBB;border-color:rgba(240,106,151,.35)}:root[data-theme="dark"] .ic.c-pricing{background:rgba(253,186,116,.15);color:#FDBA74;border-color:rgba(253,186,116,.35)}:root[data-theme="dark"] .ic.c-moq{background:rgba(147,180,255,.15);color:#9DB9FF;border-color:rgba(147,180,255,.35)}:root[data-theme="dark"] .ic.c-samples{background:rgba(134,239,172,.15);color:#86EFAC;border-color:rgba(134,239,172,.35)}:root[data-theme="dark"] .ic.c-formula{background:rgba(196,165,255,.15);color:#C9AEFF;border-color:rgba(196,165,255,.35)}:root[data-theme="dark"] .ic.c-packaging{background:rgba(253,230,138,.15);color:#FDE68A;border-color:rgba(253,230,138,.35)}:root[data-theme="dark"] .ic.c-certification{background:rgba(94,234,212,.15);color:#5EEAD4;border-color:rgba(94,234,212,.35)}:root[data-theme="dark"] .ic.c-shipping{background:rgba(125,211,252,.15);color:#7DD3FC;border-color:rgba(125,211,252,.35)}:root[data-theme="dark"] .ic.c-payment{background:rgba(203,213,225,.15);color:#CBD5E1;border-color:rgba(203,213,225,.35)}:root[data-theme="dark"] .ic.c-visit_or_tour{background:rgba(252,165,165,.15);color:#FCA5A5;border-color:rgba(252,165,165,.35)}:root[data-theme="dark"] .frchip{background:rgba(134,239,172,.15);color:#86EFAC;border-color:rgba(134,239,172,.35)}:root[data-theme="dark"] .frtog.on{background:rgba(134,239,172,.15);color:#86EFAC;border-color:rgba(134,239,172,.35)} .fbtools select{width:auto;padding:7px 9px;font-size:13px} .fbtools .s,.fbtools .p{padding:7px 11px;font-size:13px} .fbtools .p:disabled,.fbtools .s:disabled{opacity:.45;cursor:default} .fbscroll{flex:1;min-height:0;overflow:auto;padding:12px 16px 22px;background:var(--wash)} .fbprog{font-size:13px;color:var(--ink2);margin-bottom:10px;display:flex;flex-direction:column;gap:6px} .fbprog .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .fbprog .row .s{padding:4px 10px;font-size:12px} .fbprog .bar{height:4px;background:var(--sink);border-radius:99px;overflow:hidden} .fbprog .bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:99px} .fbprog .bar.ind i{width:30%;animation:fbind 1.1s ease-in-out infinite alternate} @keyframes fbind{from{transform:translateX(-10%)}to{transform:translateX(250%)}} .fbprog.err{color:var(--warn)} .fbprog .warn{color:var(--warn)} .fbnote{font-size:12px;color:var(--ink2);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:10px;line-height:1.55} .fbnote p+p{margin-top:4px} .fbnote .warn{color:var(--warn)} .fbnote details summary{cursor:pointer;color:var(--ink2);font-weight:500;margin-top:4px} .fbnote details ul{margin:4px 0 0;padding-left:18px;list-style:disc} .fbdoc{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 24px;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere;line-height:1.6} .fbdoc h1{font-size:18px;font-weight:600;letter-spacing:0;line-height:1.35} .fbdoc .fbsub{color:var(--ink3);font-size:12px;margin:3px 0 12px} .fbdoc .fbempty{color:var(--ink3);font-size:13px;padding:18px 0} .fbl{list-style:none;padding:0;margin:0} .fbc{padding:14px 0 16px;border-top:1px solid var(--line)} .fbc h2{font-size:15px;font-weight:600;letter-spacing:0;line-height:1.45} .fbc h2 .co{font-weight:500;color:var(--ink2)} .fbc .when{font-size:11px;color:var(--ink3);margin:1px 0 7px} .fbc .who{font-size:13px;color:var(--ink2);margin:-3px 0 8px;overflow-wrap:anywhere} .fbs{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;font-size:13px;margin:4px 0} .fbs dt{color:var(--ink3);font-weight:500;white-space:nowrap} .fbs dd{margin:0} .fbc h3{font-size:12px;font-weight:600;color:var(--ink2);margin:10px 0 3px} /* factory brief v2 layout (owner 10-05) */ .fbcover{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:3px solid #15171a;padding-bottom:10px;margin-bottom:12px} .fbbrand{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#d81b60} .fbsum{width:100%;border-collapse:collapse;font-size:13px;margin:0 0 16px} .fbsum th{text-align:left;font-size:11px;color:var(--ink3);font-weight:500;border-bottom:1px solid var(--line);padding:5px 8px} .fbsum td{border-bottom:1px solid var(--line);padding:6px 8px;vertical-align:top} .fbsum td:first-child,.fbsum th:first-child{width:28px;color:var(--ink3);font-weight:600} .fbsum tbody tr:nth-child(odd) td{background:color-mix(in srgb,var(--sink) 55%,transparent)} .fbl .fbc{border:1px solid var(--line);border-radius:14px;padding:0;margin:0 0 14px;overflow:hidden} .fbh{display:flex;align-items:center;gap:12px;padding:11px 14px;background:color-mix(in srgb,var(--sink) 70%,transparent);border-bottom:1px solid var(--line)} .fbn{flex:none;width:28px;height:28px;border-radius:50%;background:#15171a;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600} .fbt{flex:1;min-width:0} .fbt h2{margin:0} .fbt .when{margin:1px 0 0} .fbq{flex:none;text-align:right;line-height:1.15} .fbq small{display:block;font-size:11px;color:var(--ink3);font-weight:600} .fbq b{font-size:18px;font-weight:600;color:#d81b60} .fbq{max-width:38%} .fbql{margin-top:4px;font-size:13px;font-weight:600;color:#d81b60;line-height:1.4} .fbql small{font-size:11px;color:var(--ink3);font-weight:600} .fbinc{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--ink2);cursor:pointer;white-space:nowrap} .fbpri{flex:none;align-self:flex-start;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap;margin-right:6px}.fbpri.high{background:#fde7ef;color:#a3134a}.fbpri.mid{background:#eef0f3;color:#454b55}.fbpri.low{background:#f4f4f5;color:#8b8f97} .fbl .fbc.skip{opacity:.45} .fbl .fbc.skip .fbm,.fbl .fbc.skip .fbcols,.fbl .fbc.skip .fbask,.fbl .fbc.skip>.nt{display:none} .fbm{display:flex;gap:14px;padding:12px 14px 4px;align-items:flex-start} .fbimg{flex:none;width:76px;height:76px;border-radius:10px;object-fit:cover;background:var(--sink)} .fbimg0{display:grid;place-items:center;color:var(--ink3)} .fbmain{flex:1;min-width:0} .fbc .fbm .who{margin:0 0 6px} .fbc .who b{font-size:11px;color:var(--ink3);margin-right:4px} .fbcols{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 14px 6px} .fbcols.one{grid-template-columns:1fr} .fbcol h3,.fbask h3{margin-top:4px} .fbcol.q{background:color-mix(in srgb,var(--info) 7%,transparent);border-radius:10px;padding:2px 10px 6px} .fbask{margin:4px 14px 12px;padding:6px 12px 8px;border-radius:10px;background:color-mix(in srgb,#d81b60 7%,transparent)} .fbask h3::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#d81b60;margin-right:7px;vertical-align:1px} .fbc>.nt{padding:0 14px 12px} .fbl .fbc.wait,.fbl .fbc.fail{padding:12px 14px} .fbc ul{margin:0;padding-left:19px;font-size:13px;list-style:disc outside} .fbc ol{margin:0;padding-left:21px;font-size:13px;list-style:decimal outside} .fbc li{margin:1px 0} .fbc .nt{font-size:13px;color:var(--ink2);margin-top:8px} .fbc .sk{height:9px;border-radius:5px;background:var(--sink);margin:8px 0;animation:fbsk 1.1s ease-in-out infinite alternate} @keyframes fbsk{from{opacity:.4}to{opacity:1}} .fbc.wait h2,.fbc.fail h2{color:var(--ink3);font-weight:500} .fbc.fail h2{color:var(--warn)} .fbc.fail .s{margin-top:6px;padding:5px 10px;font-size:12px} @media (max-width:760px){ .fbbar{padding:11px 12px} .fbtools{width:100%} .fbtools select{flex:1 1 auto} .fbscroll{padding:10px 10px 18px} .fbdoc{padding:16px 14px;border-radius:12px} .fbs{gap:3px 10px} } @media print{ @page{size:A4;margin:0} body.fbon>*:not(#fbmodal){display:none!important} body.fbon{background:#fff!important} body.fbon #fbmodal{position:static;inset:auto;display:block;padding:0;background:none;animation:none} body.fbon .fbbox{display:block;max-width:none;max-height:none;border:0;border-radius:0;box-shadow:none;overflow:visible;animation:none} body.fbon .fbbar,body.fbon .fbprog,body.fbon .fbnote,body.fbon .fbc.wait,body.fbon .fbc.fail{display:none!important} body.fbon .fbscroll{overflow:visible;padding:0;background:none} body.fbon .fbdoc{border:0;border-radius:0;padding:12mm 12mm 10mm;background:#fff;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact} body.fbon .fbl .fbc{break-inside:auto;page-break-inside:auto;border-color:#ddd;margin-bottom:5mm} body.fbon .fbl .fbc.skip,body.fbon .fbinc,body.fbon .frtog{display:none!important} body.fbon .fbh{break-after:avoid;page-break-after:avoid;break-inside:avoid} body.fbon .fbm,body.fbon .fbcol,body.fbon .fbask{break-inside:avoid;page-break-inside:avoid} body.fbon .fbh{background:#f3f2ef!important;border-bottom-color:#ddd} body.fbon .fbsum{font-size:9pt;margin-bottom:6mm} body.fbon .fbsum td,body.fbon .fbsum th{border-bottom-color:#ddd;color:#000} body.fbon .fbsum tbody tr:nth-child(odd) td{background:#f6f5f2!important} body.fbon .fbcol.q{background:#eef3fb!important} body.fbon .fbask{background:#fdf0f5!important} body.fbon .fbimg{width:22mm;height:22mm} body.fbon .fbdoc h1,body.fbon .fbc h2,body.fbon .fbs dd,body.fbon .fbc li{color:#000} body.fbon .fbc h2 .co,body.fbon .fbc h3,body.fbon .fbc .nt{color:#333} body.fbon .fbdoc .fbsub,body.fbon .fbc .when,body.fbon .fbs dt{color:#666} body.fbon .fbc.wait,body.fbon .fbc.fail{display:none} body.fbon .fbdoc{font-size:10pt;line-height:1.45} body.fbon .fbdoc h1{font-size:14pt} body.fbon .fbdoc .fbsub{font-size:8.5pt;margin:2px 0 6px} body.fbon .fbc h2{font-size:11pt} body.fbon .fbc .when{font-size:8pt;margin:0 0 3px} body.fbon .fbc .who{font-size:8.5pt;color:#333;margin:0 0 4px} body.fbon .fbs,body.fbon .fbc ul,body.fbon .fbc ol,body.fbon .fbc .nt{font-size:9.5pt} body.fbon .fbs{gap:1px 12px;margin:2px 0} body.fbon .fbc h3{font-size:9pt;margin:5px 0 1px} body.fbon .fbc li{margin:0} } /* ---------- 잠금 암호 화면 (아이폰 잠금 화면처럼, 숫자 4자리) ---------- */ #pin{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;color:var(--pin-fg);background:var(--pin-bg);padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} #pin::before{content:"";position:absolute;inset:-20%;background:radial-gradient(40% 30% at 30% 30%,var(--pin-a1),transparent 70%),radial-gradient(45% 35% at 70% 65%,var(--pin-a2),transparent 70%);pointer-events:none;animation:pinaur 14s ease-in-out infinite alternate} @keyframes pinaur{to{transform:translate3d(4%,-3%,0) scale(1.06)}} .pin-in{position:relative;width:min(320px,100%);display:flex;flex-direction:column;align-items:center;animation:pinin .5s var(--out) backwards} @keyframes pinin{from{opacity:0;transform:translateY(14px) scale(.98)}} .pin-lock{width:30px;height:30px;margin-bottom:12px} .pin-lock svg{width:100%;height:100%;overflow:visible} .pin-lock .shk{fill:none;stroke:var(--pin-fg);stroke-width:2;stroke-linecap:round;transform-box:view-box;transform-origin:16px 11px;transition:transform .5s cubic-bezier(.2,.8,.2,1)} .pin-lock .bdy{fill:var(--pin-fg)} #pin.open .pin-lock .shk{transform:translateY(-3.5px) rotate(-30deg)} #pin.open .pin-lock{animation:lockpop .5s var(--out)} @keyframes lockpop{40%{transform:scale(1.16)}} .pin-who{font-size:13px;color:var(--pin-fg2);margin-bottom:4px;min-height:18px;text-align:center} #pin h2{font-size:20px;font-weight:500;letter-spacing:-.2px;margin:0 0 20px;color:var(--pin-fg);text-align:center} .pin-dots{display:flex;gap:18px;height:18px;align-items:center} .pin-dots i{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--pin-ring);transition:background .12s} .pin-dots i.on{background:var(--pin-fg);animation:dotin .24s var(--out)} @keyframes dotin{0%{transform:scale(.55)}60%{transform:scale(1.2)}100%{transform:scale(1)}} .pin-dots.bad{animation:pinshake .5s cubic-bezier(.36,.07,.19,.97)} @keyframes pinshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-10px)}40%,60%{transform:translateX(10px)}} .pin-dots.good i{background:var(--pin-fg);animation:dotwave .55s var(--out) backwards} .pin-dots.good i:nth-child(2){animation-delay:.05s}.pin-dots.good i:nth-child(3){animation-delay:.1s}.pin-dots.good i:nth-child(4){animation-delay:.15s}.pin-dots.good i:nth-child(5){animation-delay:.2s}.pin-dots.good i:nth-child(6){animation-delay:.25s} @keyframes dotwave{0%{transform:scale(1)}45%{transform:scale(1.5);box-shadow:0 0 16px 2px rgba(255,255,255,.85)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,0)}} .pin-msg{min-height:38px;font-size:13px;line-height:1.45;color:var(--pin-fg3);margin:10px 0 14px;text-align:center;max-width:280px} .pin-pad{display:grid;grid-template-columns:repeat(3,78px);gap:16px 26px;justify-content:center} .pin-pad button{width:78px;height:78px;border-radius:50%;border:0;padding:0;background:var(--pin-key);color:var(--pin-fg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:background .45s ease,opacity .3s;font:inherit;touch-action:manipulation} .pin-pad button b{font-size:34px;font-weight:300;line-height:1} .pin-pad button small{font-size:11px;font-weight:500;letter-spacing:.22em;margin-top:3px;opacity:.85;min-height:11px} .pin-pad button.dn{background:var(--pin-keydn);transition:none} .pin-pad button.gh{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:15px;font-weight:500} .pin-pad button.gh.dn{background:none;opacity:.45} .pin-pad button:focus-visible{outline:2px solid var(--pin-ring);outline-offset:2px} .pin-pad .sp{visibility:hidden} .pin-alt{margin-top:24px;background:none;border:0;color:var(--pin-fg3);font:inherit;font-size:14px;cursor:pointer;padding:10px 14px;border-radius:10px} .pin-alt:hover{color:var(--pin-fg)} #pin.locked .pin-pad button:not(.gh){opacity:.3;pointer-events:none} #pin.out{animation:pinfade .6s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none} #pin.out .pin-in{animation:pinzoom .6s cubic-bezier(.4,0,.2,1) forwards} @keyframes pinfade{to{opacity:0}} @keyframes pinzoom{to{transform:scale(1.14);opacity:0;filter:blur(6px)}} #login .pinback{display:block;width:100%;margin-top:10px;background:none;border:0;color:var(--ink2);font:inherit;font-size:13px;cursor:pointer;padding:8px} #login .pinback:hover{color:var(--ink)} #login .pinback[hidden]{display:none} /* login v2 (owner 10-10, src/auth.js): the email and code steps of the login card, the PIN help line, 설정 > 팀 계정 and 보안 기록 */ #login .lstep[hidden]{display:none} #lemail,#tma_mail,#tmme_mail{width:100%;padding:9px 11px;background:var(--paper);border:1px solid var(--line);border-radius:9px;outline:0;color:inherit;font:inherit} #login .lstep input{height:44px;font-size:15px} #login .lstep input.bad{border-color:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 18%,transparent)} #login .lcodein{letter-spacing:.42em;font-size:22px;text-align:center;font-variant-numeric:tabular-nums} #login .lnote{margin-top:12px;font-size:12px;color:var(--ink3);line-height:1.5;text-align:center} #login .lerr2{color:var(--warn);font-size:13px;font-weight:500;line-height:1.45;min-height:20px;margin-top:8px} #login .lerr2.ok{color:var(--ink2);font-weight:500} #login .lrow{display:flex;justify-content:space-between;gap:8px;margin-top:6px} #login .lrow button{background:none;border:0;color:var(--ink2);font:inherit;font-size:13px;cursor:pointer;padding:8px 2px;min-height:40px} #login .lrow button:hover{color:var(--ink)} #login .lrow button[disabled]{opacity:.55;cursor:default} .pin-help{max-width:290px;text-align:center;font-size:13px;line-height:1.55;color:var(--pin-fg2);margin-top:2px} .pin-help[hidden]{display:none} body.pinask .askov{z-index:10001} .pin-help button{display:block;margin:8px auto 0;background:none;border:0;color:var(--pin-fg);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 12px;min-height:40px} .tmbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px} .tmbar[hidden]{display:none} .tmbar button{height:32px;padding:0 12px;border-radius:99px;border:1px solid var(--line);background:var(--paper);color:var(--ink2);font:inherit;font-size:13px;font-weight:500;cursor:pointer} .tmbar button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)} .tmbar button b{font-weight:500;opacity:.65;margin-left:4px} .tmlist{display:grid;gap:8px} .tmrow{background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0} .tmhd{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;min-width:0} .tmhd b{font-size:14px} .tmmail{color:var(--ink2);font-size:13px;overflow-wrap:anywhere;min-width:0} .tmchip{display:inline-flex;align-items:center;height:22px;font-size:12px;font-weight:500;padding:0 8px;border-radius:99px;background:var(--sink);color:var(--ink2);white-space:nowrap} .tmchip.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)} .tmchip.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)} .tmchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px} .tmnote{margin-top:6px;font-size:13px;line-height:1.5;color:var(--ink3)} .tmdevs{margin-top:8px;display:grid;gap:4px} .tmdev{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);min-width:0} .tmdev span{flex:1;min-width:0;overflow-wrap:anywhere} .tmdev .s{height:28px;padding:0 10px;font-size:12px;flex:none} .tmacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .tmacts .s,.tmacts .p{height:32px;font-size:13px;padding:0 11px} .tmacts code{align-self:center} .tmban{border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.5;margin-bottom:10px;background:color-mix(in srgb,var(--warn) 9%,var(--paper));border:1px solid color-mix(in srgb,var(--warn) 28%,transparent)} .tmban.info{background:var(--wash);border-color:var(--line)} .tmadd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,.9fr) auto;gap:8px;align-items:end;margin-top:14px} .tmadd .p{height:40px} .tmhint{margin:10px 0 0;font-size:12px;line-height:1.55} .tmwork{margin:-6px 0 12px;font-size:13px;line-height:1.55} #tmcard.tmro .tmacts,#tmcard.tmro .tmadd,#tmcard.tmro .tmdev .s,#tmcard.tmro .tmhint,#tmcard.tmro #tmoutall{display:none} #tmoutall{height:30px;font-size:12px;padding:0 10px} /* owner 10-11: staff see no delete, trash or export controls (permUi sets the body classes; the server refuses them anyway) */ body.nodel [data-trash],body.nodel [data-iqtrash],body.nodel [data-fxdel],body.nodel [data-fxfdel],body.nodel #emptytrash,body.nodel #kbreset{display:none!important} body.noexp #csv,body.noexp #leadcsv,body.noexp #iqcsv,body.noexp #iqcsvrow,body.noexp #selCsv{display:none!important} .tmlim{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end} .tmlim label{display:flex;flex-direction:column;gap:4px;margin:0;font-size:12px;color:var(--ink2)} .tmlim input[type=number]{width:96px} .tmlim .tmchk{flex-direction:row;align-items:center;gap:6px;height:40px} .tmlim .tmchk input{width:auto} .seca select{min-width:150px;height:34px} .secrow .sk{display:inline-block;margin-right:6px;font-size:11px;font-weight:600;padding:1px 6px;border-radius:99px;background:var(--sink);color:var(--ink2)} .secrow .sk.bad{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)} #tmme_mail[readonly]{background:var(--wash);color:var(--ink2);cursor:default} .tmsl{display:flex;flex-wrap:wrap;gap:8px} .tmsl label{display:flex;flex-direction:column;gap:4px;margin:0;font-size:12px;color:var(--ink2)} .tmsl select{min-width:120px} .seclist{display:grid;gap:2px;margin-top:4px} .secrow{display:grid;grid-template-columns:86px minmax(0,1fr);gap:2px 10px;padding:8px 2px;border-top:1px solid var(--line);font-size:13px;line-height:1.45} .secrow:first-child{border-top:0} .secrow time{color:var(--ink3);font-variant-numeric:tabular-nums} .secrow b{font-weight:600} .secrow.bad b{color:var(--warn)} .secrow small{display:block;color:var(--ink3);font-size:12px;overflow-wrap:anywhere} @media (max-width:760px){.tmadd{grid-template-columns:1fr}.tmadd .p{width:100%;height:44px}.tmacts .s,.tmacts .p{height:40px}.tmdev .s{height:36px}.secrow{grid-template-columns:1fr}.tmbar button{height:36px}} @media (max-height:680px){.pin-pad{grid-template-columns:repeat(3,68px);gap:12px 22px}.pin-pad button{width:68px;height:68px}.pin-pad button b{font-size:30px}#pin h2{margin-bottom:14px}} @media (prefers-reduced-motion:reduce){#pin::before,.pin-in,.pin-dots i.on,.pin-dots.good i,.pin-dots.bad,#pin.open .pin-lock,#pin.out,#pin.out .pin-in{animation:none!important}.pin-lock .shk{transition:none}} /* ---- KoreanOEM Dashboard look, owner 10-05: koreanoem.com/admin colors, light top bar, pill menu, the 대시보드 home and 사이트 tab ---- */ body{font-family:"Plus Jakarta Sans","IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic","Segoe UI",system-ui,sans-serif} header{background:color-mix(in srgb,var(--wash) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);border-bottom:1px solid var(--line);padding:0 20px} .hin{height:58px;gap:12px} .hin .lg{background:none;color:var(--pink);width:26px;height:26px;border-radius:8px} .hin .lg svg{width:22px;height:22px} .hin b{font-size:16px;font-weight:600;letter-spacing:0} .cpill{flex:none;font-size:12px;font-weight:600;color:var(--ink2);padding:3px 9px;border-radius:999px;background:var(--soft);white-space:nowrap} .hin select{background:var(--soft);color:var(--ink)} .hin .st{color:var(--ink2);font-weight:500;font-size:12px} .hin .st i{background:var(--ok)} .hin .st i.off{background:var(--ink3)} .hin .mdl{color:var(--ink3);opacity:1} .hin .me{background:var(--soft);color:var(--ink2);font-weight:500} .hin .me button{background:var(--paper);color:var(--ink);opacity:1;font-weight:500} .hin .me button:hover{background:var(--paper);color:var(--pink)} .hin .lsw{background:var(--soft);color:var(--ink2)} .hin .lsw button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(21,23,26,.12)} nav{background:color-mix(in srgb,var(--wash) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);top:58px;border-bottom:1px solid var(--line)} .nin{gap:2px;padding:8px 14px;align-items:center} .nin .nind{display:none} .nin button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:0;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink2);background:none} .nin button:hover{color:var(--ink);background:var(--soft)} .nin button[hidden]{display:none} .nin button.on{color:var(--paper);background:var(--ink);font-weight:600} .nin button.on::after,.nin.ready button.on::after{display:none} /* motion polish, owner 10-07: things slide and settle instead of jumping. Only transform and opacity move. */ .nin .nind{display:block;position:absolute;left:0;top:0;width:0;height:36px;border-radius:10px;background:var(--ink);transform:none;transition:transform .34s var(--out),width .34s var(--out);z-index:0;pointer-events:none} .nin button{z-index:1;transition:color .2s var(--ease),background-color .2s var(--ease)} .nin.ready button.on{background:transparent} .dens{position:relative;isolation:isolate} .dens .segi{position:absolute;left:0;top:0;width:0;height:0;border-radius:8px;background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.10),0 0 0 1px var(--line);transition:transform .28s var(--out),width .28s var(--out);z-index:-1;pointer-events:none} .dens.slid:has(> .segi) button.on{background:transparent;box-shadow:none} .dens button{transition:color .2s var(--ease),transform .3s var(--snap)} .hin .lsw{position:relative;isolation:isolate} .hin .lsw .segi{position:absolute;left:0;top:0;width:0;height:0;border-radius:99px;background:var(--paper);box-shadow:0 1px 2px rgba(21,23,26,.12);transition:transform .28s var(--out),width .28s var(--out);z-index:-1;pointer-events:none} .hin .lsw.slid:has(> .segi) button.on{background:transparent;box-shadow:none} .hin .lsw button{transition:color .2s var(--ease)} @keyframes detIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .lddet.detin>*{animation:detIn .24s var(--out)} @keyframes flipIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .flipin{animation:flipIn .24s var(--out)} .densw .iqx,.densw .iql2{animation:flipIn .22s var(--out)} /* one top bar (owner 10-08): the tabs sit in the header row; on phones they wrap to their own line */ header nav{position:static;top:auto;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;flex:1 1 auto;min-width:0;align-self:center} header .nin{max-width:none;margin:0;padding:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:0} header .nin::-webkit-scrollbar{display:none} header .nin button{height:34px;padding:0 11px;font-size:14px;white-space:nowrap;flex:none} @media (min-width:1101px) and (max-width:1600px){header .nin button{padding:0 9px}} /* owner 10-17 UI pass: at 1440px Settings was cut off at the right */ .hin .cpill,.hin .mdl,.hin .fsz,#lvstat{display:none} .hin .st{gap:0} @media (max-width:900px){header .hin{flex-wrap:wrap;height:auto!important;min-height:52px;row-gap:4px;padding:8px 0}header nav{order:20;flex-basis:100%}} /* 이메일 header in one row (owner 10-08): no subtitle, smaller title, filters beside the status tabs; two rows only on narrow screens */ #t-mail #mlsub{display:none} #t-mail .mlhead{margin:0 0 10px;gap:10px;flex-wrap:nowrap} #t-mail .mlttl{margin-right:0} #t-mail .mlttl h1{font-size:18px} #t-mail .mlseg button{padding:6px 9px} #t-mail .mlfilt{flex:1 1 auto;margin-top:0;flex-wrap:nowrap;min-width:0} #t-mail .mlfilt .mlq{flex:1 1 150px;min-width:110px;width:auto} #t-mail .mlfilt .mlsel{flex:0 1 128px;min-width:0;width:auto} @media (max-width:1280px){#t-mail .mlhead{flex-wrap:wrap}#t-mail .mlfilt{flex-basis:100%}} .p,.lbt,.iqstarb,.frtog,.fbbtn{transition:transform .3s var(--snap),background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)} .p:active,.lbt:active,.iqstarb:active,.frtog:active,.fbbtn:active,.dens button:active{transform:scale(.96);transition-duration:0s} input,select,textarea{transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background-color .15s var(--ease)} .iqr{transition:background-color .15s var(--ease)} /* font size control in the header */ .fsz{display:inline-flex;align-items:center;gap:2px;background:var(--sink);border-radius:99px;padding:2px} .aiusd{display:inline-flex;align-items:center;height:30px;padding:0 10px;margin-right:6px;border-radius:99px;background:var(--sink);color:var(--ink2);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:default} .aiusd.hi{color:var(--warn)} @media (max-width:760px){.aiusd{display:none}} .fsz button{border:0;background:transparent;color:var(--ink2);font-size:12px;font-weight:600;height:26px;min-width:30px;padding:0 8px;border-radius:99px;cursor:pointer;transition:background-color .15s var(--ease),transform .3s var(--snap)} .fsz button:hover{background:var(--paper)} .fsz button:active{transform:scale(.92);transition-duration:0s} .fsz span{font-size:11px;color:var(--ink3);min-width:34px;text-align:center;font-variant-numeric:tabular-nums} @media (max-width:760px){.fsz{display:none}} /* phones zoom on their own; the header has no room for it */ /* 통합 문의: filters sit on top of the left list */ #t-inq .ldwrap>.iqtools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 2px} #t-inq .ldwrap>.iqtools input[type=search]{grid-column:1 / -1;height:36px;padding:0 12px;max-width:none;width:100%} #t-inq .ldwrap>.iqtools select{width:100%;max-width:none;height:34px;padding:0 6px;font-size:12px} /* owner 10-07: 통합 문의 header lives in the left column */ #t-inq .ldwrap>.iqtools .iqhead,#t-inq .ldwrap>.iqtools .iqmailnote{grid-column:1 / -1} /* 답장 상태, owner 10-13: the same colors in light and dark, white text on a solid pill */ :root{--mo-press:120ms;--mo-state:240ms;--mo-success:520ms;--mo-ease:cubic-bezier(.2,.8,.2,1);--mo-spring:cubic-bezier(.22,1,.36,1)} /* owner 10-13: one motion system for AI, send and folds */ :root{--rs-none:#cf3a35;--rs-rep:#2563eb;--rs-quo:#15803d;--rs-again:#b45309;--rs-hold:#7a6a1f;--rs-hold-old:#c2410c} .rsrow.rsrow.rs-hold{--rsc:var(--rs-hold)}.rsrow.rsrow.rs-hold-old{--rsc:var(--rs-hold-old)}.rsp.hold{background:var(--rs-hold)}.rsp.hold.old{background:var(--rs-hold-old)}.rsp small{font-weight:500;opacity:.85;margin-left:4px} #t-inq .ldwrap>.iqtools .rschips{grid-column:1 / -1} .rschips{display:flex;flex-wrap:wrap;gap:5px;padding:1px 0 2px} .rschips::-webkit-scrollbar{display:none} .rsc{flex:none;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 9px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink2);font:inherit;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap} .rsc b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink3)} .rsc.none:before,.rsc.rep:before,.rsc.quo:before,.rsc.again:before,.rsc.note:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rsd)} .rsc.none{--rsd:var(--rs-none)}.rsc.rep{--rsd:var(--rs-rep)}.rsc.quo{--rsd:var(--rs-quo)}.rsc.again{--rsd:var(--rs-again)}.rsc.note{--rsd:var(--warn)}.rsc.fup{--rsd:#E0703A} section.ntc{border:1px solid var(--line,#e5e5e5);border-radius:12px;padding:10px 12px;margin:8px 0}section.ntc.on{border-color:#E0703A;background:color-mix(in srgb,#E0703A 7%,transparent)}.ntch{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ntch b i{font-style:normal;background:#E0703A;color:#fff;border-radius:9px;padding:0 6px;font-size:11px;margin-left:4px}.ntch button{margin-left:auto}.ntci{display:flex;gap:10px;align-items:flex-start;border-top:1px dashed var(--line,#e5e5e5);padding-top:8px;margin-top:8px}.ntci>div{flex:1;min-width:0}.ntci p{margin:4px 0;white-space:pre-line;font-size:13px}.ntci.done{opacity:.55}.ntci small{font-size:12px;color:var(--muted,#888)} .mlink{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}.mlink small{font-size:12px} .mlchip.mdclaim{background:color-mix(in srgb,#0f766e 14%,transparent);color:#0f766e} .rsc.fup:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rsd)}.rsc.fup.busy:before{animation:fupPulse 1.1s ease-in-out infinite}@keyframes fupPulse{50%{opacity:.25;transform:scale(.7)}} .iql2.fupw{color:color-mix(in srgb,#E0703A 80%,var(--ink));font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.iql2.fupw b{font-weight:600;margin-right:4px}.iqln>.iql2.fupw{order:1;flex-basis:100%} section.fup{border:1px solid color-mix(in srgb,#E0703A 40%,var(--line));border-radius:12px;padding:9px 12px 10px;margin:8px 0;background:color-mix(in srgb,#E0703A 7%,var(--paper));transition:opacity .35s ease,scale .35s ease} .fup .fuph{display:flex;align-items:center;gap:8px}.fup .fuph b{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:color-mix(in srgb,#E0703A 85%,var(--ink))}.fup .fuph b i{font-style:normal;font-size:11px;padding:0 6px;border-radius:9px;background:color-mix(in srgb,#E0703A 18%,transparent)} .fup .fuph small{flex:1;color:var(--ink3);font-size:12px}.fup .fupd{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:3px 10px} .fup ul{margin:6px 0 0;padding-left:18px;font-size:13px;line-height:1.5}section.fup.done{opacity:.6;background:var(--paper);border-color:var(--line)}.fup.done ul{text-decoration:line-through} section.fup.fupok{opacity:0;scale:.97}@media (prefers-reduced-motion:reduce){section.fup,.rsc.fup.busy:before{transition:none;animation:none}} .rsc.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}.rsc.on b{color:var(--paper)} .rsrow{position:relative} .rsrow:after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rsc);pointer-events:none} .rsrow.rs-none{--rsc:var(--rs-none)}.rsrow.rs-rep{--rsc:var(--rs-rep)}.rsrow.rs-quo{--rsc:var(--rs-quo)} .rsp{flex:none;display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:600;line-height:1;color:#fff;white-space:nowrap;margin-right:2px;letter-spacing:0} .rsp.none{background:var(--rs-none)} span.rsp.rsp.rsp,span.rsp.rsp.rsp *{color:#fff} /* owner 10-17 UI pass: list text rules such as .mli .l2 span turned the pill text grey on red */.rsp.rep{background:var(--rs-rep)}.rsp.quo{background:var(--rs-quo)} .rsp.nda{background:#2f9e44}.rsp.nda svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round} /* owner 10-26: NDA signed, any linked address */.rsp.again{background:var(--rs-again)} .rsp small{font-size:11px;font-weight:500;padding:1px 5px;border-radius:999px;background:rgba(255,255,255,.22)} .rsdh{display:inline-flex;gap:4px;margin-left:8px;vertical-align:2px} /* owner 10-14 QA2: small spills at 1366 and on phones, the link chevron, the same-customer hint and the history header wrap instead */ .kvlink{min-width:0;flex:0 1 auto}.iqdup,.iqdup button{min-width:0}#iqdet .iqbody .iqtlh{flex-wrap:wrap;row-gap:4px}#iqdet .iqbody .iqtlh>*{min-width:0} /* owner 10-14 QA2: no text under 11px */ .iqn,.cstp li,.cstp li small,.bx,.rsp small,.cbk,.iqtr small,.msxtag,.trtag{font-size:11px} html body .fpdot,html body i.asgc{font-size:11px} html body .fpdot{width:17px;height:17px} /* owner 10-14 QA2: phone tap targets at least 36px, and the header tabs show an edge fade when more tabs are off screen */ @media (max-width:760px){html body #t-inq .iqhact .s,html body #fbopen1,html body #fbopen3,html body #bkopen,html body #iqrefresh,html body #iqmore{width:36px;min-width:36px;height:36px;min-height:36px}html body .cx .cxchev{width:36px;height:36px}html body .rsc,html body .tdmt,html body .tdmc{min-height:36px}html body #t-inq #iqdet .iqwho.cmp .lbt.sm,html body #t-inq .iqwho.cmp .lbt.sm,html body .lbt.sm{height:36px;min-height:36px}} header .nin.fr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} header .nin.fl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)} header .nin.fl.fr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)} /* owner 10-14 QA2, Kim Romba: in the detail header the pill takes its own line under the name and never reaches the grade buttons; the long part wraps inside the pill, the 고객이 다시 씀 end keeps its size */ .lddh .nm .rsdh{display:flex;flex-wrap:wrap;margin:4px 0 0;max-width:100%;min-width:0} .lddh .rsdh .rsp{max-width:100%;min-width:0;overflow:hidden;height:22px;padding:0 9px;gap:6px} .lddh .rsdh .rst{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:22px}.lddh .rsdh .rst small{white-space:nowrap;display:inline-block}.lddh .rsdh .rsag{align-self:stretch;display:inline-flex;align-items:center;margin-right:-9px;padding:0 9px} .lddh .h>.w{min-width:0;margin-right:8px} .mli .l2 .rsp{height:18px} /* inquiry list rows, owner 10-14: line 1 who and when, line 2 one pill and at most two badges, line 3 the AI title; 한눈에 puts 2 and 3 on one line */ .iql0{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;line-height:1.35} .iql0>b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto} .iql0 .co{font-size:12px;color:var(--ink3);min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;margin:0} /* 공장 코드 chip on the 통합 문의 row, owner 11-02 */ .iql0 .iqfxc{flex:0 0 auto;font-size:11px;line-height:16px;padding:0 6px;border:1px solid var(--line);border-radius:4px;color:var(--ink2);font-weight:500;white-space:nowrap} .iql0 .iqfxc.old{color:var(--ink3)} /* 처방 종류 in its own color on the 공장 list and detail, the same colors as the factory cards, owner 11-06 */ .mlchip.fxft{font-weight:600}.mlchip.fxft.lib,.mlchip.fxft.adj{background:color-mix(in srgb,#2f9e6a 20%,transparent);color:#3fb37d}.mlchip.fxft.match{background:color-mix(in srgb,#3b7fd9 22%,transparent);color:#5a9bf0}.mlchip.fxft.custom{background:color-mix(in srgb,#c98a1b 24%,transparent);color:#dba032} /* 공장 코드 with its icon on the 샘플 list and detail, owner 11-06 */ .smpfxc{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:0 6px;font-size:11px;line-height:18px;border:1px solid var(--line);border-radius:4px;color:var(--ink2);font-weight:500;white-space:nowrap;vertical-align:middle} .smpfxc svg{flex:none} .smpfxc.big{font-size:12px;line-height:20px} .iql0 .fl{flex:none;margin:0} .iql0 .iqstarm{margin:0} .iqci{display:inline-flex;gap:3px;flex:none} .iqci i,.frdot{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:5px;flex:none;font-style:normal;cursor:help;min-height:0;min-width:0} .iqci svg,.frdot svg{width:10px;height:10px} .iqci i.ic-f{background:color-mix(in srgb,#2563eb 12%,transparent);color:var(--c-blue)} .iqci i.ic-c{background:color-mix(in srgb,#7c3aed 13%,transparent);color:var(--c-violet)} .iqci i.ic-m{background:color-mix(in srgb,#16a34a 13%,transparent);color:var(--c-green)} .iqci i.ic-s{background:color-mix(in srgb,#ea580c 13%,transparent);color:var(--c-orange)} .iqci i.ic-a{background:var(--sink);color:var(--ink2)} .frdot{background:color-mix(in srgb,#16a34a 14%,transparent);color:var(--c-green)} .iqln{min-width:0} #t-inq .iql1{flex-wrap:nowrap;align-items:center;gap:4px;margin-top:3px;overflow:hidden} #t-inq .iql1:empty{display:none} #t-inq .iql1 .tierb{margin:0} .iqdup{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:4px;font-size:12px;color:var(--warn)}.iqdup>span{font-weight:600} .iqdup button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 7px;border-radius:999px;background:var(--sink);color:var(--ink2);font-weight:500} .iqdup button:hover{background:var(--line)}.iqdup button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}.iqdup .tierb{margin:0;transform:none} .cbk{display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:600;font-style:normal;line-height:1;white-space:nowrap;flex:none;vertical-align:middle} .cbk svg{width:11px;height:11px;flex:none} .cbk.sent{background:color-mix(in srgb,var(--ok) 11%,var(--sink));color:color-mix(in srgb,var(--ok) 70%,var(--ink2))} .cbk.wait{background:var(--lemon);color:var(--lemon-ink)} .cbk.none{background:transparent;color:var(--ink3);box-shadow:inset 0 0 0 1px var(--line)} .lddh .sb .cbk{margin-left:6px} /* owner 10-17: one badge row under the name: reply pill, status and the auto mail chip, the same height and evenly spaced */ #iqdet .lddh .nm .rsdh{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:5px 0 0} #iqdet .lddh .rsdh>.iqs,#iqdet .lddh .rsdh>.cbk{height:23px;display:inline-flex;align-items:center;padding:0 9px;border-radius:999px;font-size:12px;margin:0;box-sizing:border-box;white-space:nowrap} #iqdet .lddh .w>.sb{margin-top:3px} @container (max-width:360px){#t-inq .iql1 .cbk.none .cbt,#t-inq .iql1 .cbk.wait .cbt{display:none}#t-inq .iql1 .cbk{padding:0 5px}} #t-inq .iql1>.tierb,#t-inq .iql1>.callchip,#t-inq .iql1>.fpdot,#t-inq .iql1>:not(.rsp){flex:none} #t-inq .iql1>.rsp{flex:none;min-width:0;max-width:none}#t-inq .iql1>.rsp.ag{min-width:0}#t-inq .iql1>.rsp~*{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} /* owner 10-16: a crowded row squeezed the pill to a sliver; it keeps room for its text and 답변옴, the chips after it give way */ .rsp .rst{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rsp .rsag{flex:none} #iqlist{container-type:inline-size} @container (max-width:430px){#t-inq .iql1 .callchip .cct{display:none}#t-inq .iql1 .callchip{padding:0 6px}} @container (max-width:340px){#t-inq .iql1 .rsag{font-size:0;padding:0 5px}#t-inq .iql1 .rsag::after{content:"\21BA";font-size:11px}} .rsp.ag{padding-right:0;overflow:hidden} .rsag{display:inline-flex;align-items:center;align-self:stretch;margin-left:6px;padding:0 7px;background:var(--rs-again);font-style:normal;font-weight:600} /* owner 10-17 badge E: soft tint, dark text of the same color, an icon, and 답변옴 as a bubble on the top right corner */ span.rsp.rsp.rsp.rsp{--rc:var(--rs-quo);position:relative;overflow:visible;gap:4px;padding:0 8px;height:20px;border-radius:999px;font-weight:500;background:color-mix(in srgb,var(--rc) 13%,var(--paper));color:color-mix(in srgb,var(--rc) 80%,var(--ink));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 18%,transparent)} span.rsp.rsp.rsp.rsp *{color:inherit} span.rsp.rsp.rsp.rsp.none{--rc:var(--rs-none)}span.rsp.rsp.rsp.rsp.rep{--rc:var(--rs-rep)}span.rsp.rsp.rsp.rsp.quo{--rc:var(--rs-quo)}span.rsp.rsp.rsp.rsp.hold{--rc:var(--rs-hold)}span.rsp.rsp.rsp.rsp.hold.old{--rc:var(--rs-hold-old)} span.rsp.rsp.rsp.rsp .rsi{flex:none;opacity:.9} span.rsp.rsp.rsp.rsp .rsd{font-weight:500;color:color-mix(in srgb,var(--rc) 62%,var(--ink3));margin-left:2px} span.rsp.rsp.rsp.rsp small{background:color-mix(in srgb,var(--rc) 16%,transparent)} span.rsp .rsl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} span.rsp.rsp.rsp.rsp.ag{padding-right:20px;margin-right:22px;overflow:visible} span.rsp.rsp.rsp.rsp .rsag{position:absolute;top:-8px;right:-22px;margin:0;height:15px;padding:0 5px;border-radius:999px;align-self:auto;font-size:11px;font-weight:600;line-height:1;color:#fff;background:var(--rs-again);box-shadow:0 0 0 2px var(--paper);z-index:1;animation:rsBub .32s var(--snap) backwards} #t-inq .iql1:has(>.rsp.ag),#t-mail .mli .l2:has(>.rsp.ag){overflow-x:clip;overflow-y:visible} /* owner 10-17: no 답변옴 bubble in the lists, it covered names; the 답변옴 filter chip and the detail header still show it */ #iqlist .rsag,#mllist .rsag{display:none!important} #iqlist span.rsp.rsp.rsp.rsp.ag,#mllist span.rsp.rsp.rsp.rsp.ag{padding-right:8px;margin-right:2px} @keyframes rsBub{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}} .lddh .rsdh span.rsp.rsp.rsp.rsp{height:23px;padding:0 10px;font-size:12px;overflow:visible} .lddh .rsdh span.rsp.rsp.rsp.rsp .rsag{margin-right:0;padding:0 6px;height:16px;right:-24px}.lddh .rsdh span.rsp.rsp.rsp.rsp.ag{margin-right:26px} .lddh .nm .rsdh{padding-top:4px} @media (prefers-reduced-motion:reduce){span.rsp .rsag{animation:none!important}} #iqlist.dense .iqr{min-height:0;padding-top:7px;padding-bottom:7px;align-items:start} #iqlist.dense .iqav2{width:26px;height:26px;font-size:11px} #iqlist.dense .iqr{grid-template-columns:26px minmax(0,1fr) auto} #iqlist.dense .iqln{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;margin-top:3px} #iqlist.dense .iqln .iql1{margin:0;flex:none;max-width:70%} #iqlist.dense .iqln .iql2{margin:0;flex:1 1 120px;min-width:0;font-size:13px;color:var(--ink2)} #iqlist.dense .iqln .iql2 .wn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} #iqlist.dense .iqln .cnl{order:3;flex-basis:100%;margin:0} #iqlist.dense .iqrt{gap:2px} .iqhead{display:flex;align-items:center;gap:6px;min-width:0;margin-bottom:2px} #t-inq .iqhead .ldttl{order:0;flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:6px} .iqhead .ldttl b{font-size:15px;font-weight:600;white-space:nowrap} .iqhead .ldttl .muted{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #t-inq .iqhact{order:1;display:flex;align-items:center;gap:4px;flex:none} .iqhact #iqstat{display:none} .iqhact .dens button{padding:4px 9px;font-size:12px} .iqhact .s{width:32px;height:32px;padding:0!important;display:inline-flex;align-items:center;justify-content:center;font-size:0!important;gap:0} .iqhact .s svg{width:15px;height:15px} .iqhact [hidden]{display:none!important} #t-inq .iqmailnote{margin-top:0} /* 통합 문의 full screen (owner 10-12): the detail grows over the page, the icon next to the trash can or Esc brings it back */ #iqdet.iqfs{position:fixed;inset:14px;z-index:80;display:flex;flex-direction:column;max-height:none;height:auto;margin:0;border-radius:18px;background:var(--paper);box-shadow:0 30px 80px -24px rgba(0,0,0,.38);overflow:auto} #t-inq.iqfson{animation:none!important;transform:none!important} .iqfsbg{position:fixed;inset:0;z-index:79;background:rgba(15,16,18,.30);opacity:0;transition:opacity .28s ease} .iqfsbg.on{opacity:1} body.iqfsnoscroll{overflow:hidden} .iqfsb svg{width:16px;height:16px} @media (max-width:999px){.iqfsb{display:none}} /* phones already open the detail full screen */ @media (min-width:1300px){#iqdet.iqfs{inset:18px max(18px,calc((100vw - 1500px) / 2))}} @media (min-width:1000px){#t-inq .ldwrap{grid-template-rows:auto minmax(0,1fr)}#t-inq .ldwrap>.iqtools{grid-column:1;grid-row:1}#t-inq #iqlist{grid-column:1;grid-row:2}#t-inq #iqdet{grid-column:2;grid-row:1 / span 2}} /* 통합 문의 detail: 번역 switch */ .iqtrsw{margin-right:4px;align-self:center} .iqtrsw button{padding:5px 9px;font-size:12px} @media (prefers-reduced-motion:reduce){.nin .nind,.dens .segi,.hin .lsw .segi{transition:none!important}.lddet.detin>*,.flipin,.densw .iqx,.densw .iql2{animation:none!important}} .nin .bdg{margin-left:0;background:var(--pink);color:#fff;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:0} .nin .bdg.hide{display:none} .nin .bdg.soft{background:var(--soft);color:var(--ink2)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nin .bdg:not(.soft){background:#D81B60}} :root[data-theme="dark"] .nin .bdg:not(.soft){background:#D81B60} .nin button.on .bdg.soft{background:color-mix(in srgb,var(--paper) 22%,transparent);color:var(--paper)} @media (max-width:760px){ header{padding:0 12px} .hin{height:52px;gap:8px} nav{top:52px} .nin{padding:6px 10px;gap:4px} .nin button{flex:none;height:38px;min-height:38px;padding:0 12px;font-size:14px} .cpill{display:none} } @media (max-width:640px){.hin b{display:inline}} @media (max-width:420px){.hin b{display:none}} /* 대시보드 홈 */ #t-home{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:2400px;margin:0 auto} #t-home[hidden]{display:none} #t-home.staff [data-own]{display:none!important} .hmhead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 16px;flex-wrap:wrap} .hmttl{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .hmttl h1{font-size:22px;line-height:1.2;letter-spacing:-.02em;font-weight:600} .hmttl .muted{font-weight:500} .hmql{display:flex;gap:6px;flex-wrap:wrap;min-width:0;max-width:100%} .hmp{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color .15s var(--ease),color .15s var(--ease)} .hmp:hover{border-color:var(--ink3);color:var(--ink)} .hmp.main{background:var(--ink);border-color:var(--ink);color:var(--paper)} .hmnote{display:flex;align-items:center;gap:10px;background:var(--lemon);color:var(--lemon-ink);border-radius:12px;padding:10px 10px 10px 14px;font-size:13px;font-weight:500;line-height:1.5} .hmnote span{flex:1;min-width:0} .hmx{flex:none;width:30px;height:30px;border:0;border-radius:8px;background:none;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;opacity:.75} .hmx:hover{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)} .hmsk{display:block;width:56px;height:26px;margin:3px 0;border-radius:8px;background:linear-gradient(90deg,var(--sink),var(--soft),var(--sink));background-size:200% 100%;animation:hmsk 1.2s linear infinite} @keyframes hmsk{from{background-position:200% 0}to{background-position:0 0}} .hmc{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 18px;min-width:0} .hmch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap} .hmch b{font-size:15px;font-weight:600;letter-spacing:0} .hmch .muted{font-weight:500} .hmn{min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--pink);color:#fff;font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center} .hmn:empty{display:none} .hmlk{border:0;background:none;color:var(--ink2);font-size:13px;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:8px} .hmlk:hover{color:var(--ink);background:var(--soft)} .hmwt{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:var(--wash);min-width:0} .hmwt small{font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hmwt b{font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.25} .hmwt em{font-style:normal;font-size:12px;font-weight:600;color:var(--ink3);white-space:nowrap} .hmwt em i{font-style:normal;display:inline-block;margin-right:4px;padding:0 5px;border-radius:5px;background:var(--sink);color:var(--ink2)} .hmwt em i.pos{background:var(--mint);color:var(--ok)} /* [vz 10-27] 사이트 방문자 card */ :root{--vz:#55585D;--vz-s:#EFEFEA;--vz-c:#D81B60} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--vz:#B4B9C3;--vz-s:#23252B;--vz-c:#F06A97}} :root[data-theme="dark"]{--vz:#B4B9C3;--vz-s:#23252B;--vz-c:#F06A97} #vzcard{position:relative;margin-bottom:12px} .vzhd{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap} .vzhd>b{font-size:15px;font-weight:600} .vzhd .muted{font-size:13px} .vzhd .hmlk{margin-left:auto} .vzon{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;background:var(--mint);color:var(--ok);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} .vzon i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none} .vzon i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:vzPing 1.8s var(--out) infinite} .vzon.off{background:var(--wash);color:var(--ink3)}.vzon.off i{background:var(--ink3)}.vzon.off i::after{display:none} .vzk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0 2px} .vzt{padding:10px 12px;border-radius:12px;background:var(--wash);min-width:0;animation:vzIn .5s var(--out) backwards;animation-delay:calc(var(--i)*70ms)} .vzt small{display:block;font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vzt b{display:block;font-size:23px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.3} .vzt em{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vzt em i{font-style:normal;display:inline-block;margin-right:4px;padding:0 5px;border-radius:5px;background:var(--sink);color:var(--ink2)} .vzt em i.pos{background:var(--mint);color:var(--ok)} .vzt.hero{background:var(--vz-s)}.vzt.hero b{color:var(--vz)} .vzrg{display:inline-flex;gap:2px;padding:2px;border-radius:9px;background:var(--wash);margin-left:auto} .vzrg button{all:unset;box-sizing:border-box;height:26px;padding:0 10px;border-radius:7px;font-size:12px;font-weight:600;line-height:26px;color:var(--ink3);cursor:pointer;white-space:nowrap} .vzrg button:hover{color:var(--ink)}.vzrg button:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .vzrg button[aria-pressed="true"]{background:var(--sink);color:var(--ink)} .vzrg+.hmlk{margin-left:0} button.vzt{all:unset;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;padding:10px 12px;border-radius:12px;background:var(--wash);min-width:0;cursor:pointer;animation:vzIn .5s var(--out) backwards;animation-delay:calc(var(--i)*70ms)} button.vzt:hover{background:var(--sink)}button.vzt:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .vzt em.wrap{white-space:normal;line-height:1.35} .vzt em .late{color:var(--vz-c)} .vzur{all:unset;box-sizing:border-box;display:flex;align-items:baseline;gap:8px;width:100%;padding:2px 0;font-size:13px;font-weight:600;cursor:pointer} .vzur:hover span{text-decoration:underline}.vzur:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-radius:4px} .vzur span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vzur i{flex:none;font-style:normal;font-size:12px;font-weight:600;color:var(--ink3);font-variant-numeric:tabular-nums} .vzur0{margin-top:6px;font-size:13px;font-weight:600;color:var(--ink3)} .vzsum{margin-right:auto;font-size:12px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums} .vzlg{flex-wrap:wrap} #vzcard.vzbusy .vzsum,#vzcard.vzbusy .vzlg,#vzcard.vzbusy .vzplot,#vzcard.vzbusy .vzx,#vzcard.vzbusy .vzb3{opacity:.45;transition:opacity .15s} .vzlg{display:flex;gap:14px;justify-content:flex-end;margin:12px 0 0;font-size:12px;font-weight:600;color:var(--ink3)} .vzlg span{display:inline-flex;align-items:center;gap:5px} .vzlg i{width:14px;height:3px;border-radius:2px;background:var(--vz)} .vzlg i.c{width:7px;height:9px;border-radius:2px 2px 0 0;background:var(--vz-c);opacity:.6} .vzplot{position:relative;height:200px;margin:8px 0 0 36px} .vzgl{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--line)} .vzgl span{position:absolute;left:-36px;width:30px;top:-8px;text-align:right;font-size:11px;font-weight:500;color:var(--ink3);font-variant-numeric:tabular-nums} .vzdraw{position:absolute;inset:0;clip-path:inset(-12px 100% -2px 0);animation:vzDraw 1.5s var(--out) .2s forwards} .vzsvg{display:block;width:100%;height:100%;overflow:visible} .vzarea{fill:var(--vz);opacity:.13} .vzline{fill:none;stroke:var(--vz);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round} .vzcols{position:absolute;inset:0;display:flex} .vzc{position:relative;flex:1 1 0;min-width:0} .vzc::before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1px solid var(--ink3);opacity:0;transition:opacity .15s} .vzc:hover::before{opacity:.35} .vzbar{position:absolute;bottom:0;left:24%;right:24%;border-radius:3px 3px 0 0;background:var(--vz-c);opacity:.5;transform-origin:bottom;animation:vzBar .7s var(--out) backwards;animation-delay:calc(.6s + var(--i)*24ms);transition:opacity .15s} .vzc:hover .vzbar{opacity:.9} .vzdot{position:absolute;left:50%;bottom:var(--y);width:11px;height:11px;margin:0 0 -5.5px -5.5px;border-radius:50%;background:var(--paper);border:2.5px solid var(--vz);opacity:0;transform:scale(.4);transition:opacity .15s,transform .25s var(--out);box-sizing:border-box} .vzc:hover .vzdot{opacity:1;transform:none} .vzc.last .vzdot{opacity:1;transform:none;animation:vzPop .5s var(--out) 1.5s backwards} .vzc.last .vzdot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--vz);animation:vzPing 2s var(--out) 2s infinite} .vztip{position:absolute;z-index:3;bottom:calc(var(--y) + 16px);left:50%;transform:translate(-50%,4px);opacity:0;pointer-events:none;transition:opacity .15s,transform .2s var(--out);background:var(--ink);color:var(--paper);padding:8px 11px;border-radius:10px;font-size:12px;line-height:1.5;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.18)} .vztip b{display:block;font-size:13px;margin-bottom:2px} .vztip span{display:block;opacity:.85;font-variant-numeric:tabular-nums} .vzc.l .vztip{left:0;transform:translate(0,4px)}.vzc.r .vztip{left:auto;right:0;transform:translate(0,4px)} .vzc:hover .vztip{opacity:1;transform:translate(-50%,0)}.vzc.l:hover .vztip,.vzc.r:hover .vztip{transform:none} .vzx{position:relative;height:16px;margin:6px 0 0 36px;font-size:11px;font-weight:500;color:var(--ink3);font-variant-numeric:tabular-nums} .vzx span{position:absolute;transform:translateX(-50%);white-space:nowrap} .vzb3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .vzb3 h5{margin:0 0 9px;font-size:12px;font-weight:600;color:var(--ink2)} .vzr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;align-items:center;margin-bottom:8px;font-size:13px;font-weight:500} .vzr>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vzr>b{font-size:13px;font-variant-numeric:tabular-nums} .vzr>u{grid-column:1/-1;display:block;height:5px;border-radius:99px;background:var(--sink);overflow:hidden;text-decoration:none} .vzr>u>i{display:block;height:100%;border-radius:99px;background:var(--vz);transform-origin:left;animation:vzGrow .9s var(--out) backwards;animation-delay:calc(.35s + var(--i)*80ms)} @keyframes vzPing{from{transform:scale(1);opacity:.55}to{transform:scale(2.8);opacity:0}} @keyframes vzIn{from{opacity:0;transform:translateY(6px)}} @keyframes vzPop{from{opacity:0;transform:scale(.3)}} @keyframes vzDraw{to{clip-path:inset(-12px -2px -2px 0)}} @keyframes vzBar{from{transform:scaleY(0)}} @keyframes vzGrow{from{transform:scaleX(0)}} @media (max-width:900px){.vzk{grid-template-columns:repeat(2,minmax(0,1fr))}.vzk>.hero{grid-column:1/-1}.vzb3{grid-template-columns:1fr}.vzplot{height:170px}} @media (prefers-reduced-motion:reduce){#vzcard *,#vzcard *::after{animation:none!important}#vzcard .vzdraw{clip-path:none}} .hmwt em i.neg{background:var(--pink-s);color:var(--pink-d)} .hmic{flex:none;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--sink);color:var(--ink2);font-size:16px} .hmic.pk{background:var(--pink-s);color:var(--pink)} .hmic.wn{background:var(--lemon);color:var(--lemon-ink)} .hmic.gn{background:var(--mint);color:var(--ok)} .hmtx{flex:1;min-width:0;display:grid;gap:1px} .hmtx b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hmtx span{font-size:13px;color:var(--ink2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hmempty{padding:18px 8px;text-align:center;color:var(--ink3);font-size:13px;font-weight:500} .hmchips{display:flex;flex-wrap:wrap;gap:4px} .hmchips i{font-style:normal;font-size:12px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--sink);color:var(--ink2);white-space:nowrap} .hmchips i.pk{background:var(--pink-s);color:var(--pink-d)} .hmchips i.wn{background:var(--lemon);color:var(--lemon-ink)} .hmchips i.gn{background:var(--mint);color:var(--ok)} @media (max-width:560px){ #t-home{gap:12px} .hmttl h1{font-size:20px} .hmc{padding:14px 12px} .hmhead{display:grid;gap:10px} .hmql{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0;padding:0;max-width:100%;min-width:0} .hmhead{min-width:0;max-width:100%} .hmql::-webkit-scrollbar{display:none} .hmp{flex:none} } /* home v2: 지금 할 일, 단계별 고객, 돈, 공장, 이번 주, 최근 문의 */ .hv{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;align-items:start} .hvcol{display:grid;gap:14px;min-width:0;align-content:start} .hv .hmch{margin-bottom:8px;flex-wrap:nowrap} .hv .hmch>b{white-space:nowrap} .hv .hmch .muted{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .hv .hmch .hmlk{min-height:44px;margin:-10px -8px -10px 0;padding:0 8px;white-space:nowrap} .hvht{display:inline-flex;align-items:center;gap:8px;min-width:0} .hvpipe{grid-column:1/-1;display:grid;grid-template-columns:auto repeat(6,minmax(0,1fr));gap:10px;align-items:stretch;padding:10px 12px} .hvph{display:grid;align-content:center;gap:1px;padding:0 6px;min-width:0} .hvph b{font-size:15px;font-weight:600;letter-spacing:0;white-space:nowrap} .hvph span{font-size:12px;font-weight:500;color:var(--ink3);white-space:nowrap} .hvps{position:relative;display:grid;align-content:center;justify-items:start;gap:1px;min-height:52px;min-width:0;padding:7px 12px;border:0;border-radius:12px;background:var(--wash);font:inherit;color:inherit;text-align:start;cursor:pointer} .hvps:hover{background:var(--soft)} .hvps b{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums} .hvps span{max-width:100%;font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hvps.z b{color:var(--ink3)} .hvps:not(:last-child)::after{content:"";position:absolute;top:50%;right:-8px;width:5px;height:5px;border-top:1.5px solid var(--ink3);border-right:1.5px solid var(--ink3);transform:translateY(-50%) rotate(45deg);opacity:.55;pointer-events:none} .hvq{list-style:none;display:grid;margin:0;padding:0} .hvq li{border-top:1px solid var(--line);min-width:0} .hvq li:first-child{border-top:0} .hvr{width:100%;display:flex;align-items:center;gap:10px;min-height:52px;padding:6px;border:0;border-radius:10px;background:none;font:inherit;color:inherit;text-align:start;cursor:pointer} .hvr:hover{background:var(--wash)} .hvr:focus-visible,.hvps:focus-visible,.hvtile:focus-visible,.hvmore:focus-visible,.hvai:focus-visible{outline:2px solid var(--pink);outline-offset:2px} .hvr .hmic{width:30px;height:30px;border-radius:9px} .hvr .ldav{flex:none} .hvt{flex:1;min-width:0;display:grid;gap:1px} .hvt b{display:flex;align-items:center;min-width:0;font-size:14px;font-weight:600} .hvt b>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hvt small{font-size:13px;font-weight:500;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hvl{flex:none;padding:3px 8px;border-radius:7px;background:var(--sink);color:var(--ink2);font-size:12px;font-weight:600;font-style:normal;white-space:nowrap;font-variant-numeric:tabular-nums} .hvl.l{background:var(--pink-s);color:var(--pink-d)} .hvl.t{background:var(--lemon);color:var(--lemon-ink)} .hvq li.hvdone{display:flex;align-items:center;gap:10px;padding:12px 6px;font-size:14px;font-weight:600;color:var(--ink2)} .hvq li.hvld .hvt b,.hvq li.hvld .hvt small{color:var(--ink3)} .hvmore{display:block;width:100%;min-height:44px;margin-top:2px;border:0;border-top:1px solid var(--line);background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer} /* [custalias 10-15] 같은 고객으로 합치기: the merged box, 합칠 후보, the dialogs */ .cabox,.caline,.casug{grid-column:1/-1} .cabox{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;margin:2px 0 6px;border:1px solid var(--line);border-radius:10px;background:var(--sink);font-size:13px} .cabox>b{font-weight:600}.caems{display:flex;flex-wrap:wrap;gap:4px 10px;min-width:0}.caem{display:inline-flex;align-items:center;gap:5px;word-break:break-all} .cap{font-style:normal;font-size:11px;font-weight:600;padding:1px 6px;border-radius:6px;background:var(--ink);color:var(--paper)} .calk{font:inherit;font-size:12px;font-weight:600;border:0;background:none;padding:0;color:var(--brand);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .caact{display:flex;gap:6px;margin-left:auto}.caline{margin:2px 0 6px} .casug b{font-weight:600;margin-left:3px;font-variant-numeric:tabular-nums} .cadlg{display:grid;gap:10px;margin:4px 0 12px;text-align:left}.cadg{display:grid;gap:6px;max-height:200px;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:10px} .cadg label{display:flex;align-items:center;gap:6px;font-size:13px;word-break:break-all}.cafl{display:grid;gap:4px;font-size:13px}.cafl span{color:var(--ink3);font-weight:600} .cafl input,.cafl select{height:36px;font:inherit;font-size:14px} .casl{display:grid;gap:0;max-height:min(60vh,520px);overflow:auto;margin:4px 0 12px;text-align:left;border-top:1px solid var(--line)} .casr{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line)} .cass{flex:none;min-width:34px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;background:var(--lemon);color:var(--lemon-ink);font-variant-numeric:tabular-nums} .casw{flex:1;min-width:0;display:grid;gap:2px;font-size:13px;word-break:break-all}.casw small{color:var(--ink3);font-size:12px}.casb{flex:none;display:flex;gap:4px} @media (max-width:760px){.casr{flex-wrap:wrap}.casb{width:100%;justify-content:flex-end}.caact{margin-left:0}} /* [replyq 10-15] 오늘 답할 사람 card */ .hvrq[hidden]{display:none} .rqov{font-size:12px;font-weight:600;color:var(--pink-d);background:var(--pink-s);padding:2px 8px;border-radius:7px} .rqr{cursor:default}.rqr .hvt small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rqgo{flex:none;height:30px;padding:0 12px;font-size:13px} .hvgs[hidden]{display:none}.gsr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}.gsr:first-child{border-top:0} .gsr .hvt small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gsw{grid-column:1/-1;font-size:12px;color:var(--ink2);display:flex;gap:6px;align-items:center;flex-wrap:wrap} .gsw b{font-weight:600;color:var(--ink)}.gsb{display:flex;gap:4px}.gsb button{width:30px;height:30px;padding:0;border-radius:8px;font-weight:600;font-size:13px} .gsb button.sg{outline:2px dashed #2563eb;outline-offset:1px}.gsall{margin-top:8px;width:100%} .rqai{display:block;margin-top:2px;font-size:12px;color:var(--ink2)}.rqai.no{color:#0f766e;font-weight:500}.rqdone{flex:none;height:30px;padding:0 10px;font-size:12px} .hvmore:hover{color:var(--ink)} .hvtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .hvtiles.n3{grid-template-columns:repeat(3,minmax(0,1fr))} .hvtiles.n1{grid-template-columns:minmax(0,1fr)} .hvtile{display:grid;align-content:start;gap:2px;min-width:0;min-height:44px;padding:10px 12px;border:0;border-radius:12px;background:var(--wash);font:inherit;color:inherit;text-align:start;cursor:pointer} .hvtile:hover{background:var(--soft)} .hvtile small{font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hvtile b{display:flex;flex-wrap:wrap;column-gap:5px;min-height:24px;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.25;font-variant-numeric:tabular-nums} .hvtile b .hmsk{width:56px;height:22px;margin:1px 0} .hvtile em{font-style:normal;font-size:12px;font-weight:500;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hvtile.hot{background:var(--pink-s)} .hvtile.hot em{color:var(--pink-d)} .hv .hmwt em{overflow:hidden;text-overflow:ellipsis} .hvai{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;margin:4px 0 -8px;padding:0 4px;border:0;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--ink3);cursor:pointer;text-align:start} .hvai span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hvai span:last-child{flex:none;font-weight:600;color:var(--ink2)} .hvai:hover span:last-child{color:var(--ink)} @media (min-width:1280px){.hvtiles.n4{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:899px){ .hv{grid-template-columns:minmax(0,1fr);gap:12px} .hvcol{display:contents} .hvnow{order:1}.hvpipe{order:2}.hvmoney{order:3}.hvfx{order:4}.hvweek{order:5}.hvrecent{order:6} .hvpipe{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:10px} .hvph{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 4px 4px} .hvps{justify-items:center;text-align:center;min-height:50px;padding:7px 2px} .hvps b{font-size:20px} .hvps span{font-size:12px} .hvps:not(:last-child)::after{display:none} #t-home .hmql{padding:6px 0;margin:-6px 0} #t-home .hmp{position:relative} #t-home .hmp::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px} #t-home .hmx{width:44px;height:44px;margin:-7px -7px -7px 0} } @media (max-width:560px){ .hvtile{padding:9px 10px} .hvtile b{font-size:18px} .hvtiles.n3 .hmwt{padding:9px 8px} } /* 사이트 탭 */ .svsub{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px} .svsub button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:10px;border:1px solid var(--line);background:var(--paper);font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer} .svsub button:hover{color:var(--ink);border-color:var(--ink3)} .svsub button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)} .svsub button .c{font-size:12px;font-weight:600;opacity:.75;font-variant-numeric:tabular-nums} .svsub button .c.hot{opacity:1;background:var(--pink);color:#fff;border-radius:9px;padding:0 6px;min-width:18px;text-align:center} .svext{display:inline-flex;align-items:center;gap:6px;text-decoration:none} .svlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px;align-items:start} .svlist .ldc{cursor:default} .svlist .ldc[data-svo]{cursor:pointer} .svkv{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:10px} .svkv span{display:grid;gap:1px;font-size:13px;font-weight:600;min-width:0;overflow-wrap:anywhere} .svkv small{font-size:12px;color:var(--ink3);font-weight:500} .svdet{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:grid;gap:10px} .svhist{list-style:none;display:grid;gap:4px;font-size:12px;color:var(--ink2)} .svhist b{font-weight:600;color:var(--ink)} .svacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px} .svacts .s{padding:7px 11px;font-size:13px;text-decoration:none;display:inline-flex;align-items:center;gap:6px} .svteam{font-style:normal;font-size:11px;font-weight:600;padding:1px 6px;border-radius:5px;background:var(--sink);color:var(--ink2);margin-left:6px;vertical-align:1px} .svfun{display:grid;gap:9px} .svfs{display:grid;grid-template-columns:92px minmax(0,1fr) 92px;align-items:center;gap:4px 12px;font-size:13px;font-weight:600} .svfb{height:22px;border-radius:7px;background:var(--sink);overflow:hidden} .svfb i{display:block;height:100%;background:var(--ink);border-radius:7px} #svtools select{flex:0 0 auto;width:auto;min-width:170px} .svfs.lost .svfb i,.svfs.hold .svfb i{background:var(--ink3)} .svfs.won .svfb i{background:var(--pink)} .svfs b{text-align:end;font-variant-numeric:tabular-nums;font-weight:600} .svfs b small{display:block;font-size:11px;color:var(--ink3);font-weight:500} .svgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start} .svq{display:flex;align-items:center;gap:10px;padding:10px 4px;border-top:1px solid var(--line);cursor:pointer;border-radius:8px} .svq:first-child{border-top:0} .svq:hover{background:var(--wash)} .svq .hmtx{flex:1} .svq .tot{flex:none;text-align:end;font-weight:600;font-variant-numeric:tabular-nums;font-size:14px} .svq .tot small{display:block;font-size:11px;color:var(--ink3);font-weight:500} @media (max-width:900px){.svgrid{grid-template-columns:minmax(0,1fr)}} @media (max-width:560px){.svlist{grid-template-columns:minmax(0,1fr)}.svfs{grid-template-columns:76px minmax(0,1fr) 78px}.svsub{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.svsub::-webkit-scrollbar{display:none}.svsub button{flex:none}} /* 설정 탭: 왼쪽 메뉴, 폰에서는 가로로 넘기는 칩. 한 번에 한 묶음만 보입니다. owner 10-05 */ .stw{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start;max-width:1060px;margin:0 auto} .stnav{position:sticky;top:calc(var(--hdrh,58px) + 64px);display:flex;flex-direction:column;gap:2px} .stnav button{position:relative;display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--ink2);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:start;white-space:nowrap;transition:background-color .15s var(--ease),color .15s var(--ease)} .stnav button svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .stnav button:hover{background:var(--soft);color:var(--ink)} .stnav button.on{background:var(--ink);color:var(--paper)} .stnav button:focus-visible{outline:2px solid var(--pink);outline-offset:2px} .stnav .stdz{margin-top:13px} .stnav .stdz::before{content:"";position:absolute;left:12px;right:12px;top:-7px;border-top:1px solid var(--line)} .stnav .stdz:not(.on){color:var(--ink3)} .stnav .stdz:not(.on):hover{color:var(--warn)} .stbody{min-width:0} .stsec[hidden]{display:none} .stsec .card{margin:0 0 12px} .sthd{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;margin:4px 2px 12px} .sthd h2{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.3} .sthd p{color:var(--ink3);font-size:13px} .srow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px 0;border-top:1px solid var(--line)} .srow:first-child{border-top:0;padding-top:0} .srow:last-child{padding-bottom:0} .srow .sl{min-width:0;flex:1 1 220px} .srow .sl b{display:block;font-size:14px;font-weight:500} .srow .sl small{display:block;color:var(--ink3);font-size:12px;line-height:1.5;margin-top:1px} .srow .sc{flex:0 1 auto;min-width:0} .srow.stk .sc{flex:1 1 320px} .srow .seg3{min-width:300px} .srow.stsub{margin-top:14px;padding:12px 0 0;border-top:1px solid var(--line)} .stlang{background:var(--sink);border-radius:10px;padding:3px;gap:0;color:var(--ink3)} .stlang button{font-size:13px;padding:7px 18px;border-radius:8px;opacity:1;color:var(--ink3)} .stlang button:hover{color:var(--ink)} .stlang button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.10),0 0 0 1px var(--line)} .stlinks{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 2px 0} .stlinks .muted{margin-right:4px} .stdanger{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 4%,var(--paper))} .stdanger .chd b{color:var(--warn)} .stdanger .dz{border-color:color-mix(in srgb,var(--warn) 55%,var(--line));color:var(--warn)} .stdanger .dz:hover{background:var(--warn);border-color:var(--warn);color:var(--on-acc)} @media (max-width:760px){ .stw{grid-template-columns:minmax(0,1fr);gap:10px} .stnav{position:relative;top:auto;flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:6px;margin:0 -8px;padding:2px 8px 4px} .stnav::-webkit-scrollbar{display:none} .stnav button{flex:none;height:40px;border-radius:999px;padding:0 14px;background:var(--paper);border:1px solid var(--line);font-size:14px;gap:7px} .stnav button.on{background:var(--ink);border-color:var(--ink)} .stnav .stdz{margin:0 0 0 9px} .stnav .stdz::before{left:-9px;right:auto;top:9px;bottom:9px;border-top:0;border-left:1px solid var(--line)} .sthd{margin:4px 2px 10px} .sthd h2{font-size:18px} .srow .sc,.srow.stk .sc{flex:1 1 100%} .srow .seg3{min-width:0;max-width:none} .stlang{display:flex} .stlang button{flex:1 1 0;min-height:44px} } .fxg{display:flex;flex-direction:column;gap:10px;padding:14px;height:100%} .fxg .chd{flex-wrap:wrap;row-gap:2px} .fxgt{flex:1;min-height:56vh;width:100%;font-family:inherit;font-size:14px;line-height:1.65;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);resize:vertical} #fxibody{padding:0 0 28px;--fxr:#d93a4a;--fxg:#1f9d63;--fxa:#c98a12;--fxb:#3b6fd8;--fxv:#7a55d6;--fxt:#13958f} #fxibody .fxnote{display:none} .fxtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:0 0 16px} .fxtile{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--card,var(--bg))} .fxtile em{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--fxb);background:rgba(59,111,216,.12)} .fxtile b{display:block;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.15} .fxtile span{font-size:13px;color:var(--ink2)} .fxtile.k-no em{color:var(--fxr);background:rgba(217,58,74,.12)} .fxtile.k-no b{color:var(--fxr)} .fxtile.k-pay em{color:var(--fxv);background:rgba(122,85,214,.12)} .fxtile.k-smp em{color:var(--fxt);background:rgba(19,149,143,.12)} .fxig{display:flex;gap:16px;align-items:stretch} .fxcol .fxic{flex:1 1 auto} .fxcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px} @media (max-width:760px){.fxig{flex-direction:column}.fxcol{flex:1 1 auto;width:100%}} /* owner 10-17 sweep: on a phone the side-by-side columns were 109 px wide and the formula pills spilled past the screen */ .fxic{margin:0;padding:18px 20px;--fxk:var(--fxb)} .fxic h3{font-size:18px;font-weight:600;margin:0 0 12px;display:flex;align-items:center;gap:8px} .fxic h3 i{display:block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--fxk)} .fxic.k-no{--fxk:var(--fxr)} .fxic.k-calc{--fxk:var(--fxv)} .fxic.k-cert{--fxk:var(--fxg)} .fxic.k-src{--fxk:var(--fxa)} .fxic.k-smp{--fxk:var(--fxt)} .fxic.k-pay{--fxk:var(--fxv)} ul.fxl{list-style:none;margin:0;padding:0} .fxr{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--ink);padding:9px 0;border-top:1px solid var(--line)} .fxr:first-child{border-top:0} .fxr b{font-weight:600;margin-right:2px} .fxst{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px;background:rgba(127,127,127,.12);color:var(--ink3)} .fxst i{width:6px;height:6px;border-radius:50%;background:currentColor} .fxst b{font-size:13px} .st-ok .fxst{background:var(--fxg);color:#fff} .st-no .fxst{background:var(--fxr);color:#fff} .st-q .fxst{background:var(--fxa);color:#fff} .fxcv{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line);font-size:15px} .fxcv:first-child{border-top:0} .fxcv span{min-width:130px;color:var(--ink2);font-weight:500} .fxcv strong{font-size:20px;font-weight:600} .fxcv small{color:var(--ink2);font-size:13px} .fxcv.q em{font-style:normal;font-size:13px;font-weight:600;color:#fff;background:var(--fxa);padding:3px 10px;border-radius:99px} .fxbars,.fxcalc{margin-top:12px;padding-top:14px;border-top:1px solid var(--line)} .fxbh{font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:10px} .fxbar{display:grid;grid-template-columns:120px 1fr 84px;align-items:center;gap:12px;padding:6px 0;font-size:15px;font-weight:500} .fxbar small{grid-column:2/4;color:var(--ink3);font-size:13px;font-weight:400;margin-top:-4px} .fxbar b{text-align:right;font-weight:600;font-size:16px} .fxbt{position:relative;height:16px;border-radius:99px;background:rgba(127,127,127,.12);overflow:hidden} .fxbt i,.fxbt u{position:absolute;top:0;bottom:0;left:0;border-radius:99px;background:var(--fxb)} .fxbt u{background:rgba(59,111,216,.4);border-radius:0 99px 99px 0} .fxcin{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .fxcin select,.fxcin input{min-height:44px;font-size:15px;border-radius:10px} .fxcin select{flex:1 1 140px;max-width:220px} .fxcin label{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink2)} .fxcin input{width:110px} .fxcout{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px} .fxcout div{border-radius:12px;padding:10px 12px;background:rgba(127,127,127,.08)} .fxcout span{display:block;font-size:13px;color:var(--ink2)} .fxcout b{font-size:18px;font-weight:600;white-space:nowrap} .fxcout .tot2{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:10px} .fxcout .tot2 b{font-size:20px} @media (max-width:520px){.fxcout{grid-template-columns:1fr 1fr}.fxcout .tot{grid-column:1/-1}.fxcout .tot2{flex-direction:column;gap:0}.fxcout .tot2 b{white-space:normal}.fxcin input{width:90px}.fxbar{grid-template-columns:90px 1fr 70px}.fxic{padding:16px}} .fxcout .tot{background:var(--fxb);color:#fff} .fxcout .tot span{color:rgba(255,255,255,.85)} .fxcout .tot2{background:rgba(59,111,216,.12)} .fxeq{padding:10px 0;border-top:1px solid var(--line)} .fxeq:first-child{border-top:0} .fxen{font-size:15px;font-weight:600;margin-bottom:8px} .fxef{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .fxpl{font-size:15px;padding:7px 12px;border-radius:10px;background:rgba(122,85,214,.1)} .fxpl.tot{background:var(--fxv);color:#fff;font-weight:600} .fxop{color:var(--ink3);font-weight:600;font-size:16px} .fxchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px} .fxchip{display:inline-flex;align-items:center;gap:7px;font-size:16px;font-weight:600;padding:9px 14px;border-radius:99px;color:#fff;background:var(--fxr)} .fxpay{display:flex;height:56px;border-radius:14px;overflow:hidden;margin-bottom:10px} .fxpay span{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;color:#fff;background:var(--fxv)} .fxpay span.p1{background:var(--fxb)} .fxpay b{font-size:20px} .bkbox{max-width:1180px;padding:0;display:flex;flex-direction:column;overflow:hidden;height:88vh} .bkbody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(340px,440px) 1fr;overflow:hidden} .bkleft{overflow:auto;padding:14px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:12px} .bkright{display:flex;flex-direction:column;min-height:0} .bkrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .bkrow select{max-width:180px} .bkex{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .bkex span{font-size:12px;color:var(--ink2);background:rgba(127,127,127,.1);border-radius:99px;padding:3px 9px} .bktabs{display:flex;gap:6px;margin-bottom:8px} .bktabs button{min-height:36px;padding:0 12px;border-radius:99px;border:1px solid var(--line);background:none;color:var(--ink2);font-weight:500} .bktabs button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)} .bktabs b{font-weight:600;margin-left:3px} .bktpl input{width:100%;margin-bottom:8px;font-weight:500} .bktpl textarea{width:100%;min-height:300px;font-family:inherit;font-size:14px;line-height:1.6;resize:vertical} .bkhint{font-size:12px;margin-top:6px} .bkprev{border:1px dashed var(--line);border-radius:12px;padding:12px 14px;background:rgba(127,127,127,.04)} .bkph{font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:6px} .bkps{font-weight:600;margin-bottom:8px} .bkpb{white-space:pre-wrap;font-size:14px;line-height:1.6} .bkpsig{font-size:12px;margin-top:8px} .bklh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line)} .bklh .muted{font-size:12px} .bklist{flex:1;overflow:auto;padding:6px 10px 12px} .bkr{display:flex;gap:10px;align-items:flex-start;padding:9px 8px;border-radius:10px;cursor:pointer;border-bottom:1px solid var(--line)} .bkr:hover{background:rgba(127,127,127,.06)} .bkr:not(.on){opacity:.55} .bkr input{margin-top:3px;width:auto;flex:none} .bkm{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0} .bkm b{font-size:14px} .bkm small{flex-basis:100%;color:var(--ink3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bkm i{font-style:normal;font-size:11px;font-weight:500;padding:1px 7px;border-radius:99px;background:rgba(127,127,127,.12);color:var(--ink2)} .bkm i.bkk{background:#3b6fd8;color:#fff} .bkm i.bkq{background:rgba(31,157,99,.14);color:#1f9d63} .bkm i.bkw{background:rgba(201,138,18,.16);color:#a87210} .bkm i.bkv{background:rgba(217,58,74,.13);color:#d93a4a} .bkfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);background:var(--paper)} .bkfoot #bkst{flex:1;font-size:13px} .bkfoot select{max-width:230px} @media (max-width:860px){.bkbox{height:auto}.bkbody{grid-template-columns:1fr;overflow:visible}.bkleft{border-right:0;border-bottom:1px solid var(--line)}.bklist{max-height:none}} #imapbody{padding:0 0 28px} .immap{display:flex;flex-direction:column;gap:14px} .imroute{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:stretch} .imarr{display:grid;place-items:center;color:var(--ink3)} .imz{position:relative;border-radius:20px;padding:16px 18px;border:2px solid transparent;cursor:pointer;background:color-mix(in srgb,var(--zc) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zc) 25%,transparent);transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .imz:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zc) 45%,transparent),0 10px 24px rgba(0,0,0,.08)} .imz.on{border-color:var(--zc)} .imz.empty{opacity:.6} .imzh{display:flex;align-items:center;gap:12px} .imzh>div{flex:1;min-width:0} .imzh b{display:block;font-size:18px;font-weight:600} .imzh small{display:block;font-size:13px;color:var(--ink2);line-height:1.4} .imzh strong{font-size:40px;font-weight:600;line-height:1;color:var(--zc);letter-spacing:-.02em} .imic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--zc)} .imcloud{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px;min-height:46px} .imb{border-radius:50%;border:0;display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;background:var(--zc);cursor:pointer;padding:0;box-shadow:0 0 0 2px var(--paper);transition:transform .15s var(--ease)} .imb:hover{transform:scale(1.15)} .imb.tA{box-shadow:0 0 0 2px var(--paper),0 0 0 4px #d81b60} .imb.tB{box-shadow:0 0 0 2px var(--paper),0 0 0 4px #3b6fd8} .imb.tC{box-shadow:0 0 0 2px var(--paper),0 0 0 4px #8b8f97} .immore{font-size:13px;font-weight:600;color:var(--zc);padding:0 4px} .z-hot .imzh strong{font-size:46px} .imfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:13px;color:var(--ink2)} .imfoot b{color:var(--ink);font-weight:600} .imwait{border:1px solid var(--line);background:none;border-radius:99px;padding:6px 12px;font:inherit;color:inherit;cursor:pointer} .imwait.on{border-color:var(--ink)} .imlist{margin-top:14px} .imlist .chd b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--zc);margin-right:8px;vertical-align:1px} .imrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:10px 4px;cursor:pointer;color:inherit;font:inherit} .imrow:hover{background:rgba(127,127,127,.06)} .imrm{flex:1;min-width:0} .imrm b{font-size:15px} .imrm small{display:block;color:var(--ink3);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .imd{flex:none;font-size:13px;font-weight:600;color:var(--zc)} @media (max-width:900px){.imroute{grid-template-columns:1fr;gap:10px}.imarr{transform:rotate(90deg);height:24px}} /* 메뉴 묶음의 세부 화면 줄 (owner 10-10) */ .nsubw{position:sticky;top:var(--hdrh,58px);z-index:18;background:color-mix(in srgb,var(--wash) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .nsubw.one{display:none} /* owner 10-17: desktop with a mouse, the group screens open from a hover menu under the top bar instead of a second row */ @media (min-width:761px) and (hover:hover){ .nsubw{display:none!important} } .ngch{display:none;margin-left:3px;opacity:.55;vertical-align:1px;transition:transform .2s var(--ease)} @media (min-width:761px) and (hover:hover){ .nin [data-g] .ngch{display:inline-block} .nin [data-g]:not(.ngx) .ngch{display:none} .nin [data-g]:hover .ngch{transform:rotate(180deg)} } .ngdd{position:fixed;z-index:60;min-width:200px;max-width:260px;padding:6px;border-radius:12px;background:var(--paper);border:1px solid var(--line);box-shadow:0 14px 38px rgba(15,23,42,.16),0 2px 6px rgba(15,23,42,.06);display:grid;gap:2px;transform-origin:top left} .ngdd[hidden]{display:none} .ngdd.in{animation:ngddIn .16s var(--out)} @keyframes ngddIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}} .ngdd button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer} .ngdd button:hover,.ngdd button:focus-visible{background:var(--sink)} .ngdd button.on{background:var(--ink);color:var(--paper)} .ngdd button span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ngdd button i{font-style:normal;font-size:12px;font-weight:600;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--pink);color:#fff;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums} .ngdd button i.soft{background:var(--sink);color:var(--ink2)}.ngdd button.on i.soft{background:rgba(255,255,255,.2);color:var(--paper)} @media (prefers-reduced-motion:reduce){.ngdd.in{animation:none}} .nsub{max-width:2400px;margin:0 auto;display:flex;gap:4px;padding:6px 14px;overflow-x:auto;scrollbar-width:none} .nsub::-webkit-scrollbar{display:none} .nsub button{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid transparent;border-radius:99px;background:none;font-size:14px;font-weight:500;color:var(--ink2);cursor:pointer;white-space:nowrap;transition:background-color .18s var(--ease),color .18s var(--ease)} .nsub button:hover{background:var(--soft);color:var(--ink)} .nsub button.on{background:var(--paper);color:var(--ink);border-color:var(--line);box-shadow:0 1px 3px rgba(0,0,0,.08)} .nsub button.gx,.nsub button[hidden]{display:none} @media (max-width:760px){.nsub{padding:6px 10px}.nsub button{height:38px}} .bkview{display:flex;gap:4px;background:var(--soft);border-radius:99px;padding:3px} .bkview button{border:0;background:none;border-radius:99px;padding:6px 14px;font-weight:600;font-size:13px;color:var(--ink2);cursor:pointer} .bkview button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)} .bkhistw{flex:1;overflow:auto;padding:14px 16px} .bkhtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .bkrun{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden} .bkrh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;padding:12px 14px;background:none;border:0;cursor:pointer;text-align:left;color:inherit;font:inherit} .bkrh:hover{background:rgba(127,127,127,.05)} .bkrw{flex:1 1 260px;min-width:0} .bkrw b{font-size:15px} .bkrw small{display:block;font-size:13px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bkchev{font-size:18px;font-weight:600;color:var(--ink3);width:20px;text-align:center} .bkst{font-style:normal;font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;white-space:nowrap} .bkst.s-sent{background:rgba(31,157,99,.14);color:#1f9d63} .bkst.s-wait{background:rgba(59,111,216,.14);color:#3b6fd8} .bkst.s-err{background:rgba(217,58,74,.14);color:#d93a4a} .bkst.s-skip{background:rgba(127,127,127,.14);color:var(--ink2)} .bkri{border-top:1px solid var(--line);padding:4px 14px 8px} .bkrr{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)} .bkrr:last-child{border-bottom:0} .bkrr .bkst{flex:none;min-width:64px;text-align:center} .bkrn{flex:1;min-width:0;background:none;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit;padding:0} .bkrn b{font-size:14px} .bkrn small{display:block;font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bkrt{font-size:12px;flex:none} /* owner 10-10: the language switch lives in 설정. Email and inquiry text sizes; 가-/가+ scales these like every other text (ui: text size) */ .hin .lsw{display:none} html body .mmb,html body .mmtr .mmb{font-size:14px} html body .mms{font-size:13px} html body .mdsum{font-size:13px} html body .iqtx{font-size:13px} html body .iqsum{font-size:13px} html body #mldet textarea,html body #iqdet textarea{font-size:14px} html body .hin .fsz{display:inline-flex;flex:none} @media (max-width:760px){html body .hin .fsz span{display:none}} .bkbody[hidden],.bkfoot[hidden],.bkhistw[hidden]{display:none} .immap>.imz{width:100%;box-sizing:border-box} .imbulk{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;margin-bottom:14px;background:color-mix(in srgb,var(--ok) 8%,transparent);box-shadow:inset 0 0 0 1px rgba(31,157,99,.25)} .imbulk>div{flex:1;min-width:0} .imbulk b{display:block;font-size:16px;font-weight:600} .imbulk small{display:block;font-size:13px;color:var(--ink2);line-height:1.4} .imbi{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:#1f9d63} .imbulk .p{flex:none;min-height:44px} @media (max-width:640px){.imbulk{flex-wrap:wrap}.imbulk .p{width:100%}} .bkrv{padding:4px 2px} .bkrvh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 4px 10px;position:sticky;top:0;background:var(--paper);z-index:1} .bkrvi{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;padding:0 12px} .bkrvi summary{display:flex;align-items:flex-start;gap:10px;padding:10px 0;cursor:pointer;list-style:none} .bkrvi summary::-webkit-details-marker{display:none} .bkrvn{flex:none;width:24px;height:24px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:12px;font-weight:600} .bkrvm{flex:1;min-width:0} .bkrvm b{font-size:14px} .bkrvm small{display:block;font-size:13px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bkrvi .bkpb{padding:0 0 10px 34px} .bkrvi .bkpsig{padding:0 0 12px 34px} .bkfoot .p.bkgo{background:#1f9d63;border-color:#1f9d63} /* 샘플과 결제 (owner 10-10) */ .opq{max-width:220px;height:36px} #t-smp .opwrap,#t-pay .opwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:12px} @media (min-width:1000px){#t-smp .opwrap,#t-pay .opwrap{grid-template-columns:minmax(300px,400px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:var(--ldh,640px);min-height:420px;align-items:stretch}.opback{display:none}} @media (max-width:999px){#t-smp:not(.ldopen) .opdet,#t-pay:not(.ldopen) .opdet{display:none}#t-smp.ldopen .oplist,#t-pay.ldopen .oplist,#t-smp.ldopen .optop,#t-pay.ldopen .optop{display:none}.opq{max-width:none;flex:1}} .oplist{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow-y:auto;align-content:start;display:grid;min-height:0} .opdet{min-width:0;min-height:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column} .opr{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:12px 14px;border-bottom:1px solid var(--line)} .opr:hover{background:var(--wash)} html body .opr.opr:active,html body .opr.opr:not(:disabled):active{transform:none} /* [smplist 10-25] a list row never shrinks when pressed */ .opr.on{background:var(--soft);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 18%,transparent)} .oprt{min-width:0} .oprt b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .oprt small{display:block;font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .oprb{grid-column:1/-1;display:flex;align-items:center;gap:10px} .opst{font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap} .opbar{flex:1;display:flex;gap:3px} .opbar i{flex:1;height:6px;border-radius:3px;background:var(--line)} .opbar i.d{background:#1f9d63} .opbar i.c{background:#3b6fd8} .opnext{grid-column:1/-1;font-size:12px;color:var(--ink2)} .opchip{font-style:normal;font-size:12px;font-weight:600;padding:2px 9px;border-radius:99px;align-self:start;white-space:nowrap;background:rgba(127,127,127,.12);color:var(--ink2)} .opchip.l-late{background:#d93a4a;color:#fff} .opchip.l-today{background:#e0731f;color:#fff} .sbowh{display:flex;align-items:center;gap:6px;padding:8px 12px 4px;font-size:12px;color:var(--ink2)}.sbowh span{font-weight:600;color:var(--ink3)} .sbowd{color:var(--ink3);font-size:12px} .sboab{margin:2px 0 6px}.sboab>summary{cursor:pointer;padding:8px 12px;font-size:12px;color:var(--ink3);list-style:none}.sboab>summary small{margin-left:8px} .sboab .opr.sbow{border-left-color:var(--line)} .opchip.l-soon{background:rgba(59,111,216,.14);color:#3b6fd8} .opdh{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:2} .opdt{flex:1;min-width:0} .opdt b{display:block;font-size:16px} .opdt small{color:var(--ink3);font-size:12px} .opbody{padding:14px 16px;display:flex;flex-direction:column;gap:14px;flex:1} .oprem{display:flex;flex-direction:column;gap:6px} /* 할 일 boxes (owner 10-10: no colored left border): neutral box, the due label is a small tinted pill like .opchip, the amount stays neutral */ .opri{display:flex;gap:10px;align-items:baseline;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);font-size:14px} .opri b{flex:none;font-size:12px;font-weight:600;padding:2px 9px;border-radius:99px;background:rgba(127,127,127,.12);color:var(--ink2);white-space:nowrap} .opri em{font-style:normal;font-weight:600} .opri.l-late b{background:rgba(217,58,74,.13);color:#d93a4a} .opri.l-today b{background:rgba(224,115,31,.14);color:#c25e12} .opri.l-soon b{background:rgba(59,111,216,.13);color:#3b6fd8} .opfxtag{font-size:11px;font-weight:600;color:var(--info);background:color-mix(in srgb,var(--info) 12%,transparent);border-radius:99px;padding:0 5px;margin-left:2px} .opstep{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px} .opstep button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:6px 2px;border-radius:10px;font-size:12px;color:var(--ink3);position:relative} .opstep button:hover{background:var(--wash)} .opstep button[disabled]{cursor:default} .opstep i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:13px;background:var(--soft);color:var(--ink2)} .opstep button.d i{background:#1f9d63;color:#fff} .opstep button.d{color:var(--ink2)} .opstep button.c i{background:#3b6fd8;color:#fff;box-shadow:0 0 0 4px rgba(59,111,216,.18)} .opstep button.c{color:var(--ink);font-weight:600} @media (max-width:620px){.opstep{grid-template-columns:repeat(4,minmax(0,1fr))}} .opact{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .opact .p,.opact .s{min-height:42px} .opdone{padding:10px 14px;border-radius:10px;background:rgba(31,157,99,.1);color:#1f9d63;font-weight:600} /* 환불하고 취소, owner 10-12: 빨간 칩과 상자. 보조 버튼은 빨간 글자만 */ .oprfb{color:#d93a4a;white-space:nowrap} @media (max-width:760px){.opdh .oprfb{padding:7px 10px;font-size:13px}} .oprfc{font-style:normal;font-size:12px;font-weight:600;padding:2px 9px;border-radius:99px;background:rgba(217,58,74,.14);color:#d93a4a;white-space:nowrap} /* 샘플 결제 chip, owner 10-15: green paid, amber 입금 대기, grey 환불됨. The same chip on the 샘플 header and row and in 통합 문의 */ .sppd{display:inline-block;max-width:100%;font-style:normal;font-size:12px;font-weight:600;line-height:1.4;padding:2px 9px;border-radius:99px;overflow-wrap:anywhere;background:color-mix(in srgb,var(--ok) 15%,transparent);color:color-mix(in srgb,var(--ok) 80%,var(--ink))} .sppd.wn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:color-mix(in srgb,var(--warn) 80%,var(--ink))} .sppd.rf{background:rgba(127,127,127,.14);color:var(--ink2)} .oprp{grid-column:1/-1;display:flex;min-width:0;margin-top:-1px} .opdh:has(.opdpd){flex-wrap:wrap;row-gap:8px}.opdpd{flex:1 1 100%;order:9;min-width:0} button.sppd{all:unset;box-sizing:border-box;cursor:pointer;display:inline-block;max-width:100%;font-size:13px;font-weight:600;line-height:1.4;padding:4px 11px;border-radius:99px;overflow-wrap:anywhere;background:color-mix(in srgb,var(--ok) 15%,transparent);color:color-mix(in srgb,var(--ok) 80%,var(--ink))} button.sppd.wn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:color-mix(in srgb,var(--warn) 80%,var(--ink))} button.sppd.rf{background:rgba(127,127,127,.14);color:var(--ink2)} button.sppd:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .sppdr{font-style:normal;font-size:11px;font-weight:600;padding:1px 7px;border-radius:99px;white-space:nowrap;background:color-mix(in srgb,var(--ok) 15%,transparent);color:color-mix(in srgb,var(--ok) 80%,var(--ink))} /* 샘플 주문 card in 통합 문의, owner 10-15 */ .smocd>summary{cursor:pointer;font-size:13px;color:var(--ink2);padding:2px 0 6px;overflow-wrap:anywhere} .smocb{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:8px;background:var(--paper)} .smoch{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}.smoch>b{font-size:13px}.smoch>span{font-size:13px;color:var(--ink2);min-width:0} .smocgo{margin-left:auto;min-height:32px;padding:4px 12px;font-size:13px} .smocl{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}.smocl li{font-size:13px;line-height:1.45;min-width:0;overflow-wrap:anywhere} .smocl li>b{font-weight:600;margin-right:6px}.smocf{color:var(--ink2)}.smocr{display:block;font-size:12px;color:var(--ink3)}.smocr em{font-style:normal;font-weight:500;color:var(--ink2)} @media (max-width:760px){.smocgo{margin-left:0}} .oprf{border:1px solid rgba(217,58,74,.35);border-radius:12px;padding:14px;margin:0 0 14px} .oprf h4{margin-top:0} .oprfr{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px} .oprfr button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:99px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer} .oprfr button.on{background:#d93a4a;border-color:#d93a4a;color:#fff} .oprfw{margin:10px 0 0;padding-left:18px;font-size:13px;color:var(--ink2);line-height:1.6} button.p.oprfgo{background:#d93a4a;border-color:#d93a4a;color:#fff} .oprfd{border:1px solid rgba(217,58,74,.35);background:rgba(217,58,74,.06);border-radius:12px;padding:12px 14px;margin:0 0 14px;display:grid;gap:6px} .oprfh{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .oprfl{font-size:13px;display:flex;gap:8px;flex-wrap:wrap;align-items:center} .oprfl em{font-style:normal;color:var(--ink2);min-width:64px} .oprfm summary{cursor:pointer;font-size:13px;color:var(--ink2);padding:4px 0} .oprfm textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13px;margin:6px 0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);resize:vertical} .opsec{border:1px solid var(--line);border-radius:12px;padding:12px 14px} .smfb{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--sink)}.smfb h4{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}.smfbr{border-top:1px solid var(--line);padding:9px 0 3px}.smfbr:first-of-type{border-top:0}.smfbh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.smfbh b.smfblb{position:static;display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 7px;border-radius:8px;background:var(--ink);color:var(--paper);font-size:13px}.smfbsc{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.smfbsc span{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}.smfbsc span.lo{border-color:#dc2626;color:#b91c1c;background:#fef2f2}.smfbsc span.ok{border-color:#16a34a;color:#166534}.smfbx{font-size:13px;margin:4px 0;padding:6px 9px;border-radius:8px;background:var(--paper);border:1px solid var(--line)}.smfbx.x{border-color:#dc2626;background:#fef2f2;color:#7f1d1d}.smfbt{white-space:pre-wrap;font-size:13px;margin:4px 0}.smfbg{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.smfbc{font-style:normal;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px}.smfbc.yes{background:#dcfce7;color:#166534}.smfbc.changes{background:#fef3c7;color:#92400e}.smfbc.no{background:#fee2e2;color:#991b1b}.smfbc.rx{background:#fee2e2;color:#991b1b}.smfbp{margin-top:10px;padding:10px 12px;border-radius:10px;border:1px dashed var(--line)}.smfbpi{font-size:13px;margin-top:8px}.smfbpi button{margin-top:6px} .opsec h4{font-size:14px;margin:0 0 10px;color:var(--ink2)} .opgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px 12px} .opf{display:flex;flex-direction:column;gap:4px;min-width:0} .opf.w{grid-column:1/-1} .opf span{font-size:12px;color:var(--ink3);font-weight:500} .opf input,.opf select,.opf textarea{width:100%;font:inherit;font-size:14px} .opf textarea{resize:vertical;line-height:1.55} .oplink{display:inline-block;margin:10px 12px 0 0;font-size:13px;font-weight:600;color:var(--brand)} .opnums{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:12px} .opn{border-radius:10px;padding:9px 11px;background:rgba(127,127,127,.07)} .opn span{display:block;font-size:12px;color:var(--ink2)} .opn b{display:block;font-size:16px;font-weight:600} .opn small{font-size:12px;color:var(--ink3)} .opn.pos{background:rgba(31,157,99,.1)} .opn.pos b{color:#1f9d63} .opn.neg{background:rgba(217,58,74,.1)} .opn.neg b{color:#d93a4a} .opsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .ops{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)} .ops:first-child{border-top:0} .opsn{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:13px;background:var(--soft);color:var(--ink2)} .ops.d .opsn{background:#1f9d63;color:#fff} .ops.r .opsn{background:#3b6fd8;color:#fff} .ops.w{opacity:.55} .ops.k{opacity:.6} .ops.k .opsl b{text-decoration:line-through} .opsb{flex:1;min-width:0} .opsl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px} .opsl b{font-size:14px} .opsl em{font-style:normal;font-weight:600;font-size:14px;margin-left:auto} .opsh{display:block;font-size:12px;color:var(--ink3);margin-top:3px} .opsx{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap} .opsx input{flex:1 1 140px;min-width:0;height:34px;font-size:13px} .opsr{flex:none;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:46%} .opsr input[type=date]{height:34px;font-size:13px} .opdir{font-style:normal;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap} .opdir.d-in{background:rgba(31,157,99,.14);color:#1f9d63} .opdir.d-out{background:rgba(217,58,74,.13);color:#d93a4a} .opdir.d-doc{background:rgba(59,111,216,.14);color:#3b6fd8} .opdir.d-task{background:rgba(127,127,127,.14);color:var(--ink2)} .opnote{display:flex;gap:6px;margin-bottom:8px} .opnote input{flex:1} .ople{display:grid;grid-template-columns:auto 1fr auto;gap:10px;font-size:13px;padding:6px 0;border-top:1px solid var(--line)} .ople time{color:var(--ink3);font-size:12px;white-space:nowrap} .ople small{color:var(--ink3)} .ople.n span{font-weight:500} .opfoot{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line);background:var(--paper);z-index:2} .opfoot span{flex:1;font-size:13px} .opfoot .p{min-height:42px;min-width:110px} .optop:empty{display:none} .optop{margin-bottom:12px} .optiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:10px} .fxdrg{border:1px solid color-mix(in srgb,var(--amber,#d97706) 45%,var(--line));background:color-mix(in srgb,var(--amber,#d97706) 7%,var(--paper));border-radius:12px;padding:4px 6px 6px;margin:0 0 10px}.fxdrh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:8px 8px 6px;font-size:13px}.fxdrh b{color:var(--ink)}.fxdrh span{color:var(--ink2)} .ofr{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:8px 0;background:var(--paper)}.ofr.on{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:var(--mint)}.ofrh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}.ofrh b i{font-style:normal;color:var(--ok);margin-left:2px}.ofrh .muted{font-size:13px}.ofrh .s{margin-left:auto;min-height:30px;font-size:12px}.ofri{display:flex;gap:10px;align-items:flex-start;padding:8px 0 4px;border-top:1px solid color-mix(in srgb,var(--ok) 25%,var(--line));margin-top:6px}.ofrt{flex:1;min-width:0}.ofrt b{font-size:14px;color:var(--ink)}.ofrt p{margin:3px 0 2px;font-size:13px;color:var(--ink2);white-space:pre-wrap}.ofrt small{font-size:12px;color:var(--ink3)}.ofra{display:flex;gap:4px;flex:none}.ofra .s{min-height:28px;font-size:12px}.ofrl{display:grid;gap:4px;font-size:13px;color:var(--ink2);margin-top:8px}.ofrl input{font:inherit;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)} .pptop{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:14px 16px;margin-bottom:10px;display:grid;gap:8px}.pphd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}.ppv.muted{font-size:14px;font-weight:500;color:var(--ink3);letter-spacing:0}.pphd .s{min-height:30px;font-size:12px}.ppk{font-size:13px;font-weight:500;color:var(--ink2)}.ppv{font-size:24px;font-weight:600;letter-spacing:-.3px;color:var(--ink);font-variant-numeric:tabular-nums}.pps{font-size:13px;color:var(--ink3)}.ppg{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.ppgl{font-size:12px;color:var(--ink3);min-width:48px}.ppc{display:inline-flex;gap:6px;align-items:baseline;padding:3px 10px;border-radius:999px;background:var(--sink);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}.ppc i{font-style:normal;font-weight:500;color:var(--ink2)}.ppd summary{cursor:pointer;font-size:13px;font-weight:500;color:var(--ink2);min-height:32px;display:flex;align-items:center}.pplist{display:grid;gap:0;margin-top:4px}.pprow{display:grid;grid-template-columns:88px 112px minmax(140px,1fr) minmax(160px,1.4fr) 104px auto;gap:6px 12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13px}.pprow.rf{opacity:.65}.ppdt,.ppref{color:var(--ink2);font-variant-numeric:tabular-nums}.ppwho,.ppln{display:grid;min-width:0}.ppwho b,.ppwho small,.ppln small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ppwho small,.ppln small,.ppam small{color:var(--ink3);font-size:12px}.ppam{font-style:normal;font-weight:600;text-align:right;display:grid;font-variant-numeric:tabular-nums}.ppact{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.ppact .s{min-height:30px;font-size:12px}@media (max-width:900px){.pprow{grid-template-columns:1fr auto}.ppdt,.ppref{grid-column:1}.ppwho,.ppln{grid-column:1/-1}.ppam{grid-row:1;grid-column:2}.ppact{grid-column:1/-1;justify-content:flex-start}}.ppdlg{border:1px solid var(--line);border-radius:14px;padding:18px;max-width:min(460px,calc(100vw - 32px));width:100%;background:var(--paper);color:var(--ink)}.ppdlg h3{margin:0 0 4px}.ppdlg textarea{width:100%;font:inherit;margin:8px 0;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}.ppdlg .row{display:flex;gap:8px;justify-content:flex-end} /* money tiles (owner 10-10: no colored left border): a colored dot before the label says what kind it is, numbers stay neutral */ .optile{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--paper);--k:var(--ink3)} .optile span{display:block;font-size:13px;color:var(--ink2);font-weight:500} .optile>span:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--k);margin-right:7px;vertical-align:1px;box-shadow:0 0 0 3px color-mix(in srgb,var(--k) 16%,transparent)} .optile b{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em} .optile small{font-size:12px;color:var(--ink3)} .optile.k-in{--k:#1f9d63} .optile.k-out{--k:#d93a4a} .optile.k-vat{--k:#7a55d6} .optile.k-doc{--k:#3b6fd8} .opsbw{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:3px} .opsbw em{font-style:normal;font-size:12px;font-weight:600;color:var(--ink2)} .opsbw button{all:unset;box-sizing:border-box;cursor:pointer;font-size:12px;font-weight:600;padding:2px 9px;border-radius:99px;background:var(--lemon);color:var(--lemon-ink)} .opsbw button:hover{filter:brightness(.95)} .opsbw button:focus-visible{outline:2px solid var(--ink);outline-offset:1px} .optodo{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:10px 12px;max-height:230px;overflow-y:auto} .optodoh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px} .optodoh b{font-size:14px} .optodoh .muted{flex:1;font-size:12px} .optd{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%;padding:7px 4px;border-top:1px solid var(--line);font-size:14px} .optd:hover{background:var(--wash)} .optd span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)} .optd em{font-style:normal;font-weight:600} .optdempty{font-size:13px;padding:6px 2px} .opimp{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:rgba(59,111,216,.07);box-shadow:inset 0 0 0 1px rgba(59,111,216,.2)} .opimp>b{font-size:14px;margin-right:6px} .opimpr{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:3px 4px 3px 12px;font-size:13px} .opimpr .s{min-height:30px;padding:0 10px} .opchip.l-ok{background:rgba(31,157,99,.14);color:#1f9d63} .opsb2{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:10px 12px;margin-top:10px} .opsb2 summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;flex-wrap:wrap} .opsb2 summary::-webkit-details-marker{display:none} .opsb2 summary b{font-size:14px} .opsb2 summary .muted{font-size:13px} .opsbr{display:flex;align-items:center;gap:10px;padding:7px 2px;border-top:1px solid var(--line);font-size:14px;flex-wrap:wrap} .opsbr span{flex:1;min-width:120px;color:var(--ink2)} .opsbr small{color:var(--ink3);font-size:12px} .opsbr em{font-style:normal;font-weight:600} a.optd{color:inherit;text-decoration:none} /* owner 10-15: the 샘플 박스 주문 card on the sample page reads as its own block, a black header with white text */ .opsec.sbocard{padding:0;overflow:hidden;border:1px solid #111}.opsec.sbocard>h4{margin:0;padding:12px 16px;background:#111;color:#fff;border-radius:0}.opsec.sbocard>h4 .muted{color:#d6d6d6}.opsec.sbocard>*:not(h4){margin-left:16px;margin-right:16px}.opsec.sbocard>*:last-child{margin-bottom:14px} [data-theme=dark] .opsec.sbocard{border-color:#e9e9e9}[data-theme=dark] .opsec.sbocard>h4{background:#f2f2f2;color:#111}[data-theme=dark] .opsec.sbocard>h4 .muted{color:#555} @media (prefers-color-scheme:dark){:root:not([data-theme=light]) .opsec.sbocard{border-color:#e9e9e9}:root:not([data-theme=light]) .opsec.sbocard>h4{background:#f2f2f2;color:#111}:root:not([data-theme=light]) .opsec.sbocard>h4 .muted{color:#555}} /* 샘플 박스 주문 창 (owner 10-10): 결제, 샘플, 사이트, 통합 문의 어디서든 data-sbo 로 엽니다 */ button.opsbr{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:7px 2px;border-top:1px solid var(--line);font-size:14px;flex-wrap:wrap} button.opsbr:hover{background:var(--wash)} .sbolink{all:unset;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px} .sbolink:hover{text-decoration-color:currentColor} button.oplink{all:unset;cursor:pointer;display:inline-block;margin:10px 12px 0 0;font-size:13px;font-weight:600;color:var(--brand)} .sbobox{max-width:720px;padding:0;display:flex;flex-direction:column;overflow:hidden;max-height:88vh} .sbohd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)} .sbohd .w{flex:1;min-width:0;display:grid;gap:2px} .sbohd b{font-size:15px;font-weight:600} .sbohd small{font-size:12px;color:var(--ink3)} .sbohd .opchip{align-self:center} .sbohd .ico{width:34px;height:34px;padding:0;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center} .sbob{flex:1;min-height:0;overflow:auto;padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px} .sboact{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;padding:12px 14px;border-radius:12px;background:var(--wash);border:1px solid var(--line)} .sboact>p{flex-basis:100%;margin:0;font-size:13px;color:var(--ink2)} .sboact .opf{flex:1;min-width:140px} .sboact .p,.sboact .s{min-height:40px} .sbosub{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto} .sbokv{margin-top:0} .sboaddr{grid-column:1/-1;white-space:pre-line} .sbolinks button.oplink,.sbolinks a.oplink{margin-top:8px} .sbopk{display:grid;gap:8px} .sbopk div{font-size:14px} .sbopk small{display:block;color:var(--ink3);font-size:12px;line-height:1.5;overflow-wrap:anywhere} .sboline{white-space:pre-wrap;font-size:14px;color:var(--ink2);overflow-wrap:anywhere} .sbohist{list-style:none;display:grid;gap:6px;font-size:13px;color:var(--ink2);margin:0;padding:0} .sbohist time{color:var(--ink3);margin-right:8px} .sbohist b{color:var(--ink);margin-right:6px} @media (max-width:760px){.sbobox{max-height:none}.sbohd{padding:12px 14px}.sbob{padding:12px 14px 16px}} .fxpvbox{max-width:880px;padding:0;display:flex;flex-direction:column;overflow:hidden;max-height:88vh} .fxpvb{overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px} .fxpvl{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden} .fxpvr{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-top:1px solid var(--line)} .fxpvr:first-child{border-top:0} .fxpvr:hover{background:var(--wash)} .fxpvr b{font-size:15px} .fxpvr span{font-size:13px;color:var(--ink2)} .fxvabox{max-width:440px} /* 공장 계정으로 열기: account picker */ .fxchbdg{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:var(--pink,#e0245e);color:#fff;font-size:11px;font-weight:600;line-height:1} .fxchbdg.hide{display:none} .fxchbox{max-width:560px;height:min(680px,88vh)} .fxchb{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px;background:var(--wash)} .fxchday{align-self:center;font-size:12px;color:var(--ink3);background:var(--paper);border:1px solid var(--line);padding:1px 10px;border-radius:99px;margin:4px 0} .fxcm{max-width:80%;display:flex;flex-direction:column;align-items:flex-start;gap:3px} .fxcm.me{align-self:flex-end;align-items:flex-end} .fxcm .bb{padding:9px 12px;border-radius:15px;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:5px} .fxcm.me .bb{background:var(--ink);color:var(--paper);border-color:var(--ink);border-bottom-left-radius:15px;border-bottom-right-radius:5px} .fxcm .who{font-size:12px;font-weight:600;color:var(--ink2)}.fxcm .meta{font-size:11px;color:var(--ink3)} .fxcm img{display:block;max-width:220px;max-height:240px;min-width:90px;min-height:70px;border-radius:12px;cursor:pointer;background:var(--paper);object-fit:cover;border:1px solid var(--line)} .fxcm .cfile{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 12px;border-radius:12px;background:var(--paper);border:1px solid var(--line);font-size:13px;overflow-wrap:anywhere} .fxchempty{margin:auto;text-align:center;color:var(--ink3);font-size:13px} .fxchin{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line);background:var(--paper)} .fxchin textarea{flex:1;resize:none;min-height:42px;max-height:130px;margin:0} .fxchatt{display:inline-flex;align-items:center;height:42px} .fxchin .p{height:42px} /* owner 10-10: 결제/샘플 scroll with the page (the panes had a fixed height and blocked the wheel) */ html body #t-smp .opwrap,html body #t-pay .opwrap{height:auto;min-height:0} html body .oplist{max-height:none;overflow:visible} html body .opdet{overflow:visible;overscroll-behavior:auto;min-height:320px} @media (min-width:1000px){html body #t-smp .opwrap,html body #t-pay .opwrap{align-items:start}html body .oplist{position:sticky;top:calc(var(--hdrh,58px) + 60px);max-height:calc(100vh - var(--hdrh,58px) - 80px);overflow-y:auto}} html body .opdh{top:calc(var(--hdrh,58px) + 50px)} .oplink2 h4 .muted{font-weight:500;font-size:13px} .oppk{padding:8px 0;border-top:1px solid var(--line)} .fxorig>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none}.fxorig>summary::-webkit-details-marker{display:none}.fxorig>summary small{color:var(--ink3);font-size:13px} .fxorig>summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(45deg);flex:none}.fxorig[open]>summary::after{transform:rotate(-135deg)} .fxorig[open]>summary{margin-bottom:6px} /* owner 10-15: pressed buttons show they are working; transform and opacity only, a static state under reduced motion */ button.isbusy,button.isdone{position:relative;white-space:nowrap;overflow:hidden}button.isbusy{cursor:progress}button.isbusy[disabled]{opacity:1!important;filter:none!important} button .blab{display:inline-flex;align-items:center;gap:inherit;transition:transform var(--mo-state) var(--mo-ease),opacity var(--mo-state) var(--mo-ease)}button.isbusy .blab,button.isdone .blab{transform:translateX(-8px)}button.bnarrow .blab{transform:none;opacity:0} button .bsp{position:absolute;right:8px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;border:2px solid var(--bc,currentColor);border-right-color:transparent;color:var(--bc,currentColor);animation:bspin .7s linear infinite;font-style:normal}button.bnarrow .bsp{right:50%;margin-right:-6px} button .bsp.bok{border:0;width:auto;height:auto;margin-top:-.6em;line-height:1.2;font-size:12px;font-weight:600;animation:bokin var(--mo-state) var(--mo-ease)}button.bnarrow .bsp.bok{margin-right:-.35em} button.isbad{animation:shake 360ms var(--mo-ease)} @keyframes bspin{to{transform:rotate(360deg)}}@keyframes bokin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}} #fxlist{position:relative;transition:opacity var(--mo-state) var(--mo-ease)}#fxlist.lbusy{opacity:.6} #fxlist.lbusy::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;background:var(--c-blue);transform-origin:0 50%;animation:lbar 1.1s var(--mo-ease) infinite} @keyframes lbar{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(.85);opacity:1}100%{transform:scaleX(1);opacity:0}} #fxdet.fxin>*{animation:fxin var(--mo-state) var(--mo-ease) both}@keyframes fxin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .fxsk{padding:4px 0}.fxsk ui-skc{margin-top:12px} @media (prefers-reduced-motion:reduce){button .bsp{animation:none;border-right-color:currentColor;opacity:.45}button .bsp.bok,button.isbad,#fxdet.fxin>*{animation:none}#fxlist.lbusy::before{animation:none;transform:none;opacity:.6}} .mlchip.asgesc{color:var(--c-red);border-color:var(--c-red);font-weight:600;margin-left:4px}.mlchip.asgesc.mine{color:var(--ink3);border-color:var(--line)}.asgwrap{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}.asgesn{font-size:13px;color:var(--c-red);font-weight:600}.asgescb{white-space:nowrap} .fxshhint{margin:0 0 8px;color:var(--c-blue);font-size:13px;font-weight:600}.fxshrel{margin:0 0 12px;padding:10px 12px 2px;border:1px dashed var(--line);border-radius:12px}.fxshrel.on{border-style:solid}.fxshrel.made{border-style:solid;border-color:var(--c-blue)}.fxshrel .fxshmade{color:var(--c-blue);font-weight:600}.fxshrel .fxshr{margin:0 0 8px}.fxshrel .fxthumbs{margin:0 0 8px}.fxshr{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 10px}.fxshr span{display:grid;gap:2px}.fxshr small{color:var(--ink2);font-size:13px}.fxshr.recv{margin-top:14px}.fxshrecv{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)} .mlchip.fxcnt{color:var(--c-blue);border-color:var(--c-blue);font-weight:600;margin-left:6px;vertical-align:middle}.mlchip.fxcnt.prod{color:var(--ok);border-color:var(--ok)}.mlchip.fxcnt.big{font-size:13px} /* 처방 종류 chips [smplist 10-25]: 기존처방 green, 맞춤 수정 blue, 샘플 매칭 purple, 커스텀 pink */ .smpft{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}.smpft.big{margin-top:6px} .ftc{display:inline-flex;align-items:center;gap:4px;padding:1px 8px 1px 6px;border-radius:99px;font-style:normal;font-size:12px;font-weight:600;line-height:19px;white-space:nowrap;border:1px solid} .smpft.big .ftc{font-size:13px;line-height:22px;padding:1px 10px 1px 7px}.ftc b{font-weight:600} .ftc.lib{color:#157a3c;background:#ecf8f0;border-color:#9fd8b4}.ftc.adj{color:#2456b8;background:#eaf1fd;border-color:#a9c2f0}.ftc.match{color:#6b3fc4;background:#f2ecfd;border-color:#c9b4f0}.ftc.custom{color:#b0306b;background:#fdecf4;border-color:#efb1cd} [data-theme=dark] .ftc.lib{color:#6ee7a0;background:#13281b;border-color:#2c6b43}[data-theme=dark] .ftc.adj{color:#93b6ff;background:#142139;border-color:#2e4f8c}[data-theme=dark] .ftc.match{color:#c4a8ff;background:#22173a;border-color:#4e3a85}[data-theme=dark] .ftc.custom{color:#ff9cc8;background:#331726;border-color:#7a3358} @media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ftc.lib{color:#6ee7a0;background:#13281b;border-color:#2c6b43}:root:not([data-theme=light]) .ftc.adj{color:#93b6ff;background:#142139;border-color:#2e4f8c}:root:not([data-theme=light]) .ftc.match{color:#c4a8ff;background:#22173a;border-color:#4e3a85}:root:not([data-theme=light]) .ftc.custom{color:#ff9cc8;background:#331726;border-color:#7a3358}} /* 샘플 목록 [smplist 10-25]: 결제일 on the right of the name, the next step with its due chip, day dividers, the sort menu */ .opr.smpr{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:12px 16px} .smpd{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;white-space:nowrap}.smpd b{font-size:13px;font-weight:600;color:#1f9d63}.smpd small{font-size:12px;color:var(--ink3);font-weight:500} .smpd.wn b{color:#e0731f}.smpd.rf b{color:var(--ink3);text-decoration:line-through}.smpd.none b{color:var(--ink3);font-weight:600} .smpnx{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;font-size:13px;color:var(--ink2)}.smpnx>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smpnx .opchip{align-self:center} .smpday{position:sticky;top:0;z-index:1;padding:6px 16px 5px;font-size:12px;font-weight:600;color:var(--ink3);background:color-mix(in srgb,var(--paper) 92%,var(--ink) 4%);border-bottom:1px solid var(--line);letter-spacing:.02em} .mlhead select.opsort,#smpsort{flex:0 0 auto;width:auto;max-width:180px;} .opsort{flex:none;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer} /* Claude 점검 [cscan 10-25]: the bar on top of a sample and the chip on the 샘플 list */ .cscb{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;padding:10px 14px;border-radius:12px;border:1px solid #f5c48a;background:#fff4e6}.cscb.ok{border-color:#9fd8b4;background:#ecf8f0} .cscI{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f59e0b;color:#1a1300;font-weight:600;font-size:13px;margin-top:1px}.cscb.ok .cscI{background:var(--ok,#15803d);color:#fff} .cscT{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0;flex:1}.cscT b{font-size:14px}.cscT .muted{font-size:13px}.cscS{flex-basis:100%;font-size:13px;color:var(--ink2);line-height:1.5} .cscN{flex-basis:100%;font-size:13px}.cscN summary{cursor:pointer;color:var(--ink2);font-weight:500}.cscN ul{margin:4px 0 0;padding-left:18px;color:var(--ink2);line-height:1.55} .cscc{display:inline-block;margin-left:6px;padding:0 6px;border-radius:99px;font-style:normal;font-size:11px;font-weight:600;line-height:17px;vertical-align:middle;border:1px solid #f0b866;color:#a35c00;background:#fff4e6}.cscc.ok{border-color:#9fd8b4;color:#157a3c;background:#ecf8f0} [data-theme=dark] .cscb{background:#2e2213;border-color:#6b4a1f}[data-theme=dark] .cscb.ok{background:#13281b;border-color:#2c6b43}[data-theme=dark] .cscc{background:#2e2213;border-color:#6b4a1f;color:#fbbf24}[data-theme=dark] .cscc.ok{background:#13281b;border-color:#2c6b43;color:#6ee7a0} .sship{margin:0 0 16px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}.sship:not(.done){border-color:color-mix(in srgb,var(--pink) 40%,var(--line))}.sshh{display:flex;align-items:center;gap:8px}.sshh b{font-size:16px;font-weight:600}.sshtag{font-size:12px;font-weight:500;padding:2px 8px;border-radius:999px;background:var(--wash);color:var(--ink2)}.sshtag.go{background:var(--pink);color:#fff}.sshsub{margin:4px 0 12px;color:var(--ink2);font-size:14px}.sshco{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.sshco button{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer}.sshco button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}.sshf{display:grid;grid-template-columns:1fr 180px;gap:8px;margin-bottom:12px}.sshf label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink2)}.sshf input{height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font:inherit;font-size:16px;min-width:0}.sshf input[data-sshno]{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.02em}.sshbtns{display:flex;gap:8px}.sshbtns .p{height:44px;padding:0 20px}.sshsum{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}.sshno{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:16px}.sshsum .s{margin-left:auto}.sshnote{margin:8px 0 0;font-size:13px}@media (max-width:600px){.sshf{grid-template-columns:1fr}} @media (prefers-color-scheme:dark){:root:not([data-theme=light]) .cscb{background:#2e2213;border-color:#6b4a1f}:root:not([data-theme=light]) .cscb.ok{background:#13281b;border-color:#2c6b43}:root:not([data-theme=light]) .cscc{background:#2e2213;border-color:#6b4a1f;color:#fbbf24}:root:not([data-theme=light]) .cscc.ok{background:#13281b;border-color:#2c6b43;color:#6ee7a0}} /* 빠진 정보 점검 (owner 10-15): the card, and the ! marker on the 샘플 list, the sample header and the 공장 job row */ .sckm{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:6px;border-radius:50%;background:#f59e0b;color:#1a1300;font-style:normal;font-size:12px;font-weight:600;line-height:1;vertical-align:middle}.sckm.late{background:var(--c-red);color:#fff}.sckm.rep{background:var(--c-blue);width:10px;height:10px}.sckm.big{width:20px;height:20px;font-size:13px}.sckm.rep.big{width:12px;height:12px} .opsec.sck{background:#fff4e6;border-color:#f5c48a}[data-theme=dark] .opsec.sck{background:#2e2213;border-color:#6b4a1f}.sck .sckit,.sck .scktag{border-color:#f0d3ad}[data-theme=dark] .sck .sckit,[data-theme=dark] .sck .scktag{border-color:#5a4126}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .opsec.sck{background:#2e2213;border-color:#6b4a1f}:root:not([data-theme=light]) .sck .sckit,:root:not([data-theme=light]) .sck .scktag{border-color:#5a4126}} .sck h4{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sck h4 .muted{font-weight:500;font-size:13px}.sck h4 button{margin-left:auto} .sckgrp{margin-top:8px}.sckgrp h5{font-size:13px;font-weight:600;margin:0 0 4px}.sckgrp h5 span{font-weight:500;color:var(--ink3);margin-left:4px}.sckgrp.must h5{color:var(--c-red)}.sckgrp.nice h5{color:var(--warn)} .sckit{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:0;padding:7px 0;border-top:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink);text-transform:none;letter-spacing:0;cursor:pointer}.sckit input{flex:none;margin:0;transform:translateY(2px)}.sckit>span{color:var(--ink2);flex:1 1 200px} .scktag{font-style:normal;font-size:12px;font-weight:600;padding:1px 7px;border-radius:99px;border:1px solid var(--line);color:var(--ink2)}.scktag.wait{border-color:var(--warn);color:var(--warn)} .sckact{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}.sckact .muted{font-size:13px}.sckok{color:var(--ok);font-weight:600;margin-top:6px} .scked{display:grid;gap:8px;margin-top:10px}.scked textarea{width:100%;box-sizing:border-box;font:inherit;font-size:14px;line-height:1.55;padding:10px 12px;resize:vertical}.scked input{width:100%;box-sizing:border-box} .scksug{margin:6px 0 4px;padding:10px 12px;border:1px solid var(--c-blue);border-radius:12px}.scksug h5{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--c-blue)}.sckg{display:grid;gap:3px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}.sckg:first-of-type{border-top:0}.sckg s{color:var(--ink3)}.sckg q{color:var(--ink2);font-size:13px}.sckga{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px} .effw{margin:8px 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}.effw h5{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0 0 4px;font-size:14px;font-weight:600}.effw h5 small{font-weight:500;font-size:12px}.effit{padding:8px 0;border-top:1px solid var(--line)}.effit:first-of-type{border-top:0}.effhd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-bottom:4px;font-size:14px}.effhd span{color:var(--ink2);font-size:13px}.effdl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:3px 12px;margin:0;font-size:14px}.effdl dt{color:var(--ink3);font-weight:500}.effdl dd{margin:0;white-space:pre-line;overflow-wrap:anywhere}.effjob{padding-top:8px;border-top:1px solid var(--line)}.efftag{display:inline-block;font-style:normal;font-size:11px;font-weight:600;line-height:1.5;padding:0 6px;border-radius:99px;border:1px solid var(--warn);color:var(--warn);margin-left:6px;white-space:nowrap;cursor:help;vertical-align:1px}.efftag.mail{border-color:var(--c-blue);color:var(--c-blue)}.opraw{margin-top:6px}.opraw>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink2);padding:4px 0} .sckauto{margin:6px 0 4px;padding:10px 12px;border:1px solid var(--ok);border-radius:12px}.sckauto h5{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--ok)}.sckauto h5 span{font-weight:500;color:var(--ink3);margin-left:4px}.sckauto .sckg{grid-template-columns:minmax(0,1fr) auto;column-gap:10px}.sckauto .sckg>*{grid-column:1}.sckauto .sckg>.sckga{grid-column:2;grid-row:1/span 3;align-self:center;margin:0}.opsec.sck .scktag.auto{border-color:var(--ok);color:var(--ok)}.opsec.sck .scktag.hold{border-color:var(--warn);color:var(--warn)} .mlchip.fxdupb{color:var(--c-red);border-color:var(--c-red);font-weight:600}.fxdupbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:10px 0;padding:10px 14px;border:1px solid var(--c-red);border-radius:12px;color:var(--ink)}.fxdupbar b{color:var(--c-red)}.fxdupbar span{flex:1;min-width:200px} .fxrfi{padding:10px 0;border-top:1px solid var(--line)}.fxrfi:first-of-type{border-top:0}.fxrfh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.fxrfh small{color:var(--ink3);font-size:13px}.fxrfh .lt{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:99px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:600} .fxrft{width:100%;border-collapse:collapse;font-size:14px}.fxrft th{text-align:left;font-size:12px;color:var(--ink3);font-weight:600;padding:4px 8px 4px 0}.fxrft td{padding:6px 8px 6px 0;border-top:1px solid var(--line);vertical-align:top}.fxrft tr.add td{background:var(--mint)} .fxrfb{display:inline-block;font-style:normal;font-size:12px;font-weight:600;padding:1px 7px;border-radius:99px;margin-right:6px;border:1px solid currentColor}.fxrfb.add{color:var(--ok)}.fxrfb.chg{color:var(--warn)}.fxrfb.drop{color:var(--c-red)}.fxrfb.miss{color:var(--ink3)} .fxrfn{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:14px}.fxrfn li.drop b{text-decoration:line-through} .fxrfx{display:grid;gap:4px;margin-top:8px;font-size:14px}.fxrfx em{font-style:normal;color:var(--ink3);font-weight:600;margin-right:8px}.fxrfx s{color:var(--ink3);margin-right:6px}.fxrfx span{margin-right:6px;color:var(--ink3)} .fxrfl{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:13px;color:var(--ink3)} @media (max-width:640px){.fxrft th:nth-child(2),.fxrft td:nth-child(2){display:none}}.fxorig .opsec{margin:0;border:0;padding:0}.fxorigb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}.fxorigb small{color:var(--ink3);font-size:13px} .oppk:first-of-type{border-top:0} .oppk>b{font-size:15px} .oppk>small{display:block;color:var(--ink2);font-size:13px} .opfm{margin:6px 0 0 10px} .opfm>span{font-size:14px;font-weight:600} .opings{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px} .opings i{font-style:normal;font-size:12px;padding:2px 8px;border-radius:99px;background:rgba(31,157,99,.1);color:#17784c} /* owner 10-15: the dark mode ingredient chips at AA, the 샘플 card and 원본 문의 share them; light mode unchanged */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .opings i{background:rgba(63,203,140,.16);color:#7ee8b3}} :root[data-theme="dark"] .opings i{background:rgba(63,203,140,.16);color:#7ee8b3} .opbrief{display:flex;flex-wrap:wrap;gap:6px 12px;margin:6px 0 0 10px;font-size:13px;color:var(--ink2)} .opbrief em{font-style:normal;font-weight:600;color:var(--ink3)} .opnote2{margin-top:8px;padding:8px 10px;border-radius:10px;background:rgba(127,127,127,.07);font-size:14px;white-space:pre-wrap} .opnote2 em{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--ink3)} .opmeta{margin-top:8px;font-size:13px;color:var(--ink3)} .opsec h4 .s{float:right;min-height:30px;padding:0 10px;font-size:13px} .opiqr{padding:8px 0;border-top:1px solid var(--line)} .opiqr:first-of-type{border-top:0} .opiqr b{font-size:14px} .opiqr small{display:block;font-size:12px;color:var(--ink3)} .opiqr p{margin:4px 0 0;font-size:13px;color:var(--ink2);white-space:pre-wrap} /* 소싱 (owner 10-10): 1688 용기, 포장재 구매와 중국 담당자. 목록과 상세는 샘플, 결제와 같은 모양, 클래스는 sx 로 시작 */ :root{--sxtop:calc(var(--hdra,58px) - var(--hrow1,0px) + 47px)} #t-sxi,#t-sxs,#t-sxl,#t-sxb{overflow-x:clip} .sxhd .opq{flex:1 1 180px;max-width:240px} .sxhd .mlseg,.sxsegw{max-width:100%;overflow-x:auto;scrollbar-width:none} .sxhd .mlseg::-webkit-scrollbar,.sxsegw::-webkit-scrollbar{display:none} .sxsegw{margin:0 0 10px} .sxsegw .mlseg{width:max-content} .sxhd .opasg{flex:none} .sxtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px} .sxtile{all:unset;box-sizing:border-box;cursor:pointer;display:grid;align-content:start;gap:1px;min-width:0;min-height:64px;border:1px solid var(--line);border-radius:14px;padding:10px 14px;background:var(--paper);--k:var(--ink3)} .sxtile:hover{background:var(--wash)} .sxtile:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .sxtile span{font-size:13px;font-weight:500;color:var(--ink2);overflow-wrap:anywhere} .sxtile>span:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--k);margin-right:7px;vertical-align:1px;box-shadow:0 0 0 3px color-mix(in srgb,var(--k) 16%,transparent)} .sxtile b{font-size:20px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere} .sxtile small{font-size:12px;color:var(--ink3);overflow-wrap:anywhere} .sxtile.k-go{--k:#3b6fd8}.sxtile.k-sh{--k:#7a55d6}.sxtile.k-owe{--k:#e0731f}.sxtile.k-mo{--k:#1f9d63}.sxtile.hot{--k:#d93a4a} .sxwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:12px} @media (min-width:1000px){.sxwrap{grid-template-columns:minmax(320px,420px) minmax(0,1fr);align-items:start}.sxback{display:none!important} .sxlist{position:sticky;top:calc(var(--sxtop) + 10px);max-height:calc(100vh - var(--sxtop) - 24px);overflow-y:auto;overscroll-behavior:contain}} @media (max-width:999px){section:not(.ldopen)>.sxwrap>.sxdet{display:none}section.ldopen>.sxwrap>.sxlist,section.ldopen>.sxhide{display:none!important} section.ldopen>.sxwrap>.sxdet{animation:sxIn var(--dur-panel,280ms) var(--ease-panel,ease) backwards}} @keyframes sxIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}} .sxlist{background:var(--paper);border:1px solid var(--line);border-radius:14px;display:grid;align-content:start;min-width:0} .sxlist>.ldempty{border:0} .sxdet{min-width:0;min-height:320px;background:var(--paper);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column} .sxdet>.opdh{top:var(--sxtop);border-radius:14px 14px 0 0} .sxdet .opsec>h4,.opsec.sxlk>h4,#sxmbox .opsec>h4{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px} .sxdet .opsec>h4 .s,.opsec.sxlk>h4 .s,#sxmbox .opsec>h4 .s{float:none;margin-left:auto} .sxdet .opfoot{border-radius:0 0 14px 14px} .sxr{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:3px 12px;align-items:start;padding:11px 14px;border-bottom:1px solid var(--line);min-width:0} .sxr:last-child{border-bottom:0} .sxr:hover{background:var(--wash)} .sxr.on{background:var(--soft);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 18%,transparent)} .sxr:focus-visible{outline:2px solid var(--brand);outline-offset:-2px} .sxth{grid-row:1/span 3;position:relative;width:44px;height:44px;border-radius:10px;background:var(--sink);display:grid;place-items:center;overflow:hidden;color:var(--ink3)} .sxth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sxth svg{width:20px;height:20px} .sxck{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--paper) 55%,transparent);color:transparent} .sxck::before{content:"";width:20px;height:20px;border-radius:6px;border:2px solid var(--ink3);background:var(--paper);box-sizing:border-box} .sxr.pk .sxck::before{border-color:var(--brand);background:var(--brand)} .sxr.pk .sxck::after{content:"";position:absolute;width:10px;height:5px;border-left:2.5px solid var(--brand-ink);border-bottom:2.5px solid var(--brand-ink);transform:translateY(-1px) rotate(-45deg)} .sxrt{min-width:0} .sxrt b{display:block;font-size:15px;line-height:1.35;overflow-wrap:anywhere} .sxrt small{display:block;font-size:12px;line-height:1.45;color:var(--ink3);overflow-wrap:anywhere} .sxrr{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:0} .sxrr time{font-size:12px;color:var(--ink3);white-space:nowrap} .sxrb{grid-column:2/-1;display:flex;align-items:center;gap:8px;min-width:0} .sxrb .opst{font-size:13px} .sxrm{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:4px;min-width:0} .sxk{font-style:normal;font-size:12px;font-weight:600;padding:1px 8px;border-radius:99px;white-space:nowrap;background:rgba(127,127,127,.12);color:var(--ink2)} .sxk.smp{background:rgba(59,111,216,.13);color:#3b6fd8} .sxk.bulk{background:rgba(122,85,214,.14);color:#7a55d6} .sxk.lnk{background:var(--lemon);color:var(--lemon-ink)} .sxk.sup{background:transparent;box-shadow:inset 0 0 0 1px var(--line);font-weight:500} .sxk.st-me{background:#d93a4a;color:#fff}.sxk.st-cn{background:rgba(224,115,31,.14);color:#c4600f}.sxk.st-go{background:rgba(59,111,216,.14);color:#3b6fd8}.sxk.st-ok{background:rgba(31,157,99,.14);color:#1f9d63}.sxk.st-off{background:rgba(127,127,127,.14);color:var(--ink3)} .opbar i.h{background:var(--ink3)} .opstep.sxst{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding:2px 0} .opstep.sxst::-webkit-scrollbar{display:none} .opstep.sxst button{flex:1 0 58px;min-width:58px;font-size:12px;line-height:1.3} .sxside{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:9px 12px;border-radius:10px;background:var(--wash);border:1px solid var(--line);font-size:14px;--k:var(--ink3)} .sxside b{font-weight:600;flex:1 1 auto} .sxside b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--k);margin-right:8px;vertical-align:1px} .sxside.hold{--k:#e0731f} .sxside.cancel{--k:#d93a4a} .sxbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .sxbar .s,.sxbar .p,.sxbar a.s{min-height:38px;display:inline-flex;align-items:center;gap:6px;text-decoration:none} .sxbar .sp{flex:1} .sxbar svg{width:15px;height:15px;flex:none} .sx1688{background:#ff6a00!important;border-color:#ff6a00!important;color:#fff!important} .sx1688:hover{filter:brightness(.95)} .sxph{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px} .sxfb{padding:10px 0;border-top:1px solid var(--line)}.sxfb:first-of-type{border-top:0;padding-top:2px}.sxfbh{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.sxfbc{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}.sxfb .sxph{margin-top:8px} .sxph button,.sxph label{all:unset;box-sizing:border-box;cursor:pointer;position:relative;aspect-ratio:1;border-radius:10px;background:var(--sink);overflow:hidden;display:grid;place-items:center;color:var(--ink3);font-size:12px;font-weight:600;text-align:center} .sxph button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sxph label{border:1.5px dashed var(--line);background:transparent;gap:2px;align-content:center} .sxph label:hover{border-color:var(--ink3);color:var(--ink2)} .sxph label input{position:absolute;width:1px;height:1px;opacity:0} .sxph .sxpx{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;font-size:15px;line-height:1} .sxhint{display:grid;gap:4px;margin-top:10px;padding:9px 12px;border-radius:10px;background:var(--lemon);color:var(--lemon-ink);font-size:13px;line-height:1.5} .sxhint b{font-size:13px} .sxcats{display:flex;flex-wrap:wrap;gap:6px} .sxcats button{all:unset;box-sizing:border-box;cursor:pointer;min-height:34px;padding:0 13px;border-radius:99px;border:1px solid var(--line);background:var(--paper);font-size:13px;font-weight:500;color:var(--ink2);display:inline-flex;align-items:center} .sxcats button:hover{border-color:var(--ink3);color:var(--ink)} .sxcats button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)} .sxcats button:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .sxpaste{width:100%;min-height:64px;font-family:inherit!important;font-size:14px!important;line-height:1.5!important} .sxparse{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:6px;font-size:13px;color:var(--ink3);min-width:0} .sxparse.ok{color:#1f9d63} .sxparse.bad{color:#d93a4a} .sxparse a{font-weight:600;color:var(--brand);overflow-wrap:anywhere} .sxparse code{font-size:13px;padding:1px 6px;border-radius:6px;background:var(--sink);color:var(--ink2)} .sxkind{display:inline-flex;gap:3px;background:var(--sink);border-radius:11px;padding:3px} .sxkind button{all:unset;cursor:pointer;box-sizing:border-box;min-height:34px;padding:0 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink2);display:inline-flex;align-items:center} .sxkind button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)} .sxkind button:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .sxkv{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px} .sxkv span{display:grid;gap:1px;min-width:0;padding:8px 11px;border-radius:10px;background:rgba(127,127,127,.07);font-size:14px;font-weight:600;overflow-wrap:anywhere} .sxkv small{font-size:12px;font-weight:500;color:var(--ink3)} .sxkv span.w{grid-column:1/-1;font-weight:500;white-space:pre-wrap} .sxkv span.pos{background:rgba(127,127,127,.07);color:var(--ink)} .sxkv span.pos>small::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#1f9d63;margin-right:6px;vertical-align:1px} .sxkv span.big{font-size:18px} .sxkv em{font-style:normal;font-size:12px;font-weight:500;color:var(--ink3)} .sxgo{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .sxgo .p,.sxgo .s{min-height:40px} .sxlinks{display:flex;flex-wrap:wrap;gap:6px} .sxlinks button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:99px;border:1px solid var(--line);font-size:13px;font-weight:500;max-width:100%} .sxlinks button:hover{border-color:var(--ink3)} .sxlinks button small{font-size:12px;color:var(--ink3);font-weight:500;overflow-wrap:anywhere} .sxlinks button{text-align:start} .sxchat{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;background:var(--wash);margin-bottom:8px} .sxchat .fxcm{max-width:86%} .sxchat .bb{cursor:pointer} .sxchat .fxcm .meta{display:flex;gap:6px;flex-wrap:wrap;font-size:12px} .sxchat .fxcm .meta i{font-style:normal;color:var(--info)} .sxchat .sxsys{align-self:center;font-size:12px;color:var(--ink3);text-align:center} .sxcin{display:flex;gap:8px;align-items:flex-end} .sxcin textarea{flex:1;min-height:42px;max-height:130px;resize:none;font-family:inherit;font-size:14px;line-height:1.45} .sxcin .p{min-height:42px} .sxmore{all:unset;cursor:pointer;align-self:center;font-size:13px;font-weight:600;color:var(--ink2);padding:4px 10px;border-radius:99px} .sxmore:hover{background:var(--soft)} .sxsel{position:sticky;top:var(--sxtop);z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;margin-bottom:10px;border-radius:12px;background:var(--ink);color:var(--paper)} .sxsel b{font-size:14px;margin-right:auto} .sxsel .s{background:transparent;color:var(--paper);border-color:color-mix(in srgb,var(--paper) 35%,transparent);min-height:36px} .sxsel .p{background:var(--paper);color:var(--ink);min-height:36px} .sxsel button[disabled]{opacity:.45;cursor:default} .sxstars{display:inline-flex;gap:2px} .sxstars button{all:unset;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;font-size:20px;line-height:1;color:var(--line)} .sxstars button.on{color:#e3a008} .sxstars span{font-size:13px;letter-spacing:1px;color:#e3a008} .sxled{display:grid;gap:12px} .sxowe{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:14px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--line)} .sxowe>span{display:grid;gap:1px} .sxowe small{font-size:13px;font-weight:500;color:var(--ink2)} .sxowe b{font-size:24px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .sxowe em{font-style:normal;font-size:13px;color:var(--ink3)} .sxowe .p{margin-left:auto;min-height:42px} .sxtbl{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden} .sxtbl h4{display:flex;align-items:center;gap:8px;font-size:14px;margin:0;padding:11px 14px;color:var(--ink2);border-bottom:1px solid var(--line)} .sxtbl h4 .muted{font-weight:500;font-size:13px} .sxtbl h4 .s{margin-left:auto;min-height:32px;padding:0 10px;font-size:13px} .sxlr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);font-size:14px;cursor:pointer} .sxtbl h4+.sxlr{border-top:0} .sxlr:hover{background:var(--wash)} .sxlr input[type=checkbox]{width:20px;height:20px;margin:0;accent-color:var(--brand);cursor:pointer} .sxlr .w{min-width:0} .sxlr .w b{display:block;overflow-wrap:anywhere} .sxlr .w small{display:block;font-size:12px;color:var(--ink3);overflow-wrap:anywhere} .sxlr em{font-style:normal;font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .sxlr em small{display:block;font-size:12px;font-weight:500;color:var(--ink3)} .sxlr.none{cursor:default;grid-template-columns:1fr;color:var(--ink3)} .sxlr.none:hover{background:none} .sxform{display:grid;gap:10px;padding:12px 14px;border-top:1px solid var(--line);background:var(--wash)} .sxform .opgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .sxform .sxbar{justify-content:flex-end} .sxaddr{display:grid;gap:8px} .sxaddr .card2{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;padding:10px;border:1px solid var(--line);border-radius:12px;position:relative} .sxaddr .card2 label{display:grid;gap:3px;font-size:12px;font-weight:500;color:var(--ink3);margin:0} .sxaddr .card2 label.w{grid-column:1/-1} .sxaddr .card2 textarea{font-family:inherit;font-size:14px;line-height:1.5;min-height:58px} .sxaddr .card2 .s{justify-self:start} .sxaddr .card2 [data-sxaddel],.sxaddr .card2 [data-sxacdel]{position:absolute;top:6px;right:6px;width:32px;height:32px;min-height:0;padding:0;display:grid;place-items:center;font-size:18px;line-height:1;border-radius:9px} .sxaddr .card2:has([data-sxaddel]),.sxaddr .card2:has([data-sxacdel]){padding-right:44px} .sxempty2{padding:18px 16px;font-size:14px;color:var(--ink3)} .sxempty2 b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px} .hvsrc .hmch{margin-bottom:8px} .hvsrc:empty{display:none} .hvsrcl{display:flex;flex-wrap:wrap;gap:6px} .hvsrcl button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:5px;min-height:36px;padding:7px 11px;border-radius:10px;background:var(--wash);border:1px solid var(--line);font-size:13px;color:var(--ink2)} .hvsrcl button em{font-style:normal;font-weight:600;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums} .hvsrcl button.hot::before{content:"";align-self:center;width:7px;height:7px;border-radius:50%;background:#d93a4a;box-shadow:0 0 0 3px rgba(217,58,74,.16)} .hvsrcl button:hover{border-color:var(--ink3)} .hvsrcl button:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .sxlk{margin-top:2px} .sxlk .sxr{border:1px solid var(--line);border-radius:12px;margin-top:6px} .sxsh{display:none} .opst.sxt-st-me{color:#d93a4a}.opst.sxt-st-ok{color:#1f9d63}.opst.sxt-st-off{color:var(--ink3)}.opst.sxt-st-go{color:#3b6fd8} .sxlinks a{box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:99px;border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink);text-decoration:none;max-width:100%} .sxlinks a:hover{border-color:var(--ink3)} .sxlinks svg{width:13px;height:13px;flex:none} .sxlinks span.nolk{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:99px;background:var(--wash);font-size:13px;font-weight:500} .sxlinks span.nolk small{font-size:12px;color:var(--ink3);font-weight:500} a.sx1688,button.sx1688{color:#fff!important} .sxwcb svg{width:15px;height:15px;flex:none} .sxdet>.opdh .sxwcb{display:inline-flex;align-items:center;gap:6px;min-height:36px} .sxmuted{margin:8px 0 0;font-size:13px;color:var(--ink3);line-height:1.5} .sxnote{margin:0 0 8px;font-size:14px;white-space:pre-wrap} .sxhist summary{list-style:none;cursor:pointer;display:flex;align-items:center} .sxhist summary::-webkit-details-marker{display:none} .sxhist summary h4{margin:0;flex:1} .sxhist summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform var(--dur-state,.18s) var(--ease)} .sxhist[open] summary::after{transform:rotate(-135deg);margin-top:4px} .sxhist[open] summary{margin-bottom:8px} .sxmorebar{padding-top:2px} .sxrev{display:grid;gap:8px;margin-top:10px} .sxrev textarea{font-family:inherit;font-size:14px;line-height:1.5;min-height:64px} .sxphc{grid-template-columns:repeat(auto-fill,minmax(72px,96px));width:100%} .sxmbox{max-width:640px;padding:0;display:flex;flex-direction:column;overflow:hidden} .sxmh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)} .sxmh b{flex:1;min-width:0;font-size:15px;font-weight:600} .sxmh .ico{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1} .sxmb{flex:1;min-height:0;overflow:auto;padding:14px 16px;display:grid;gap:10px;align-content:start} .sxmf{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line)} .sxmf .p,.sxmf .s{min-height:42px} .sxwct{white-space:pre-wrap;font-size:14px;line-height:1.6;padding:12px;border-radius:12px;background:var(--wash);border:1px solid var(--line);max-height:48vh;overflow:auto;-webkit-user-select:text;user-select:text;overflow-wrap:anywhere} .sxwarn{padding:9px 12px;border-radius:10px;background:var(--lemon);color:var(--lemon-ink);font-size:13px;line-height:1.5} .sxk.st-bad{background:#d93a4a;color:#fff} .sxav{background:hsl(var(--h,220) 45% 90%);color:hsl(var(--h,220) 45% 30%);font-weight:600;font-size:15px} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sxav{background:hsl(var(--h,220) 30% 25%);color:hsl(var(--h,220) 80% 82%)}} :root[data-theme="dark"] .sxav{background:hsl(var(--h,220) 30% 25%);color:hsl(var(--h,220) 80% 82%)} .sxib{display:inline-flex;align-items:center;gap:6px;position:relative} .sxib .fxchbdg{margin-left:2px} .sxacct{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px} .sxacct span{flex:1 1 200px} .sxfset{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} .sxfset label{display:grid;gap:3px;font-size:12px;font-weight:500;color:var(--ink3);margin:0} .sxissb{border:1px solid var(--line);background:var(--paper);border-radius:14px;padding:8px 10px;margin-bottom:12px;display:grid;gap:2px} .sxissh{display:flex;align-items:center;gap:8px;padding:2px 4px 4px} .sxissh b{font-size:14px} .sxissh .hmlk{margin-left:auto} .sxissr{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 6px;border-radius:10px;font-size:14px;min-height:40px} .sxissr:hover{background:var(--paper)} .sxissr span{min-width:0;overflow-wrap:anywhere;color:var(--ink2)} .sxissr time{font-size:12px;color:var(--ink3)} .sxtest{display:grid;gap:6px} .sxck2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:7px 0;border-top:1px solid var(--line)} .sxck2:first-child{border-top:0} .sxck2>b{font-size:14px;font-weight:500} .sxck2 input{grid-column:1/-1;font-size:14px;padding:6px 10px} .sxtri{display:inline-flex;gap:3px;background:var(--sink);border-radius:9px;padding:2px} .sxtri button{all:unset;cursor:pointer;box-sizing:border-box;min-width:40px;min-height:32px;padding:0 8px;border-radius:7px;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink3)} .sxtri button[aria-pressed="true"].ok{background:#1f9d63;color:#fff} .sxtri button[aria-pressed="true"].no{background:#d93a4a;color:#fff} .sxtri button[aria-pressed="true"].na{background:var(--paper);color:var(--ink)} .sxverd{display:flex;flex-wrap:wrap;gap:6px} .sxverd button{all:unset;cursor:pointer;box-sizing:border-box;min-height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--line);font-size:14px;font-weight:600} .sxverd button[aria-pressed="true"].pass{background:#1f9d63;border-color:#1f9d63;color:#fff} .sxverd button[aria-pressed="true"].fail{background:#d93a4a;border-color:#d93a4a;color:#fff} .sxverd button[aria-pressed="true"].cond{background:#e0731f;border-color:#e0731f;color:#fff} .sxverd button[aria-pressed="true"].testing{background:var(--ink);border-color:var(--ink);color:var(--paper)} .sxterms{display:grid;gap:6px;padding:10px 12px;border-radius:12px;background:var(--paper);border:1px solid var(--line)} .sxterms>b{font-size:13px;color:var(--ink)} .sxterms>b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#1f9d63;margin-right:7px;vertical-align:1px;box-shadow:0 0 0 3px rgba(31,157,99,.16)} .sxlog{padding:9px 0;border-top:1px solid var(--line);display:grid;gap:5px} .sxlog:first-of-type{border-top:0} .sxlogh{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink3)} .sxlogh .s{margin-left:auto;min-height:30px;padding:0 10px;font-size:12px} .sxlogt{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;cursor:pointer;line-height:1.55} .sxlog .sxkv span{padding:6px 9px;font-size:13px} .sxpin{color:#e3a008} .sxcands{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:10px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity} .sxcand{scroll-snap-align:start;border:1px solid var(--line);border-radius:14px;padding:10px;display:grid;gap:6px;align-content:start;background:var(--paper);min-width:0;position:relative} .sxcand.win{background:color-mix(in srgb,#1f9d63 5%,var(--paper));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#1f9d63 45%,transparent)} .sxcand .sxth{width:100%;height:112px;grid-row:auto;border-radius:10px} .sxcadd svg{width:26px;height:26px} .sxcand .sxth svg{width:28px;height:28px} .sxcand>b{font-size:14px;line-height:1.35;overflow-wrap:anywhere} .sxcand>small{font-size:12px;color:var(--ink3)} .sxcand dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:13px} .sxcand dt{color:var(--ink3);font-size:12px} .sxcand dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums} .sxcand dd.best{color:#1f9d63} .sxcand .sxbar .s,.sxcand .sxbar .p{flex:1 1 auto;justify-content:center;min-height:36px} .sxwin{position:absolute;top:8px;left:8px;z-index:2} .sxcadd{all:unset;box-sizing:border-box;cursor:pointer;border:1.5px dashed var(--line);border-radius:14px;display:grid;place-items:center;align-content:center;gap:4px;min-height:180px;color:var(--ink3);font-size:13px;font-weight:600;text-align:center;padding:10px} .sxcadd:hover{border-color:var(--ink3);color:var(--ink2)} .sxsupc{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px} .sxsupc>span{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px;border-radius:10px;background:rgba(127,127,127,.07);font-size:14px} .sxsupc>span small{display:block;font-size:12px;color:var(--ink3);font-weight:500} .sxsupc>span>div{flex:1;min-width:0;overflow-wrap:anywhere} .sxsupc .s{min-height:32px;padding:0 10px;font-size:13px;flex:none} .sxqr{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px} .sxqr button{all:unset;cursor:pointer;width:132px;height:132px;border-radius:12px;background:#fff;border:1px solid var(--line);overflow:hidden;display:grid;place-items:center} .sxqr button img{width:100%;height:100%;object-fit:contain} .sxchain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:6px 0 2px} .sxchain>div{position:relative;display:grid;align-content:start;gap:1px;padding:8px 8px 7px;border-radius:10px;background:rgba(127,127,127,.06);min-width:0;min-height:58px;--k:var(--line)} .sxchain>div b{font-size:13px} .sxchain>div b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--k);margin-right:6px;vertical-align:1px} .sxchain>div small{font-size:12px;color:var(--ink3);overflow-wrap:anywhere} .sxchain>div em{font-style:normal;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .sxchain>div.d{--k:#1f9d63} .sxchain>div.c{--k:#3b6fd8;background:var(--soft);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 18%,transparent)} .sxchain>div.l{--k:#d93a4a;background:var(--soft);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#d93a4a 45%,transparent)} .sxfund{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:12px 14px;display:grid;gap:8px} .sxfundh{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .sxfundh b{font-size:15px} .sxfundh em{font-style:normal;font-weight:600;font-size:15px;margin-left:auto;font-variant-numeric:tabular-nums} .sxsug{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 14px;border-radius:14px;background:var(--paper);border:1px solid var(--line)} .sxsug>div{flex:1 1 220px;display:grid;gap:1px;min-width:0} .sxsug b{font-size:16px;overflow-wrap:anywhere} .sxsug b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#e0731f;margin-right:8px;vertical-align:2px;box-shadow:0 0 0 3px rgba(224,115,31,.16)} .sxsug small{font-size:13px;color:var(--ink2)} .sxsug .p{min-height:42px} .sxml{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:8px 14px;border-top:1px solid var(--line);font-size:14px} .sxml time{font-size:12px;color:var(--ink3);white-space:nowrap} .sxml span{min-width:0;overflow-wrap:anywhere} .sxml em{font-style:normal;font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .sxml em.in{color:#1f9d63}.sxml em.out{color:var(--ink)} .sxml a{color:inherit;text-decoration:none} .sxml a:hover{text-decoration:underline} .sxsupc a.s,.sxsupc a{text-decoration:none} .sxsupc a:not(.s){color:var(--ink)} .sxml small{grid-column:2/-1;font-size:12px;color:var(--ink3)} .sxpack{width:100%;border-collapse:collapse;font-size:13px} .sxpack th,.sxpack td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top} .sxpack th{background:var(--wash);font-size:12px} .sxpack td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .sxpack input{width:100%;min-width:64px;padding:4px 6px;font-size:13px;border:1px solid var(--line);border-radius:6px;background:var(--paper)} .sxpack td.n,.sxpack th.n{width:1%} .sxpack td.n input{width:92px} .sxpack td.hs input{width:96px} .sxgo a.s,.opact a.s{display:inline-flex;align-items:center;gap:6px;text-decoration:none;min-height:38px} .sxpackp{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;font-size:13px} .sxpackp>div{padding:8px 10px;border:1px solid var(--line);border-radius:10px;white-space:pre-wrap} .sxpackp small{display:block;font-size:12px;font-weight:600;color:var(--ink3)} .sxtabs{display:inline-flex;gap:3px;background:var(--sink);border-radius:11px;padding:3px} .sxtabs button{all:unset;cursor:pointer;box-sizing:border-box;min-height:34px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink2);display:inline-flex;align-items:center} .sxtabs button[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)} .sxtpl{display:flex;flex-wrap:wrap;gap:6px} .sxtpl button{all:unset;cursor:pointer;box-sizing:border-box;min-height:34px;padding:0 12px;border-radius:99px;border:1px solid var(--line);font-size:13px;font-weight:500} .sxtpl button:hover{border-color:var(--ink3)} .sxhelpout{white-space:pre-wrap;font-size:15px;line-height:1.6;padding:12px;border-radius:12px;background:var(--wash);border:1px solid var(--line);min-height:56px;-webkit-user-select:text;user-select:text} .sxgcb{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--wash);overflow:auto;flex:1;min-height:240px;max-height:56vh} /* 글자 크기 120% 넘게 (html.tz-l): 칸 수를 줄이고 글이 잘리지 않게 */ @media (min-width:761px){.tz-l .sxtiles{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}} .tz-l .sxchain{grid-template-columns:repeat(2,minmax(0,1fr))} .tz-l .sxcands{grid-auto-columns:minmax(260px,1fr)} .tz-l .sxkv{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))} .tz-l .opstep.sxst button{flex-basis:72px;min-width:72px} .tz-l .sxissr{grid-template-columns:auto minmax(0,1fr) auto} .tz-l .sxissr>b{grid-column:2} .tz-l .sxissr>span{grid-column:1/-1;grid-row:2} @media print{body.sxprint>*:not(#sxmodal){display:none!important}body.sxprint #sxmodal{position:static;display:block;background:none;padding:0}body.sxprint .sxmbox{box-shadow:none;border:0;max-height:none;overflow:visible;max-width:none}body.sxprint .sxmh,body.sxprint .sxmf{display:none}body.sxprint .sxmb{overflow:visible}} @media (max-width:760px){ :root{--sxtop:calc(var(--hdra,58px) - var(--hrow1,0px) + 51px)} .sxlg{display:none}.sxsh{display:inline} .sxdet>.opdh .sxwcb span{display:none} .sxdet>.opdh .sxwcb{width:42px;min-height:42px;justify-content:center;padding:0} .sxmorebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .sxmorebar .s{justify-content:center} .sxlinks a,.sxlinks span.nolk{min-height:38px} #sxmodal.sheet{align-items:flex-end} #sxmodal.sheet .mbox{height:auto;max-height:90vh;border-radius:18px 18px 0 0;animation:sheetUp var(--dur-panel,280ms) var(--ease-panel,ease) backwards} .sxmh{padding-top:max(12px,env(safe-area-inset-top))} #sxmodal.sheet .sxmh{padding-top:12px} .sxmh .ico{width:42px;height:42px} .sxhd{gap:8px;margin-bottom:10px} .sxhd .mlttl{flex:1 1 auto;min-width:0} .sxhd .mlttl .muted{display:none} .sxhd>.p,.sxhd>.s{order:1;flex:none;min-height:40px} .sxhd .sxib span:not(.fxchbdg){display:none} .sxhd .sxib{width:42px;justify-content:center;padding:0} .sxhd .opq{order:3;flex:1 1 120px;min-width:0;max-width:none;height:auto;font-size:16px} .sxhd>.mlttl{order:0} .sxhd>#sxpick,.sxhd .opasg{order:2} .sxhd .mlseg{order:4;flex:1 1 100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);overflow:visible} .sxsegw{overflow:visible} .sxsegw .mlseg{width:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .sxhd .mlseg button,.sxsegw .mlseg button{box-sizing:border-box;min-height:38px;justify-content:center;padding:4px 4px;font-size:13px;gap:0 4px;white-space:normal;flex-wrap:wrap;text-align:center;line-height:1.2} .tz-l .sxtiles .sxtile{grid-column:span 3} .tz-l .sxsegw .mlseg{grid-template-columns:repeat(2,minmax(0,1fr))} .sxtiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px} .sxtile{grid-column:span 2;padding:8px 10px;border-radius:12px} .sxtile.k-owe,.sxtile.k-mo{grid-column:span 3} .sxtile b{font-size:18px} .sxtiles.n3 .sxtile{grid-column:span 2} .sxtiles.n4 .sxtile{grid-column:span 3} .sxchain{grid-template-columns:repeat(2,minmax(0,1fr))} .sxtri button{min-width:44px;min-height:38px} .sxissr{grid-template-columns:auto minmax(0,1fr) auto;row-gap:2px} .sxissr>b{grid-column:2} .sxissr>span{grid-column:1/-1;grid-row:2} .sxcands{grid-auto-columns:minmax(200px,78%)} .sxr{padding:11px 12px;gap:3px 10px} .sxdet>.opdh{padding:8px 10px;gap:8px} .sxdet .opbody{padding:12px 10px;gap:12px} .sxdet .opsec{padding:12px} .sxdet .opgrid,.sxform .opgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end} .sxdet .opf.w2{grid-column:1/-1} .sxdet .opf input,.sxdet .opf textarea,.sxdet .opf select,.sxform input,.sxform textarea,.sxpaste,.sxcin textarea,.sxaddr input,.sxaddr textarea{font-size:16px!important} .opstep.sxst button{flex:0 0 64px} .sxbar .s,.sxbar .p,.sxbar a.s,.sxgo .p,.sxgo .s{min-height:40px} .sxbar{gap:6px} .sxcats button,.sxkind button,.sxlinks button{min-height:38px} .sxph{grid-template-columns:repeat(4,minmax(0,1fr))} .sxchat .fxcm{max-width:92%} .sxsel{top:var(--sxtop)} .sxsel b{flex:1 1 100%} .sxsel .s,.sxsel .p{flex:1 1 auto;min-height:40px} .sxlr{padding:10px 12px} .sxowe b{font-size:22px} .sxowe .p{flex:1 1 100%;margin-left:0} .sxstars button{width:36px;height:36px} .sxdet .opfoot{padding:8px 12px calc(8px + env(safe-area-inset-bottom))} .sxdet .opfoot .s,.sxdet .opfoot .p{min-height:42px} } /* [unslop 11-02] batch-label figures: one mono for codes, counts and dates; tabular numbers everywhere */ body{font-variant-numeric:tabular-nums} .cpr,.bdg,.mono,code,kbd{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace} kbd{display:inline-block;min-width:18px;padding:0 4px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;font-size:11px;line-height:16px;text-align:center;color:var(--ink2);background:var(--paper)} :focus-visible{outline:2px solid var(--pink);outline-offset:2px} /* ===== mobile pass B, 10-10 (account B subagent): 샘플, 결제, 공장, 공장 정보, 방문자, 분석, AI 통계, 사이트, 설정, 지식베이스, 위젯 설정 ===== */ /* bug fixes at every width */ /* the factory job form fields have no type attribute, so the shared field look never reached them (raw 22px boxes) */ .fxl input:not([type]){width:100%;min-width:0;padding:8px 11px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:9px;outline:0;font:inherit;font-weight:400;font-size:14px;line-height:1.4} .fxl input:not([type]):focus{border-color:var(--brand)} /* date fields in 샘플 and 결제 had the raw browser look */ .opf input[type=date],.opsr input[type=date]{padding:7px 10px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:9px;outline:0;font:inherit;font-size:14px;min-height:38px} .opf input[type=date]{width:100%} .opf input[type=date]:focus,.opsr input[type=date]:focus{border-color:var(--brand)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .opf input[type=date],:root:not([data-theme="light"]) .opsr input[type=date]{color-scheme:dark}} :root[data-theme="dark"] .opf input[type=date],:root[data-theme="dark"] .opsr input[type=date]{color-scheme:dark} /* the hint under + 항목 더 보기 ran past the button on narrow screens */ .fxmore,.fxmore small{white-space:normal} .fxmore{height:auto} /* chat boxes wrote in the code font */ .fxchin textarea,.fxmin textarea{font-family:inherit;font-size:14px;line-height:1.45} /* 샘플 and 결제 have no sub menu row, so the sticky detail header sits right under the top bar (it left a 50px gap) */ html body #t-smp .opdh,html body #t-pay .opdh{top:calc(var(--hdrh,58px) - var(--hrow1,0px))} /* 방문자 detail: the long 이건 나예요 button was squeezed into a third of the row and its text spilled out */ #vsdet .lddx .acts{display:flex;flex-wrap:wrap} #vsdet .lddx .acts>*{flex:1 1 auto} /* mobile: ops (샘플, 결제, 샘플 박스 주문 창) */ @media (max-width:999px){ #t-smp.ldopen .mlhead,#t-pay.ldopen .mlhead{display:none} /* list, then detail with its 목록 button */ } @media (max-width:760px){ #t-smp .mlhead,#t-pay .mlhead,#t-fx .mlhead{gap:8px;margin-bottom:10px} #t-smp .mlttl,#t-pay .mlttl{flex:1 1 auto;min-width:0} #t-smp .mlttl .muted,#t-pay .mlttl .muted,#t-fx .mlttl .muted{display:none} #t-smp .mlhead>[data-opnew],#t-pay .mlhead>[data-opnew]{order:1;flex:none} #t-smp .opq,#t-pay .opq{order:2;flex:1 1 100%;max-width:none;height:auto} #t-smp .mlseg,#t-pay .mlseg,#t-fx .mlseg{order:3;flex:1 1 100%} #t-smp .mlseg button,#t-pay .mlseg button,#t-fx .mlseg button{box-sizing:border-box;min-height:38px} #t-smp .opdh,#t-pay .opdh{padding:8px 10px;gap:8px} .opdt b{font-size:15px;line-height:1.3} .opbody{padding:12px 10px;gap:12px} .opsec{padding:12px} .opgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end} .opgrid>.opf:has(> input[list]){grid-column:1/-1} .opf{margin:0} .opf span{font-size:13px} .opf input,.opf textarea,.opsx input,.opnote input,.opf input[type=date],.opsr input[type=date]{font-size:16px} .opstep button{font-size:12px} .opchip,.opdir,.opn small,.sbokv small{font-size:12px} .opbody .iqmore{font-size:13px;min-height:36px;display:inline-flex;align-items:center} .ople{gap:8px} .ople small,.ople time{font-size:12px} .opsec h4 .s{min-height:36px} button.oplink,a.oplink{min-height:36px;display:inline-flex;align-items:center} .opfoot{padding:8px 12px calc(8px + env(safe-area-inset-bottom))} /* money steps: the buttons and fields of an open step go under its title, full width */ .ops{flex-wrap:wrap;column-gap:10px} .ops.r .opsb,.ops.d .opsb,.ops.k .opsb{flex:1 1 calc(100% - 38px)} .ops.r .opsr,.ops.d .opsr,.ops.k .opsr{flex:1 1 100%;max-width:none;justify-content:flex-start;padding-left:38px} .opsx input{flex:1 1 130px;height:auto;min-height:40px} .ops.w .opsr{display:none} /* the dimmed row already says it waits for the step above */ /* 받을 돈 tiles and 다가오는 할 일 */ .optiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .optile{padding:10px 12px} .optile b{font-size:18px} .opsbw button{min-height:36px;display:inline-flex;align-items:center} .optodo{max-height:none;overflow:visible} .optodoh .muted{display:none} .optodoh .s{margin-left:auto} .optd{flex-wrap:wrap;row-gap:2px;padding:8px 4px} .optd b{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .optd span{flex:1 1 100%;order:5;white-space:normal} .opsb2 summary{min-height:36px} .opimpr .s{min-height:36px} /* 샘플 박스 주문 창 */ .sbohd{padding-top:max(12px,env(safe-area-inset-top))} .sboact .opf{min-width:120px} .sbohd .ico,#t-fx .mdh .ico{width:42px;min-width:42px} } /* mobile: factory (공장 tab, 공장 화면 미리보기, 공장 채팅, 공장 정보) */ @media (max-width:760px){ #t-fx .mlttl{flex:1 1 50%;min-width:0} #t-fx #fxnew{order:1;flex:none} #t-fx #fxmemo{display:none} /* same as the 공장 정보 menu right above */ #t-fx #fxpview,#t-fx #fxchatbtn,#t-fx #fxviewas{order:2;flex:1 1 40%;min-width:0;padding:0 8px} #t-fx .mlchip,.fxtag{font-size:12px} #t-fx .cstp li{font-size:12px} #t-fx .mdh{padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top))} #t-fx.ldopen .mldet{padding-bottom:env(safe-area-inset-bottom)} .fxc{margin:10px 10px 0;padding:12px} label.fxl>span{font-size:12px} .fxl input,.fxl input:not([type]),.fxl textarea,.fxmin textarea,.fxchin textarea{font-size:16px} #t-fx time,.fxmore small{font-size:12px} .fxgrid.fxpr{grid-template-columns:minmax(0,1fr) 96px} .fxgrid.fxpr>.fxl:nth-child(3){grid-column:1/-1} .fxf small,.fxms{font-size:12px} #fxpvmodal .mbox,#fxchmodal .mbox{max-height:none;height:100%;border-radius:0} #fxvamodal{align-items:flex-end} #fxvamodal .mbox{height:auto;max-height:80vh;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom)} /* 공장 계정으로 열기: a bottom sheet, only as tall as the list */ #fxchmodal .mbox{padding-bottom:0} #fxpvmodal .fbbar,#fxchmodal .fbbar{flex-wrap:nowrap;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top))} #fxpvmodal .fbhd,#fxchmodal .fbhd{flex-direction:column;align-items:flex-start;gap:1px} #fxpvmodal .fbhd .muted,#fxchmodal .fbhd .muted{font-size:12px;line-height:1.35} #fxpvmodal .fbbar .s,#fxchmodal .fbbar .s{flex:none} .fxpvb{padding:12px 10px} .fxchin{padding:8px 10px calc(8px + env(safe-area-inset-bottom))} .fxcm{max-width:88%} .fxcm .who,.fxcm .meta,.fxchday{font-size:12px} /* 공장 정보: four headline numbers in a 2 x 2 grid, calculator fields side by side */ .fxtiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px} .fxtile{padding:10px;gap:8px;border-radius:14px} .fxtile em{width:30px;height:30px;border-radius:9px} .fxtile b{font-size:18px;white-space:nowrap} .fxtile span{font-size:13px} .fxtile>div{min-width:0} .tz-l .fxtile em{display:none} .tz-l .fxtile b{white-space:normal;overflow-wrap:anywhere} #t-fxi .mlhead{flex-wrap:nowrap;align-items:flex-start;gap:10px} #t-fxi .mlttl{flex:1 1 auto;min-width:0} .fxcin select{flex:1 1 100%;max-width:none} .fxcin label{flex:1 1 0;min-width:0} .fxcin input{width:100%;min-width:0;font-size:16px} .fxgt{font-size:16px} } /* mobile: 방문자, AI 통계, 사이트 */ @media (max-width:760px){ #t-vis .ldact{width:auto;margin-left:auto} #t-vis .ltags .tag{font-size:12px;padding:2px 7px} #vsdet .kv>b,#vsdet .lsec>h4{font-size:13px} #vsdet small{font-size:12px} #vsdet .kv a{display:inline-block;padding:6px 0;margin:-6px 0} #t-vis .ldc .tm small,#t-site .ldc .tm small{font-size:12px} #t-dash .kpis{gap:8px} #t-dash .kpi{padding:11px 12px} #t-dash .kpi dt{font-size:12px;letter-spacing:.02em;margin-bottom:4px} #t-dash .kpi dd small{font-size:12px;margin-top:3px} #t-dash th,#t-dash td{padding:8px 8px} #t-dash th{font-size:12px} #t-dash td[colspan]{white-space:normal} #t-dash tr>:first-child:not([colspan]){position:sticky;left:0;z-index:1;background:var(--paper)} /* the row name stays while the numbers scroll */ #svtools input[type=search]{flex:1 1 0} #svf{flex:0 0 auto;width:auto;max-width:44%} #t-site .svsub button{height:auto;min-height:38px} #t-site .svsub button .c,#t-site .hmchips i,#t-site .svkv small,#t-site .svfs b small,#t-site .svq .tot small{font-size:12px} #t-site .svteam{font-size:12px} #t-dash .bx span{font-size:12px} } /* mobile: 설정, 지식베이스, 위젯 설정 */ @media (max-width:760px){ #t-set label,#t-cfg label{font-size:13px} #t-set .sw small,#t-set .srow .sl small,#t-cfg .sw small{font-size:12px} #t-set textarea,#t-kb textarea,#t-cfg textarea{font-size:16px} #t-set .hmp{min-height:36px} #stcf small,#stsys small{font-size:12px} #t-set .pre-ed .pv{font-size:12px} #users li,#fxusers li{flex-wrap:wrap;row-gap:6px} #users li>span:first-child,#fxusers li>span:first-child{flex:1 1 auto} #users li>span:last-child,#fxusers li>span:last-child{flex:0 0 auto;max-width:100%;margin-left:auto} #t-kb .kbstat span{font-size:12px} #t-kb .kbh .cnt{font-size:12px} #t-kb .kbtop .chk{min-height:40px} #t-kb .kbbody textarea,#t-cfg textarea{font-family:inherit;line-height:1.55} #t-cfg .row:has(#c_bottom),#t-cfg .row:has(#c_brand){grid-template-columns:repeat(2,minmax(0,1fr))} #c_offgreet{min-height:110px!important} } /* ===== mobile pass A, 10-10 (account B subagent): global shell, 통합 문의, 메일 지도, 이메일, 실시간 상담, 채팅 요청, tier rows ===== */ /* tier rows, owner 10-10. No left stripe (owner: the stripe looked "goofy and vibe coded"): the row's avatar or initials circle takes the tier color, the A/B/C pill sits by the name and the whole row gets a very faint tint. Reusable: class "tier-row t-A" on any row */ :root{--tier-S:#7c3aed;--tier-A:#d81b60;--tier-B:#2563eb;--tier-C:#64748b;--tier-D:#8a7f74;--tier-mix:4%;--tier-ink:#fff} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tier-S:#a78bfa;--tier-A:#f0679a;--tier-B:#6f9dff;--tier-C:#9aa6b8;--tier-D:#b3a89c;--tier-mix:7%;--tier-ink:#111}} :root[data-theme="dark"]{--tier-S:#a78bfa;--tier-A:#f0679a;--tier-B:#6f9dff;--tier-C:#9aa6b8;--tier-D:#b3a89c;--tier-mix:7%;--tier-ink:#111} .tier-row.t-S{--tierc:var(--tier-S)}.tier-row.t-A{--tierc:var(--tier-A)}.tier-row.t-B{--tierc:var(--tier-B)}.tier-row.t-C{--tierc:var(--tier-C)}.tier-row.t-D{--tierc:var(--tier-D)} .tier-row.tier-row.t-S,.tier-row.tier-row.t-A,.tier-row.tier-row.t-B,.tier-row.tier-row.t-C{background-color:color-mix(in srgb,var(--tierc) var(--tier-mix),var(--paper))} .tier-row.tier-row.t-S:hover,.tier-row.tier-row.t-A:hover,.tier-row.tier-row.t-B:hover,.tier-row.tier-row.t-C:hover{background-color:color-mix(in srgb,var(--tierc) calc(var(--tier-mix) + 4%),var(--paper))} .tier-row .iqav2,.tier-row .av,.tier-row>.em,.tier-row .ldav{background:var(--tierc)!important;color:var(--tier-ink)!important;border-color:transparent!important} /* the open row: a stronger tint and a dark ring, so it never looks like just another tinted row */ .tier-row.tier-row.on.t-S,.tier-row.tier-row.on.t-A,.tier-row.tier-row.on.t-B,.tier-row.tier-row.on.t-C{background-color:color-mix(in srgb,var(--tierc) calc(var(--tier-mix) * 3),var(--paper));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ink) 70%,transparent)} .tier-row.tier-row.bkr.on{background-color:color-mix(in srgb,var(--tierc) var(--tier-mix),var(--paper));box-shadow:none} /* checked, not opened */ .tier-row.mli.on:before{display:none} .tier-row.ri.on::after{display:none} .tier-row.bkr:not(.on){opacity:.7} .imb.tS{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--tier-S)}.imb.tA{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--tier-A)}.imb.tB{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--tier-B)}.imb.tC{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--tier-C)} .tierb.t-S{background:var(--tier-S)}.tierb.t-A{background:var(--tier-A)}.tierb.t-B{background:var(--tier-B)}.tierb.t-C{background:var(--tier-C)}.tierb.t-D{background:var(--tier-D)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tierb{color:#111}} :root[data-theme="dark"] .tierb{color:#111} /* 통합 문의 detail: 원하는 것 is a summary panel, 기록 is the message history below a clear divider (owner 10-10) */ #iqdet .iqcard{background:var(--wash);border:1px solid var(--line);border-radius:14px;padding:0 14px 12px;box-shadow:none} #iqdet .iqcard>h4{margin:0 -14px 10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--sink);border-radius:13px 13px 0 0;color:var(--ink);font-size:14px;font-weight:600} #iqdet .iqcard>h4 svg{color:var(--pink);width:16px;height:16px} #iqdet .iqcard .iqfx{border-top:1px solid var(--line)} #iqdet .iqcard .iqfx h5{white-space:nowrap} .cstp li{word-break:keep-all} #iqdet .iqtlsec{margin-top:22px;padding-top:0;border-top:0} #iqdet .iqtlsec>h4{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 12px} #iqdet .iqtlsec>h4::after{content:"";flex:1 1 auto;height:2px;border-radius:2px;background:var(--line)} #iqdet .iqtlsec>h4 svg{color:var(--ink2);width:16px;height:16px} /* owner 10-13: the email part starts with a band; our emails sit on the right like a chat, the customer's on the left */ #iqdet .iqtlsec{margin-top:6px} #iqdet .iqtlsec>h4.iqtlh{margin:0 -14px 12px;padding:9px 14px;background:color-mix(in srgb,var(--ink) 6%,var(--paper));border-top:1px solid color-mix(in srgb,var(--ink) 22%,var(--line));border-bottom:1px solid var(--line);font-size:14px;font-weight:600;gap:7px} #iqdet .iqtlsec>h4.iqtlh::after{display:none} #iqdet .iqtlh .iqtln{font-size:12px;font-weight:600;color:var(--ink2);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:1px 8px} #iqdet .iqtlh small{margin-left:auto;font-size:12px;font-weight:500;color:var(--ink3)} .iqe.k-mout,.iqe.k-mob{grid-template-columns:minmax(0,1fr) 26px} .iqe.k-mout .iqen,.iqe.k-mob .iqen{grid-column:2;grid-row:1} .iqe.k-mout .iqec,.iqe.k-mob .iqec{grid-column:1;grid-row:1;margin-left:18%;background:color-mix(in srgb,var(--brand) 8%,var(--paper));border-color:color-mix(in srgb,var(--brand) 26%,var(--line))} .iqe.k-min .iqec{margin-right:18%} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .iqe.k-mout .iqec,:root:not([data-theme="light"]) .iqe.k-mob .iqec,:root:not([data-theme="light"]) .mm.out{background:color-mix(in srgb,var(--brand) 13%,var(--paper));border-color:color-mix(in srgb,var(--brand) 34%,var(--line))}} :root[data-theme="dark"] .iqe.k-mout .iqec,:root[data-theme="dark"] .iqe.k-mob .iqec,:root[data-theme="dark"] .mm.out{background:color-mix(in srgb,var(--brand) 13%,var(--paper));border-color:color-mix(in srgb,var(--brand) 34%,var(--line))} @media (max-width:760px){.iqe.k-mout .iqec,.iqe.k-mob .iqec{margin-left:12%}.iqe.k-min .iqec{margin-right:12%}} /* mobile: shell */ :root{--hrow1:0px} header{top:calc(0px - var(--hrow1,0px))} /* phones: the logo row scrolls away, the menu rows stay; navHdrA sets --hrow1 */ .nsubw{top:calc(var(--hdra,58px) - var(--hrow1,0px))} #toast{width:max-content;max-width:min(560px,calc(100vw - 32px));text-align:center;line-height:1.45;box-sizing:border-box} /* owner 10-19: frosted toast, the page shows through blurred */ #toast{background:color-mix(in srgb,var(--ink) 82%,transparent)!important;-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 6px 24px rgba(0,0,0,.18)} @media (max-width:900px){header .hin .st{margin-right:auto}} @media (max-width:760px){ header .hin{padding:6px 0 4px;row-gap:2px;min-height:0} html body header .hin .fsz button{height:36px;min-width:44px;font-size:14px} html body header .hin .me button{min-height:36px;height:36px;padding:0 14px;font-size:13px} .nin .bdg{font-size:12px;min-width:19px;height:19px} #nsub button{padding:0 12px} #nsub.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)} html body #toast{font-size:14px!important;padding:10px 16px!important;border-radius:14px!important;bottom:calc(16px + env(safe-area-inset-bottom))!important} } @media (max-width:420px){html body header .hin .me{background:none;padding:0}html body header .hin .me button{border:1px solid var(--line)}} /* chat customer panel: the four link buttons broke one letter per line in the 260px panel */ .proh .lnk{flex-wrap:wrap} .proh .lnk button{white-space:nowrap} /* mobile: inbox (통합 문의, 이메일, 메일 지도, 실시간 상담, 채팅 요청) */ @media (max-width:760px){ /* phones zoom into any field under 16px when it gets focus */ html body #mldet textarea,html body #iqdet textarea,html body #bk_body,html body .mdc input[type=text]{font-size:max(16px,calc(14px*var(--tz,1)))} /* text under 12px is hard to read on a phone */ #t-inq .iqchs .iqch,#t-inq .iqch .iqt,#t-inq .iqml,#t-inq .iqn,#t-inq .iqs,#t-inq .cstp li,#t-mail .cstp li,#t-inq .iqeh span,#t-inq .iqet b,#t-inq .iqet span,#t-inq .iqsaid small,#t-inq small,#t-inq .mlchip,#t-mail .mlchip,#t-lead .tag,#t-live .tag,#t-live .ri>span.un,#t-live .tx>.mt,#t-live .iss i.ic,#t-live .logs button,#t-live .mb .nb,#t-live .mmeta,#t-live .dv,#t-live .rx1,#t-live .tag.tg,#t-imap .imb,#t-mail .on>small,#t-inq .on>small{font-size:12px} #t-inq .iqav2,#t-inq .tm span,#t-inq .kv>b,#t-inq .iqgh,#t-inq .iqgh span,#t-inq .iqday span,#t-inq .iqft b,#t-inq .iqft i,#t-inq .iqft span,#t-inq .iqfx h5,#t-inq .iqmore,#t-inq .hmchips i,#t-lead .kv>b,#t-lead .lr>b,#t-lead .lsec>h4,#t-lead .ldnote,#t-lead .lpg a,#t-live .seg button,#t-live .seg .c,#t-live span.c,#t-live .iss .k,#t-live .ish button,#t-live .isl,#t-live .mb .qt,#t-live .mb.note,#t-live .who span,#t-live .mpill,#t-live .pz,#t-mail .l1 time,#t-mail .mdih,#t-mail .mdir em,#t-mail .mdsum em,#t-mail .mdthh,#t-mail .mmh button,#t-mail .mmh time,#t-imap .imrow .iqav2{font-size:13px} #t-inq .lbt.sm,#t-lead .lbt.sm,#t-live .tpl button{font-size:13px} #t-live #rvfacts b{font-size:12px}#t-live #rvfacts span{font-size:13px} /* small buttons: bigger hit area, same look (negative margin keeps rows compact) */ #t-inq .iqhact{flex:1 1 auto;min-width:0;max-width:100%;justify-content:flex-end;gap:3px} #t-inq .iqhact .s{width:40px;height:40px;flex:0 1 40px;min-width:34px} #t-inq .dens button,#t-lead .dens button{min-height:36px;padding:0 11px;font-size:13px} #t-inq .iqstarb{width:36px;height:36px} #t-inq .frtog{min-height:36px} #t-inq .iqmore,#t-inq .sbolink,#t-mail .mdh .sb button{min-height:36px;min-width:44px;display:inline-flex;align-items:center;margin-top:-6px;margin-bottom:-6px} /* chat room header: tighter buttons so the customer name is not cut to a few letters */ #t-live .rvh{gap:6px} #t-live .rvh .acts{gap:4px} #t-live .rvh .acts .s{padding:0 9px;font-size:13px} #t-live .rvh .acts #bstatus,#t-live .rvh .acts .moreb{width:40px;min-width:40px} #t-mail .mmh button{position:relative} #t-mail .mmh button::after{content:"";position:absolute;inset:-8px -6px} #t-mail .mdh .av{display:none} #t-mail .mlseg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible} /* all six folders visible, 보낸 메일 was off screen */ #t-mail .mlseg button{min-height:38px;box-sizing:border-box;justify-content:center;padding:4px 6px;gap:5px;min-width:0} #t-mail .mlseg button{white-space:normal;flex-wrap:wrap;text-align:center;line-height:1.2;gap:0 4px} #t-imap .imb{min-width:36px;min-height:36px} #t-imap .imwait{min-height:40px} /* 통합 문의 detail header in two rows: back, name, status, star, trash / tiers, translation, 공장 준비 */ html body #iqdet .lddh .h{flex-wrap:wrap;row-gap:8px;column-gap:8px} html body #iqdet .lddh .h>.iqav2{display:none} html body #iqdet .lddh .h>.w{order:1;flex:1 1 0;min-width:0} html body #iqdet .lddh .h>.iqs{order:2;flex:none} html body #iqdet .lddh .h>.iqstarb{order:3;flex:none} html body #iqdet .lddh .h::after{content:"";order:5;flex:0 0 100%;height:0} html body #iqdet .lddh .h>.iqtiers{order:10} html body #iqdet .lddh .h>.iqtrsw{order:11;margin-left:0} html body #iqdet .lddh .h>.frtog{order:12} html body #iqdet .lddh .h>.iqhm{order:4;flex:none} html body #iqdet .lddh .h>.callgrp{order:10} html body #iqdet .lddh .h>.asgwrap{order:20;flex:1 1 100%} /* 샘플과 결제 row: chips instead of tall buttons */ #iqdet .iqwho .kv .lbt.sm{min-height:36px;height:auto;padding:0 12px;margin:0 6px 6px 0;display:inline-flex;align-items:center} #iqdet .iqwho .kv{align-items:start} /* bottom bar: request and status side by side, buttons below */ html body #iqdet .iqact .iqpickm{display:none} html body #iqdet .iqbtns{flex-wrap:wrap;row-gap:8px} html body #iqdet .iqbtns .iqpick{display:block;order:-2;flex:1 1 calc(50% - 4px);min-width:0;max-width:none;height:40px} html body #iqdet .iqbtns .iqpick~.iqstsel{flex-basis:calc(50% - 4px)} /* 이메일: search on its own row, filters below; detail header stays on top while reading */ #t-mail .mlfilt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 44px;gap:6px} #t-mail .mlfilt .mlq{grid-column:1 / -1;width:100%;max-width:none} #t-mail .mlfilt .mlsel{width:100%;min-width:0;max-width:none} #t-mail .mlfilt #mlrefresh{width:44px;padding:0} #t-mail .mdh{position:sticky;top:0;z-index:3;background:var(--paper);padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top))} #t-mail .mdh .mdback{width:44px;height:44px;font-size:26px;line-height:1;flex:none} #t-mail .mdacts{gap:6px} #t-mail .mdacts>*{min-height:40px} /* 메일 지도: no long subtitle, refresh beside the title, empty zones fold to one line */ #t-imap .mlhead{flex-wrap:nowrap;align-items:center;margin-bottom:10px} #t-imap .mlttl .muted{display:none} #t-imap .imz.empty{padding-top:10px;padding-bottom:10px} #t-imap .imz.empty .imcloud{display:none} /* 단체 메일: the whole window scrolls, nothing is cut off on the right */ html body .bkbox{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:block} html body .bkbody{display:block;overflow:visible;min-height:0} html body .bkleft,html body .bkright{min-width:0;overflow:visible} html body .bklist{overflow:visible;max-height:none} html body .bkfoot{position:sticky;bottom:0;z-index:2;padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom));flex-wrap:nowrap;gap:8px} html body .bkfoot select{flex:1 1 0;min-width:0;max-width:none} html body .bkfoot .s,html body .bkfoot .p{flex:none;white-space:nowrap;padding:0 12px} html body .bkfoot #bkst{flex:0 1 auto;min-width:0} html body .bkfoot #bkst:empty{display:none} html body .bkview button{min-height:38px} html body #bkbox input[type=checkbox]{width:18px;height:18px} html body .bkr{min-width:0} html body .bkr .bkm{min-width:0;flex:1} html body .bktpl textarea{min-height:200px} html body .bkhistw{overflow:visible} /* small Android phones: keep the detail header and the bottom bar on two rows */ @media (max-width:380px){ html body #iqdet .lddh .h{column-gap:6px} #t-inq .iqtiers button{width:34px} #t-inq .iqtrsw button{padding:0 8px;font-size:13px} html body #iqdet .iqbtns{column-gap:6px} html body #iqdet .iqbtns .p,html body #iqdet .iqbtns .s:not(.ico){padding:0 10px} #t-live .rvh{gap:4px;padding-left:8px;padding-right:8px} #t-live .rvh .acts .s{padding:0 7px;font-size:13px} #t-live .rvh .acts #bstatus,#t-live .rvh .acts .moreb{width:36px;min-width:36px} } /* 관리자용 정리 and 공장용 PDF on a phone: the title had 7px left and read one letter per line */ #fbmodal .fbh{flex-wrap:wrap;gap:8px 10px;padding:10px 12px} #fbmodal .fbh .fbt{flex:1 1 calc(100% - 44px)} #fbmodal .fbh .fbq{max-width:none;text-align:left;margin-right:auto} #fbmodal .fbcols{grid-template-columns:minmax(0,1fr)} #fbmodal .fbdoc{padding:16px 14px} #fbmodal .fbmode button{min-height:36px} #fbmodal .fbh .frtog{min-height:36px} } /* ui: motion. 움직임 기준값은 여기 한곳 (owner 10-10 "polish animations overall"). 상태 변화 180ms --ease, 팝오버와 토스트 180ms, 패널과 시트 280ms --ease-panel. transform 과 opacity 만 움직이고, 글자가 든 상자에는 끝난 뒤 transform 이 남지 않게 fill-mode 는 backwards 만 씁니다 (forwards 금지, 나가는 요소 제외). */ :root{--ease-panel:cubic-bezier(.2,.9,.3,1);--ease-exit:cubic-bezier(.4,0,1,1);--dur-state:180ms;--dur-pop:180ms;--dur-panel:280ms;--rise:5px; --ui-shadow:0 16px 40px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.06);--ui-shim:rgba(255,255,255,.65);--ui-scrim:rgba(12,12,16,.42)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ui-shadow:0 18px 48px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3);--ui-shim:rgba(255,255,255,.06);--ui-scrim:rgba(0,0,0,.55)}} :root[data-theme="dark"]{--ui-shadow:0 18px 48px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3);--ui-shim:rgba(255,255,255,.06);--ui-scrim:rgba(0,0,0,.55)} @media (prefers-reduced-motion:reduce){:root{--rise:0px;--dur-state:1ms;--dur-pop:1ms;--dur-panel:1ms}} @keyframes uiFade{from{opacity:0}to{opacity:1}} @keyframes uiFadeOut{to{opacity:0}} @keyframes uiRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes uiRow{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @keyframes uiOutR{to{transform:translateX(100%)}} @keyframes uiBump{0%{transform:none}40%{transform:scale(1.16)}100%{transform:none}} @keyframes uiShim{from{transform:translateX(-100%)}to{transform:translateX(100%)}} /* tab switch: the new tab fades in with a 5px rise */ @keyframes tabIn{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}} section.tabin,.stsec.tabin{animation:tabIn var(--dur-panel) var(--ease-panel) backwards} section.tabin.ldopen{animation:none} .rv.swap #rvbody,.rv.swap .rvh{animation:tabIn var(--dur-panel) var(--ease-panel) backwards} /* phone list to detail: the detail slides in from the right; the back button slides it out first (JS uiBackDown) */ @keyframes roomIn{from{transform:translateX(100%)}to{transform:none}} .ui-out{animation:uiOutR 230ms var(--ease-exit) forwards!important;pointer-events:none;box-shadow:-12px 0 32px rgba(0,0,0,.12)} .ui-shield{position:fixed;inset:0;z-index:2147483000;background:transparent} /* modals: the scrim fades, the card fades with a slight rise (no scale on text) */ .modal{animation:uiFade var(--dur-pop) var(--ease) backwards} .mbox{animation:uiRise var(--dur-panel) var(--ease-panel) backwards} .mdbk{animation:uiFade var(--dur-pop) var(--ease) backwards} @keyframes mdPop{from{opacity:0;transform:translate(-50%,calc(-50% + 8px))}to{opacity:1;transform:translate(-50%,-50%)}} .mdc.din .mdct,.mdc.din .mdcs,.mdc.din .mdcmi,.mdain.busy,.pin-in{animation-fill-mode:backwards} /* popovers: quick fade and scale; on phones the menu is a bottom sheet that slides up */ .menu{animation:pop var(--dur-pop) var(--ease) backwards} @keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}} @media (max-width:760px){.menu{animation:sheetUp var(--dur-panel) var(--ease-panel) backwards}} /* toast: slides up and fades (timing from the token) */ #toast{transition-duration:var(--dur-pop)!important} /* buttons: smooth hover colors, a small press */ button{transition:color var(--dur-state) var(--ease),background-color var(--dur-state) var(--ease),border-color var(--dur-state) var(--ease),box-shadow var(--dur-state) var(--ease),opacity var(--dur-state) var(--ease)} .s:active,.seg button:active,.moreb:active,.stc:active,.tpl button:active,.proh .lnk button:active,.ri .acts button:active,.qtg button:active,.tgadd:active,.todo li button:active,.p:active,.lbt:active,.iqstarb:active,.frtog:active,.fbbtn:active,.dens button:active{transform:scale(.97)} button.opsbr{transition:background-color var(--dur-state) var(--ease)} /* list rows: a gentle stagger on the first render of a view only (JS adds .ui-in, never on refresh) */ .ui-in{animation:uiRow 240ms var(--ease-panel) backwards} .ulist li{animation:none} /* badges: a subtle pulse when a count goes up (JS adds .ui-bump; the old any-change bump is off) */ .seg .c.bump,.bdg.bump{animation:none} .seg .c.ui-bump,.bdg.ui-bump,.fxchbdg.ui-bump{display:inline-block;animation:uiBump 340ms var(--ease-panel)} /* loading (owner 10-11 "불러오는 중 글자 대신 로딩 애니메이션"): every loading spot draws ldH(kind) in the script, a skeleton in the shape of what comes (list rows, a card, 2x2 tiles, one inline line) with one soft sweep; static when motion is reduced. Custom tags so the app span and b rules never reach the bars. ldSpin is the small ring for buttons that say they are loading. */ .uisk{position:relative;overflow:hidden;isolation:isolate;display:grid;align-content:start;gap:12px;padding:16px;min-width:0;text-align:left;pointer-events:none;-webkit-user-select:none;user-select:none} .uisk::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,transparent 0%,var(--ui-shim) 50%,transparent 100%);transform:translateX(-100%);animation:uiShim 1.4s ease-in-out infinite} ui-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .uisk ui-skl{display:block;height:10px;width:72%;max-width:100%;border-radius:6px;background:var(--soft)} .uisk ui-skl.sk-s{height:8px} .uisk ui-skl.sk-h{height:14px;width:38%;border-radius:7px} .uisk-list{gap:0;padding:0} .uisk-list ui-sk,.uisk-page ui-sk{display:flex;align-items:flex-start;gap:12px;padding:16px 14px;border-bottom:1px solid var(--line)} .uisk-list ui-sk:last-child,.uisk-page ui-sk:last-child{border-bottom:0} .uisk ui-ska{display:block;flex:none;width:32px;height:32px;border-radius:50%;background:var(--soft)} .uisk ui-skt{flex:1;display:grid;gap:10px;min-width:0;padding-top:2px} .uisk-list ui-skt,.uisk-page ui-skt{max-width:560px} .uisk ui-skx{display:block;flex:none;width:30px;height:8px;margin-top:4px;margin-left:auto;border-radius:4px;background:var(--soft)} .uisk-page{gap:10px;padding:16px 0} .uisk-page>ui-skl.sk-h{width:180px;max-width:60%;height:18px} .uisk-page>ui-skl.sk-s{width:300px;max-width:80%} .uisk-page ui-skp{display:grid;margin-top:10px;border:1px solid var(--line);border-radius:14px;background:var(--paper);overflow:hidden} .uisk-text{padding:4px 0;gap:10px} .uisk-cards{gap:10px;padding:0} .uisk-cards ui-skc{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--paper)} .uisk-chat{gap:12px} .uisk-chat ui-skm{display:block;max-width:78%;border-radius:16px;background:var(--soft)} .uisk-chat ui-skm.sk-l{justify-self:start;border-bottom-left-radius:6px} .uisk-chat ui-skm.sk-r{justify-self:end;border-bottom-right-radius:6px;opacity:.7} .uisk-cal{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:0} .uisk-cal ui-skb{display:block;height:76px;border-radius:8px;background:var(--soft);opacity:.55} @media (max-width:760px){.uisk-cal ui-skb{height:46px}} .uisk-detail{gap:14px;padding:20px} .uisk-detail ui-sk{display:flex;align-items:center;gap:12px;margin-bottom:4px} .uisk-detail ui-skb{display:block;height:64px;border-radius:12px;background:var(--soft);opacity:.7} .uisk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0} .uisk-grid ui-skb{display:grid;gap:10px;align-content:start;padding:14px;min-height:76px;border:1px solid var(--line);border-radius:12px} .uisk-grid ui-skl.sk-v{height:20px;width:52%;border-radius:7px} .uisk-line{display:inline-block;vertical-align:middle;width:7em;max-width:100%;height:.8em;padding:0;border-radius:6px;background:var(--soft)} ui-spin{display:inline-block;flex:none;width:12px;height:12px;margin-right:6px;vertical-align:-2px;box-sizing:border-box;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;opacity:.7;animation:uiSpin .8s linear infinite} @keyframes uiSpin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.uisk::after{animation:none!important;display:none}ui-spin{animation:none!important}} /* ui: select. 기본 OS 드롭다운 대신 앱 스타일 목록 (owner 10-10). 원래 select 는 값의 기준으로 남고 화면에서만 숨습니다. 크기와 자리는 select 를 꾸미던 규칙을 JS 가 "select+ui-select" 로 복사해서 맞춥니다. 폰에서는 아래 시트로 엽니다. */ select.usel-src.usel-src.usel-src{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;max-width:1px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)!important;overflow:hidden!important;flex:none!important;white-space:nowrap!important} ui-select{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;min-width:0;vertical-align:middle;line-height:var(--usel-lh,normal)!important;white-space:nowrap;letter-spacing:normal;text-transform:none;text-indent:0;text-align:start;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation} ui-select[hidden]{display:none!important} ui-select .usel-l{flex:1 1 auto;min-width:0;display:grid;text-align:start} ui-select .usel-v,ui-select .usel-z{display:block;grid-area:1/1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} ui-select .usel-z{visibility:hidden} ui-select .usel-c{flex:none!important;width:10px!important;height:10px!important;margin-left:4px;opacity:.6;transition:transform var(--dur-state) var(--ease)} ui-select.usel-open .usel-c{transform:rotate(180deg)} select:disabled+ui-select{opacity:.55;cursor:default} select:focus-visible+ui-select:not(.usel-pf){outline:2px solid var(--brand);outline-offset:2px} select+ui-select.usel-open{border-color:var(--brand)!important} select:not(:disabled):not(:focus)+ui-select:not(.usel-open):hover{border-color:color-mix(in srgb,var(--ink) 24%,var(--line))!important} .usel-pop{position:fixed;z-index:95;box-sizing:border-box;min-width:140px;max-width:min(380px,calc(100vw - 16px));overflow-y:auto;overscroll-behavior:contain;margin:0;padding:4px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--ui-shadow);font-family:inherit;font-size:14px;font-weight:400;line-height:1.35;text-align:start;outline:0;transform-origin:var(--uo,24px) 0;animation:uselIn var(--dur-pop) var(--ease) backwards} .usel-pop.usel-up{transform-origin:var(--uo,24px) 100%} .usel-pop.usel-out{animation:uselOut 110ms var(--ease-exit) forwards;pointer-events:none} @keyframes uselIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}} @keyframes uselOut{to{opacity:0;transform:scale(.98)}} .usel-o{position:relative;display:flex;align-items:center;gap:10px;min-height:32px;padding:6px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;color:var(--ink);transition:background-color 90ms var(--ease)} .usel-o .usel-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .usel-o .usel-i{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--sink);color:var(--ink2)} .usel-o .usel-i.smp{background:var(--mint);color:var(--ok)} .mdccs{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--ink3)}.mdccp{all:unset;cursor:pointer;padding:2px 9px;border:1px dashed var(--line);border-radius:999px;color:var(--ink2);font-size:12px}.mdccp:hover{border-color:var(--ink3);color:var(--ink)}.mdccp:focus-visible{outline:2px solid var(--ink)}.mdccw{flex-basis:100%;font-size:12px;color:var(--pink-d);background:var(--pink-s);border-radius:8px;padding:5px 9px} .usel-o[aria-selected="true"] .usel-i{background:var(--ink);color:var(--paper)} .usel-o .usel-e{flex:none;width:22px;text-align:center;font-size:16px;line-height:1} .usel-o .usel-tb{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;color:#fff;font-size:12px;font-weight:600} .usel-o .usel-k{flex:none;width:14px;height:14px;opacity:0} .usel-o[aria-selected="true"]{font-weight:500} .usel-o[aria-selected="true"] .usel-k{opacity:1} .usel-o.usel-ind{padding-left:22px} .usel-o.usel-sep{margin-top:9px} .usel-o.usel-sep::before{content:"";position:absolute;left:6px;right:6px;top:-5px;height:1px;background:var(--line)} .usel-pop .usel-o.usel-act,.usel-sh.usel-kb .usel-o.usel-act{background:var(--sink)} .usel-o[aria-disabled="true"]{color:var(--ink3);opacity:.55;cursor:default} .usel-o[aria-disabled="true"].usel-act{background:transparent!important} .usel-g{padding:8px 10px 3px;font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--ink3);cursor:default} .usel-g:not(:first-child){margin-top:5px;border-top:1px solid var(--line);padding-top:9px} .usel-bk{position:fixed;inset:0;z-index:95;background:var(--ui-scrim);touch-action:none;animation:uiFade var(--dur-panel) var(--ease) backwards} .usel-bk.usel-out{animation:uiFadeOut 220ms var(--ease) forwards} .usel-sh{position:fixed;left:0;right:0;bottom:0;z-index:96;box-sizing:border-box;margin:0 auto;width:100%;max-width:640px;max-height:min(76vh,620px);display:flex;flex-direction:column;padding:0 8px calc(8px + env(safe-area-inset-bottom));background:var(--paper);color:var(--ink);border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.18);font-family:inherit;font-size:16px;line-height:1.35;text-align:start;animation:uselUp var(--dur-panel) var(--ease-panel) backwards} .usel-sh.usel-out{animation:uselDown 220ms var(--ease-exit) forwards;pointer-events:none} @keyframes uselUp{from{transform:translateY(100%)}to{transform:none}} @keyframes uselDown{to{transform:translateY(100%)}} .usel-hd{flex:none;padding:8px 8px 4px;text-align:center;touch-action:none} .usel-hd i{display:block;width:38px;height:5px;margin:0 auto 8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 18%,transparent)} .usel-hd b{display:block;padding-bottom:4px;font-size:13px;font-weight:500;color:var(--ink3)} .usel-sh .usel-ls{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 0 4px} .usel-sh .usel-o{min-height:48px;padding:12px 14px;border-radius:12px;font-size:16px;white-space:normal} .usel-sh .usel-o.usel-ind{padding-left:30px} .usel-sh .usel-o:active{background:var(--sink)} .usel-sh .usel-o .usel-k{width:18px;height:18px;color:var(--brand)} .usel-sh .usel-g{padding:12px 14px 4px;font-size:12px} /* notify bell (owner 10-10): header button, panel (popover on desktop, bottom sheet on phones), 설정 > 알림 cards, 설정 > 데이터 > 백업 */ .ntbell{position:relative;flex:none;width:34px;height:34px;border-radius:99px;border:0;padding:0;background:color-mix(in srgb,currentColor 14%,transparent);color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--dur-state,.18s) var(--ease)} .ntbell:hover,.ntbell[aria-expanded="true"]{background:color-mix(in srgb,currentColor 26%,transparent)} .ntbell:focus-visible{outline:2px solid currentColor;outline-offset:2px} .ntbell:active{transform:scale(.94)} .ntbell svg{width:18px;height:18px;flex:none} .ntbell .bdg{position:absolute;top:-4px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--pink);color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--brand);font-variant-numeric:tabular-nums} .ntback{position:fixed;inset:0;z-index:88;background:rgba(10,12,16,.4);opacity:0;transition:opacity var(--dur-pop,.18s) var(--ease)} .ntback.in{opacity:1} .ntpanel{position:fixed;z-index:89;top:60px;right:16px;width:min(400px,calc(100vw - 32px));max-height:min(72vh,640px);display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.18);opacity:0;transform:translateY(calc(var(--rise,5px) * -1));transition:opacity var(--dur-pop,.18s) var(--ease-panel,ease),transform var(--dur-panel,.28s) var(--ease-panel,ease)} .ntpanel.in{opacity:1;transform:none} .ntpanel[hidden],.ntback[hidden],.ntios[hidden],.ntdevs[hidden],#bkucard[hidden]{display:none!important} /* display:flex would beat the hidden attribute and leave an invisible layer that takes taps */ .ntph{display:flex;align-items:center;gap:6px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--line);flex:none} .ntph b{font-size:15px;font-weight:600;margin-right:auto} .ntph .s{padding:6px 11px;font-size:13px} .ntph .ntico{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center} .ntph .ntico svg{width:16px;height:16px} .ntlist{overflow:auto;overscroll-behavior:contain;padding:4px 0 6px;flex:1 1 auto;min-height:0} .nti{display:grid;grid-template-columns:8px minmax(0,1fr);column-gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:0;padding:10px 16px;cursor:pointer;color:inherit;font:inherit;transition:background-color var(--dur-state,.18s) var(--ease)} .nti:hover{background:var(--wash)} .nti:focus-visible{outline:2px solid var(--brand);outline-offset:-2px} .nti .ntdot{width:8px;height:8px;border-radius:50%;margin-top:7px;background:transparent} .nti.un .ntdot{background:var(--pink)} .nti .ntt{font-size:14px;font-weight:500;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere} .nti.rd .ntt{font-weight:500;color:var(--ink2)} .nti .ntb{font-size:13px;line-height:1.45;color:var(--ink2);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} .nti .ntm{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:var(--ink3)} .ntcat{display:inline-block;padding:1px 7px;border-radius:99px;background:var(--sink);color:var(--ink2);font-size:11px;font-weight:500} .ntcat.c-lead{background:var(--pink-s);color:var(--pink-d)}.ntcat.c-reply{background:var(--mint);color:var(--ok)}.ntcat.c-money{background:var(--lemon);color:var(--lemon-ink)} .ntempty{padding:30px 18px;text-align:center;color:var(--ink3);font-size:13px} .ntmore{display:block;width:100%;padding:10px;border:0;background:none;color:var(--ink2);font:inherit;font-size:13px;cursor:pointer} .ntst{font-size:12px;font-weight:500;padding:2px 9px;border-radius:99px;background:var(--sink);color:var(--ink2)} .ntst.on{background:var(--mint);color:var(--ok)}.ntst.bad{background:var(--pink-s);color:var(--pink-d)} .ntlead{font-size:13px;color:var(--ink2);margin:-4px 0 10px;line-height:1.5} .ntios{display:flex;flex-direction:column;gap:2px;background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;font-size:13px;line-height:1.5} .ntacts{flex-wrap:wrap;gap:8px} .ntdevs{margin-top:12px} .ntdevs:empty{display:none} .ntdev{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13px} .ntdev .ntdn{flex:1 1 auto;min-width:0} .ntdev .ntdn b{font-weight:500} .ntdev .ntdn small{display:block;color:var(--ink3);font-size:12px} .ntdev .ntme{font-size:11px;font-weight:600;color:var(--ok);margin-left:6px} .ntdev .s{padding:6px 11px;font-size:12px;flex:none} .ntcats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 18px} .ntcats .sw{border-bottom:1px solid var(--line)} .ntq{border-bottom:0} .ntqc{display:flex;align-items:center;flex-wrap:wrap;gap:6px} .ntqc select{width:auto;min-width:92px} .ntqon{display:inline-flex;align-items:center;gap:6px;font-size:13px;margin-right:4px;cursor:pointer} .bkust{font-size:12px;font-weight:500;padding:2px 9px;border-radius:99px;background:var(--sink);color:var(--ink2)} .bkust.ok{background:var(--mint);color:var(--ok)}.bkust.bad{background:var(--pink-s);color:var(--pink-d)}.bkust.run{background:var(--lemon);color:var(--lemon-ink)} .bkusum{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-bottom:12px} @media (max-width:600px){.bkusum>.bkut:nth-child(3):last-child{grid-column:1/-1}} .bkusum:empty{display:none} .bkut{background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0} .bkut small{display:block;font-size:12px;color:var(--ink3)} .bkut b{display:block;font-size:14px;font-weight:500;margin-top:2px;overflow-wrap:anywhere} .bkut span{display:block;font-size:12px;color:var(--ink2);margin-top:2px;overflow-wrap:anywhere} .bkut.bad{border-color:color-mix(in srgb,var(--pink) 45%,var(--line))} .bkuerr{background:var(--pink-s);color:var(--pink-d);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.5;margin-bottom:12px;white-space:pre-wrap} .bkuacts{flex-wrap:wrap;gap:10px} .bkulist{margin-top:12px} .bkulist:empty{display:none} .bkuday{border-top:1px solid var(--line);padding:10px 0} .bkudh{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .bkudh b{font-size:14px;font-weight:500;margin-right:auto} .bkudh .s{padding:5px 10px;font-size:12px} .bkufs{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px} .bkuf{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:99px;padding:5px 11px;font:inherit;font-size:12px;cursor:pointer;transition:border-color var(--dur-state,.18s) var(--ease)} .bkuf:hover{border-color:var(--ink3)} .bkuf:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .bkuf em{font-style:normal;color:var(--ink3)} .bkurbox{max-width:860px} .bkurrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px} .bkurrow input{flex:1 1 240px;min-width:0} .bkurcols{display:grid;grid-template-columns:1fr 1fr;gap:10px} .bkurcols h4{font-size:13px;font-weight:500;margin-bottom:6px;color:var(--ink2)} .bkurpre{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;line-height:1.55;background:var(--wash);border:1px solid var(--line);border-radius:10px;padding:8px 10px;max-height:46vh;overflow:auto;white-space:pre-wrap;word-break:break-all;margin:0} .bkurpre .del{background:var(--pink-s);color:var(--pink-d)}.bkurpre .add{background:var(--mint);color:var(--ok)} .bkurnote{font-size:13px;color:var(--ink2);margin:8px 0 12px;line-height:1.5} @media (max-width:760px){ .ntbell{width:36px;height:36px} .ntpanel{top:auto;bottom:0;left:0;right:0;width:100%;max-height:82vh;border-radius:18px 18px 0 0;border-width:1px 0 0;padding-bottom:env(safe-area-inset-bottom);transform:translateY(24px)} .ntph{padding:12px 12px 12px 18px} .ntph .s{min-height:40px} .nti{padding:12px 18px;min-height:56px} .nti .ntt{font-size:14px} .ntcats{grid-template-columns:1fr 1fr} .bkurcols{grid-template-columns:1fr} .bkuf{min-height:36px} } @media (prefers-reduced-motion:reduce){.ntpanel,.ntback{transition:none}} /* ui: text size. 가- 와 가+ 는 화면 확대가 아니라 글자만 바꿉니다 (owner 10-10: 모든 글자). 아이콘, 사진, 아바타, 상자 크기는 그대로이고 상자는 커진 글자에 맞춰 다시 흐릅니다. --tz 는 0.8 에서 1.5 까지. 규칙과 인라인 style 의 글자 크기는 바로 아래 스크립트가 곱해 둡니다 */ :root{--tz:1} @media print{:root{--tz:1!important}} /* askDo: a confirmed action keeps its button busy until it finishes, so a second press does nothing */ button[aria-busy="true"]{opacity:.55;pointer-events:none;cursor:progress}.mdsend[aria-busy="true"]{opacity:1} /* owner 10-21: the send button keeps full colour while it sends, the bar shows the progress */ /* boxes that hold text grow with it (checked at 80 to 150 percent, 390 and 1440): label columns, count pills, tier pills, phone action grid */ .kv>b{width:calc(92px * var(--tz));word-break:keep-all} .nin .bdg,.tierb{height:auto;min-height:calc(18px * var(--tz));min-width:calc(18px * var(--tz))} .nin .bdg{border-radius:99px} .opnums{grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(150px * var(--tz))),1fr))} @media (min-width:761px){.optiles{grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(180px * var(--tz))),1fr))}} .opn b,.optile b{overflow-wrap:anywhere} .row{grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(200px * var(--tz))),1fr))} #t-cfg .row{grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(240px * var(--tz))),1fr))} .ri.un .tx .mt{padding-right:calc(24px * var(--tz))} .tz-l #t-mail .mlhead{flex-wrap:wrap}.tz-l #t-mail .mlfilt{flex-basis:100%}.mlttl h1{white-space:nowrap} @media (max-width:760px){ .kv>b{width:calc(84px * var(--tz))} .nin .bdg{height:auto;min-height:calc(19px * var(--tz));min-width:calc(19px * var(--tz))} .mdacts{grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(98px * var(--tz))),1fr))} .mdacts>*{white-space:normal;word-break:keep-all;overflow-wrap:anywhere;min-width:0} .optiles{grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(140px * var(--tz))),1fr))} } /* calmer 통합 문의 detail, owner 10-14: one column of sections split by thin lines and headings, no cards inside cards. Action buttons inside sections are the small size; the composer and the bottom bar keep their own sizes */ #iqdet .iqbody{gap:0} #iqdet .iqbody>section:not(.iqcomp),#iqdet .iqbody>.iqtop2{border:0;border-radius:0;background:none;box-shadow:none;margin:0;padding:12px 0} #iqdet .iqbody>section:not(.iqcomp)+section:not(.iqcomp),#iqdet .iqbody>.iqtop2+section:not(.iqcomp){border-top:1px solid var(--line)} #iqdet .iqbody>.iqtop2{display:grid;gap:8px;padding-top:10px} #iqdet .iqbody .cst{border:0;padding:2px 0 0;background:none} #iqdet .iqbody .cst .cstn{border-top:0;padding-top:6px} #iqdet .iqbody .cn{padding:5px 10px;border-radius:8px;font-size:13px;line-height:1.4;min-height:0} #iqdet .iqbody .cn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} #iqdet .iqbody .cn.add{border:0;background:none;padding:2px 0;color:var(--ink3)} #iqdet .iqbody .cn.add:hover{color:var(--ink2)} #iqdet .iqbody .misiq.cx,#iqdet .iqbody .emxsum.cx{border:0;background:none;padding:0;margin:0;border-radius:0} #iqdet .iqbody .emxiqs{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)} #iqdet .iqbody .emxiqs>*,#iqdet .iqbody .emxsum{min-width:0} #iqdet .iqbody .aixlc{border:0;background:none;padding:6px 0 0} #iqdet .iqbody .iqcard{border:0;background:none;padding:12px 0;border-radius:0} #iqdet .iqbody .iqcard>h4{margin:0 0 8px;padding:0;background:none;border:0;border-radius:0;font-size:13px;font-weight:600;color:var(--ink)} #iqdet .iqbody .iqcard>h4 svg{color:var(--ink3);width:14px;height:14px} #iqdet .iqbody>section h3,#iqdet .iqbody>section>h4,#iqdet .iqbody .qbiqh>b,#iqdet .iqbody .aixih>b{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:0;margin:0 0 6px} #iqdet .iqbody>section:not(.iqcomp) button.s:not(.mdsend):not(.sm),#iqdet .iqbody>section:not(.iqcomp) a.s{min-height:28px;padding:0 10px;font-size:13px;border-radius:8px} #iqdet .iqbody .iqtlsec{padding-bottom:0} #t-inq .iqwho.cmp .kv>b{width:66px} /* 견적 계산 header, owner 10-14: grouped chips, a short 확인 필요 list */ .qdcs .qdc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px} .qdg{cursor:pointer;font:inherit;font-size:11px;font-weight:500;display:inline-flex;gap:4px;align-items:center} .qdg b{font-weight:600;color:var(--ink)}.qdg.on{border-color:var(--ink2)} .qdgl{list-style:none;margin:6px 0 0;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--wash);font-size:12px;display:grid;gap:2px;max-height:132px;overflow:auto} .qdgl li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .qdred{padding:4px 9px;line-height:1.4} .qdred b{display:inline;margin-right:6px} .qdred ul{list-style:none;padding-left:0;margin:1px 0 0} .qdred li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .qdred.soft{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 8%,var(--paper))} .qdrm{all:unset;cursor:pointer;margin-top:2px;font-size:11px;font-weight:600;color:var(--ink2)} .qdrm:hover{text-decoration:underline} /* the send row right under the text, owner 10-14: small secondary buttons on the left in one line (they scroll sideways on a phone), 보내기 on the right and always in view; the checks and the team table come after the row */ .mdc>.mdcb{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:2px;padding-bottom:2px} .mdc>.mdcb::-webkit-scrollbar{display:none} .mdc>.mdcb .s{flex:none;min-height:30px;height:30px;padding:0 10px;font-size:12px;border-radius:8px} .mdc>.mdcb .mdsend{position:sticky;right:0;margin-left:auto;flex:none;box-shadow:-10px 0 12px var(--paper)} .mdc.big>.mdcb{margin-top:2px;padding:6px 0 10px} .mdc>.mdcb+*{margin-top:12px} /* motion everywhere, owner 10-14: the new one-shot classes, and the older animations brought onto the same tokens */ @media (prefers-reduced-motion:no-preference){ .modetin>*{animation:tabIn6 180ms var(--mo-ease)} .mogrow>*{transform-origin:50% 100%;animation:moGrow var(--mo-success) var(--mo-ease) backwards} .mogrow>*:nth-child(3n+2){animation-delay:30ms}.mogrow>*:nth-child(3n){animation-delay:60ms} .flipin{animation:moIn var(--mo-state) var(--mo-ease) backwards} .up,.ri.fresh,.pre1.fresh,.ulist li,.rebar,.selbar,.pro.swap .proh,.pro.swap .prob,.rv.swap #rvbody,.rv.swap .rvh,.mrow.fresh + .mmeta{animation-duration:var(--mo-state)!important;animation-timing-function:var(--mo-ease)!important} .seg .c.bump,.bdg.bump,.ri.bump .un,.ri.fresh .un{animation-duration:var(--mo-state)!important;animation-timing-function:var(--mo-ease)!important} .lb,.scrim,.pane.pick .ri .ck{animation-duration:var(--mo-state)!important;animation-timing-function:var(--mo-ease)!important} section.tabin.ldopen{animation:none} .achp{transition-duration:280ms!important;transition-timing-function:var(--mo-ease)!important} .ntpanel{transition-duration:var(--mo-state)!important;transition-timing-function:var(--mo-ease)!important} .ldsplit::before,.ldsplit::after{transition-duration:var(--mo-press)!important} progress,.aiprog i,.ushbar i,.lgubar i,.pbar i{transition:transform var(--mo-state) var(--mo-ease)} .switch i,.tg i,input[type=checkbox]{transition:transform var(--mo-press) var(--mo-ease),background-color var(--mo-state) var(--mo-ease)} } @keyframes moGrow{from{transform:scaleY(.08)}to{transform:none}} @keyframes moIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.modetin>*,.mogrow>*,.flipin{animation:none!important}} /* 보내기 취소, owner 10-14: pills at the top center, no backdrop; only the pills take clicks */ #ushbox{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:95;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;width:min(560px,calc(100vw - 24px))} .ushp{pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;min-height:46px;padding:8px 8px 8px 16px;border-radius:18px;background:var(--paper);color:var(--ink);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.04),0 12px 36px rgba(15,23,42,.16),0 2px 6px rgba(15,23,42,.06);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);font-size:13px} .ushp::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:none} .ushp>*{position:relative} [data-theme="dark"] .ushp{background:#1A1B1F;color:#f4f4f6;border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 36px rgba(0,0,0,.45)} [data-theme="dark"] .ushp::before{background:none} .ushic{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;opacity:.9} .ushic svg{width:15px;height:15px} .ushtx{flex:1;min-width:0;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden} .ushtx b{font-weight:600} .ushtx small{font-size:12px;opacity:.6;overflow:hidden;text-overflow:ellipsis;min-width:0} .ushdv{display:inline-block;width:1px;height:12px;background:currentColor;opacity:.35;flex:none} .ushs{font-variant-numeric:tabular-nums;opacity:.85;flex:none} .ushu{flex:none;height:30px;padding:0 13px;border:1px solid rgba(255,255,255,.7);border-radius:11px;background:rgba(17,17,20,.88);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.18)} [data-theme="dark"] .ushu{background:rgba(255,255,255,.92);color:#111;border-color:transparent} .ushu:hover{filter:brightness(1.15)} .ushx{flex:none;width:28px;height:28px;border:0;border-radius:8px;background:none;color:inherit;opacity:.6;cursor:pointer;font-size:12px} .ushx:hover{opacity:1} .ushbar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(127,127,127,.15)} .ushbar i{display:block;height:100%;background:var(--ink2);opacity:.85;transform-origin:left center;transition:transform .25s linear} .ushp.sent,.ushp.undone{background:color-mix(in srgb,var(--ok) 14%,var(--paper));color:var(--ok)} .ushp.late{background:color-mix(in srgb,var(--warn) 14%,var(--paper));color:var(--warn)} .ushp.busy{opacity:.8} .ushmore{pointer-events:auto;font-size:12px;font-weight:600;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.6);color:var(--ink);border:1px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} @media (max-width:760px){#ushbox{top:auto;bottom:calc(132px + env(safe-area-inset-bottom));flex-direction:column-reverse}#ushbox .ushtx small{display:none}} @media (prefers-reduced-motion:no-preference){.ushp.ushin{animation:ushIn var(--mo-state) var(--mo-ease)}.ushp.sent .ushic,.ushp.undone .ushic{animation:sndPop var(--mo-state) var(--mo-spring)}} @keyframes ushIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}} @media (max-width:760px){@keyframes ushIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}} /* Windows laptops, owner 10-14: the console uses the whole window (the cap is 2400 px) with even 14 px sides; classic scrollbars keep their gutter so a pane does not shift when its bar appears, and they are thin and quiet */ header{padding-left:14px;padding-right:14px} #iqlist,#iqdet,#mldet,.mllist,#qaipop .qaipb,.mdc.big{scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 22%,transparent) transparent} /* the review panes start equal even before they are measured, owner 10-14 */ .mdrevg{align-items:stretch} .mdrevg>div{display:flex;flex-direction:column;min-width:0} .mdrevg .mdpane{height:min(60vh,460px);max-height:70vh;min-height:220px} /* 고객 메모, owner 10-14: several paragraphs kept as written in the detail; one line with an ellipsis in lists */ .cn.ed{align-items:flex-start} .cn.ed textarea{flex:1;min-width:0;font:inherit;font-size:13px;line-height:1.45;padding:6px 8px;border:0;background:var(--wash);border-radius:7px;color:var(--ink);resize:none;overflow-y:hidden;min-height:31px;box-sizing:border-box} .cn.ed .s{flex:none;min-height:30px;height:30px;padding:0 10px;font-size:12px} #iqdet .iqbody .cn:not(.add) span,#mldet .cn:not(.add) span,#prob .cn:not(.add) span{white-space:pre-wrap;overflow:visible;text-overflow:clip} /* owner 10-17: the memo editor as one clean input row: icon, text, a key hint, 저장 and 취소, a ring while typing */ .cn.cn.ed{display:flex;align-items:flex-start;gap:6px;padding:4px 4px 4px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);min-height:0;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)} .cn.cn.ed:focus-within{border-color:color-mix(in srgb,var(--brand) 55%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)} .cn.cn.ed>svg{flex:none;margin-top:9px;color:var(--ink3)} .cn.cn.ed textarea{flex:1;min-width:0;font:inherit;font-size:13px;line-height:1.45;padding:6px 2px;margin:0;border:0;outline:0;background:transparent;color:var(--ink);resize:none;min-height:31px;box-shadow:none} .cn.cn.ed textarea::placeholder{color:var(--ink3)} .cn.cn.ed .cnk{flex:none;align-self:center;font-size:11px;color:var(--ink3);white-space:nowrap;margin-right:2px} .cn.cn.ed .s{flex:none;align-self:flex-start;height:30px;min-height:30px;padding:0 11px;font-size:12px;border-radius:8px;box-shadow:none} .cn.cn.ed .s.p{background:var(--ink);color:var(--paper);border-color:var(--ink)} .cn.cn.ed .s:not(.p){background:transparent;border-color:transparent;color:var(--ink2)}.cn.cn.ed .s:not(.p):hover{background:var(--sink)} @media (max-width:760px){.cn.cn.ed .cnk{display:none}} /* owner 10-17 "too cluttered": the questions as light rows, a soft selected answer, the text box inline, long questions in 2 lines */ .mdc .mdqq{background:var(--paper);border-color:var(--line);padding:8px 12px} .mdc .mdqq .mdqqh b{font-size:13px}.mdc .mdqq .mdqqh small{font-size:12px} .mdc .mdqq li{gap:5px 8px;padding:7px 0;border-top-color:color-mix(in srgb,var(--line) 70%,transparent)} .mdc .mdqq li>b{flex:1 1 260px;min-width:0;font-weight:500;font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .mdc .mdqq li>i{font-style:normal;font-size:11px;color:var(--ink3);font-weight:500} .mdc .mdqq .qo{gap:4px} .mdc .mdqq .qo button{height:26px;min-height:26px;padding:0 9px;font-size:12px;border-radius:7px;background:var(--paper);color:var(--ink2);border:1px solid var(--line);white-space:nowrap} .mdc .mdqq .qo button[aria-pressed="true"]{background:color-mix(in srgb,var(--ink) 8%,var(--paper));color:var(--ink);border-color:color-mix(in srgb,var(--ink) 50%,var(--line));font-weight:600} .mdc .mdqq li>input[type=text]{flex:0 1 180px;min-width:110px;height:26px;padding:0 8px;font-size:12px;border-radius:7px} .mdc .mdqq .qx{width:24px;height:24px;min-height:24px;padding:0;border-radius:6px;display:inline-grid;place-items:center;font-size:15px}.mdc .mdqq .qx:hover{background:var(--sink);color:var(--ink)} .mdc .mdqq>.mdcb{margin-top:6px}.mdc .mdqq>.mdcb .s{height:28px;min-height:28px;font-size:12px;padding:0 11px} .mdc .mdqm{gap:8px}.mdc .mdqm .s{height:28px;min-height:28px;font-size:12px;padding:0 11px} /* the team-only quote table folds closed; its summary line shows the sample box, lead time, cost changes and how many to check */ .mdc .mdqd.v2{background:var(--paper);padding:0} .mdc .mdqd.v2>summary{list-style:none;padding:9px 12px;align-items:center;gap:4px 10px} .mdc .mdqd.v2>summary::-webkit-details-marker{display:none} .mdc .mdqd.v2>summary b{font-size:13px} .mdc .mdqd.v2>summary .w{color:var(--warn);font-weight:500} .mdc .mdqd.v2>summary .qdsw{font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--warn) 14%,var(--paper));color:color-mix(in srgb,var(--warn) 80%,var(--ink))} .mdc .mdqd.v2>summary .qdsw.r{background:color-mix(in srgb,var(--pink-d) 12%,var(--paper));color:var(--pink-d)} .mdc .mdqd.v2>summary .qdchev{margin-left:auto;width:8px;height:8px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease)} .mdc .mdqd.v2[open]>summary .qdchev{transform:rotate(225deg)} .mdc .mdqd.v2[open]>summary{border-bottom:1px solid var(--line)} .mdc .mdqd.v2>*:not(summary){margin-left:12px;margin-right:12px}.mdc .mdqd.v2[open]{padding-bottom:8px} /* the editor header: every button 32 px and the same quiet style on one row; the address gives way first */ .mdc.mdc>.mdch>.s{height:32px;min-height:32px;padding:0 12px;font-size:13px;border-radius:8px;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:none;flex:none} .mdc.mdc>.mdch>.s:hover{background:var(--sink)} .mdc.mdc>.mdch>.s.mdbig{width:32px;padding:0} .mdc.mdc>.mdch>.s.mdhist.on{background:color-mix(in srgb,var(--ink) 8%,var(--paper));border-color:color-mix(in srgb,var(--ink) 40%,var(--line));font-weight:600} .mdc.big>.mdch{flex-wrap:nowrap;align-items:center;gap:8px} .mdc.big>.mdch>.mdcm{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mdc.big>.mdch>.mdkof{flex:none;white-space:nowrap} .mdc.big>.mdch>i,.mdc.big>.mdch>b{flex:none} /* the bottom bar wraps neatly instead of running off the edge, 보내기 stays on the right */ .mdc.big>.mdcb{flex-wrap:wrap;row-gap:6px;overflow:visible} .mdc.big>.mdcb>.s{height:30px;min-height:30px;padding:0 10px;font-size:12px} .mdc.big>.mdcb>.mdsend{margin-left:auto} /* the ✕ on the history bar is a plain icon */ #iqdet .iqtlh .iqtlx{background:transparent;border-color:transparent;color:#d6dbe3}#iqdet .iqtlh .iqtlx:hover{background:rgba(255,255,255,.14);color:#fff} /* owner 10-17 "the list glitches for a second": a detail that makes the page taller made the scrollbar appear, the page narrowed by its width and every list re-wrapped; the gutter is now always kept */ html{scrollbar-gutter:stable} /* owner 10-17: the whole quote form and project brief inside the 견적 요청 bubble */ .iqreqx{all:unset;cursor:pointer;display:inline-block;margin-top:6px;font-size:13px;font-weight:600;color:var(--info);text-decoration:underline;text-underline-offset:3px} .iqrfull{margin-top:8px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,currentColor 7%,transparent);display:grid;gap:5px} .iqrfh{font-size:12px;font-weight:600;opacity:.85}.iqrfh small{font-weight:500;opacity:.7;margin-left:4px} .iqrf{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;font-size:13px;line-height:1.45}.iqrf span{opacity:.65;font-size:12px}.iqrf b{font-weight:500;white-space:pre-wrap;overflow-wrap:anywhere}.iqrf a{color:inherit} .iqrfm{display:grid;gap:3px;font-size:13px;line-height:1.55}.iqrfm span{opacity:.65;font-size:12px}.iqrfm div{white-space:pre-wrap;overflow-wrap:anywhere} /* owner 10-17: 견적 후 답 없음, the batch of AI follow-ups on 메일 지도 */ .fub{margin:0 0 14px;padding:14px 16px;border-radius:14px} .fubh{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .fubi{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,#ea580c 14%,var(--paper));color:#c2410c} .fubt{flex:1;min-width:200px;display:grid;gap:2px}.fubt b{font-size:15px;font-weight:600}.fubt small{font-size:13px;color:var(--ink3)} .fubb{display:flex;gap:8px;flex-wrap:wrap}.fubb .s,.fubb .p{height:36px;padding:0 14px;font-size:13px} .fubl{list-style:none;margin:10px 0 0;padding:0;display:grid} .fubl>li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 2px;border-top:1px solid var(--line)} .fubc input{width:17px;height:17px} .fubn{all:unset;cursor:pointer;flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.fubn b{font-size:14px;font-weight:600}.fubn span{font-size:13px;color:var(--ink3)}.fubn small{font-size:12px;color:#c2410c;font-weight:500} .fubs{font-style:normal;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--sink);color:var(--ink2)} .fubl>li.s-ok .fubs{background:color-mix(in srgb,#2563eb 12%,var(--paper));color:#1d4ed8}.fubl>li.s-sent .fubs{background:color-mix(in srgb,#15803d 14%,var(--paper));color:#15803d} .fubl>li.s-err .fubs,.fubl>li.s-dup .fubs{background:color-mix(in srgb,var(--pink-d) 12%,var(--paper));color:var(--pink-d)}.fubl>li.s-wr .fubs,.fubl>li.s-sending .fubs{animation:fubPulse 1.2s ease-in-out infinite} @keyframes fubPulse{50%{opacity:.45}} .fubl>li.s-sent{opacity:.6} .fubta{flex-basis:100%;width:100%;box-sizing:border-box;margin-top:4px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:13px;line-height:1.55;resize:vertical;background:var(--paper);color:var(--ink)} /* owner 10-17: the dashboard opening, cards rise in a soft stagger and content fades in over the skeletons, only during the first seconds */ @keyframes hvUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes hvFade{from{opacity:0}to{opacity:1}} html.hvboot #t-home>.hmhead,html.hvboot #t-home>.hmc,html.hvboot #t-home .hv>.hmc,html.hvboot #t-home .hvcol>.hmc{animation:hvUp .55s var(--out) backwards} html.hvboot #t-home>.hmc{animation-delay:.06s}html.hvboot #t-home .hv>.hmc{animation-delay:.12s} html.hvboot #t-home .hvcol>.hmc:nth-child(1){animation-delay:.18s}html.hvboot #t-home .hvcol>.hmc:nth-child(2){animation-delay:.24s}html.hvboot #t-home .hvcol>.hmc:nth-child(3){animation-delay:.3s} html.hvboot #t-home .hvcol>.hmc:nth-child(4){animation-delay:.36s}html.hvboot #t-home .hvcol>.hmc:nth-child(n+5){animation-delay:.42s} html.hvboot #t-home .hmc>*:not(.uisk){animation:hvFade .4s var(--out) backwards} #aixbrief.aixbrboot{min-height:188px;padding:16px 18px} #tstcard{grid-column:1/-1}#tstcard.tstboot{min-height:220px;padding:14px 16px} @media (prefers-reduced-motion:reduce){html.hvboot #t-home *{animation:none!important}} /* owner 10-17: 메모 할 일 is a yellow notebook page: warm paper, ruled lines between the to-dos, a soft spiral of holes on top */ #tdmcard.hmc{--paper:#FFF7CF;--wash:#FFFBE6;--sink:#F6E9A8;--line:#EAD58A;--ink:#3A2E05;--ink2:#6B5A1E;--ink3:#9A8540;color:var(--ink);position:relative;background:#FFF7CF;border-color:#F0DC8C;box-shadow:0 1px 2px rgba(120,90,0,.08),0 6px 18px -10px rgba(140,100,0,.25);padding-top:22px} #tdmcard.hmc::before{content:"";position:absolute;left:18px;right:18px;top:8px;height:6px;background:radial-gradient(circle,rgba(120,90,10,.28) 2.2px,transparent 2.6px) 0 0/22px 6px repeat-x;pointer-events:none} #tdmcard .hmch b{color:#5c4300} #tdmcard .tdmr{background:transparent} #tdmcard .tdmul>li+li{border-top:1px solid rgba(180,140,30,.25)} #tdmcard .tdmul{background:repeating-linear-gradient(transparent 0 35px,rgba(180,140,30,.12) 35px 36px)} #tdmcard .tdmadd{background:rgba(255,255,255,.6);border-color:#E9D27C}#tdmcard .tdmadd:focus-within{background:#fff;border-color:#C9A63A} #tdmcard .tdmn{background:rgba(180,140,30,.18);color:#5c4300} /* the notebook keeps its own paper and ink in the dark theme too */ /* owner 10-17: 원하는 것, visual and on point */ #iqdet .iqwant2 .iqwttl{font-size:15px;font-weight:600;line-height:1.45;color:var(--ink);margin:2px 0 8px} #iqdet .iqwant2 .iqwcs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px} #iqdet .iqwant2 .iqwc{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;background:var(--sink);color:var(--ink2);font-size:13px;font-weight:500;max-width:100%;min-width:0} #iqdet .iqwant2 .iqwc>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} #iqdet .iqwant2 .iqwc svg{flex:none;color:var(--ink3)} #iqdet .iqwant2 .iqwpts{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px} #iqdet .iqwant2 .iqwpts li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.45;color:var(--ink)} #iqdet .iqwant2 .iqwpts li>i{flex:none;width:24px;height:24px;border-radius:7px;display:inline-grid;place-items:center;background:color-mix(in srgb,var(--wc) 13%,var(--paper));color:var(--wc);margin-top:-2px} #iqdet .iqwant2 .iqwpts li>span{min-width:0;padding-top:1px} #iqdet .iqwant2 .c-doc{--wc:#2563eb}#iqdet .iqwant2 .c-sample{--wc:#7c3aed}#iqdet .iqwant2 .c-pack{--wc:#d97706}#iqdet .iqwant2 .c-price{--wc:#15803d} #iqdet .iqwant2 .c-formula{--wc:#db2777}#iqdet .iqwant2 .c-ship{--wc:#ea580c}#iqdet .iqwant2 .c-time{--wc:#0891b2}#iqdet .iqwant2 .c-globe{--wc:#0d9488}#iqdet .iqwant2 .c-qty{--wc:#4f46e5}#iqdet .iqwant2 .c-etc{--wc:#64748b} #iqdet .iqwant2 .wantv{margin:2px 0 10px} #iqdet .iqwant2 .wtq.no{display:none} #iqdet .iqwant2 .iqreqs{margin:0 0 8px;padding-top:8px;border-top:1px dashed var(--line)} #iqdet .iqwant2 .iqwnone{font-size:13px;color:var(--ink3);margin:0 0 8px} /* owner 10-17, picked design 1 조용한 카드: no stripes or bands, soft cards, the icon in a small tinted chip */ #iqdet#iqdet .iqbody{gap:10px} #iqdet#iqdet .iqbody>section:not(.iqtlsec):not(.iqcomp){box-shadow:0 1px 2px rgba(15,23,42,.05)!important;border:1px solid color-mix(in srgb,var(--line) 75%,transparent)!important;border-radius:14px!important} #iqdet#iqdet .iqbody>section.iqcard>h4{background:none!important;border-bottom:1px solid var(--line)!important} #iqdet#iqdet .iqbody>section>h4>svg,#iqdet#iqdet .iqbody>section>.iqfh2>svg{width:24px!important;height:24px!important;padding:5px;box-sizing:border-box;border-radius:7px;background:color-mix(in srgb,currentColor 10%,transparent)} .cnok{flex:none;margin-left:auto;font-style:normal;font-size:11px;font-weight:600;color:var(--ok);animation:sndPop var(--mo-state) var(--mo-spring)} @media (prefers-reduced-motion:reduce){.cnok{animation:none}} /* 샘플 박스 연구소 정보, owner 10-14: compact label rows like the detail */ .sbqdl{display:grid;grid-template-columns:76px minmax(0,1fr);gap:2px 10px;margin:6px 0 2px;font-size:12px;line-height:1.45} .sbqdl dt{color:var(--ink3);font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sbqdl dd{margin:0;min-width:0;color:var(--ink);overflow-wrap:anywhere} .sbqmk{margin-top:10px} /* clutter audit, owner 10-14 */ #t-fx #fxmemo{display:none} /* the 공장 정보 sub-tab right above opens the same page */ #ldlist .ldc .lr:has(> span > .ldnone:only-child){display:none} /* 채팅 요청 cards: rows that only say 기록 없음 */ @media (max-width:760px){#t-fx .mlhead>.s:not(#fxnew){min-height:34px;padding:0 10px;font-size:12px}#t-fx .mlhead{gap:6px}} /* one section header for the whole detail, owner 10-14: 44 px rows, an 18 px icon slot so every title starts at the same edge, title then meta on one centered line that truncates, actions on the right at 28 px, the chevron in a fixed slot at the far right */ #iqdet{--sh-ico:18px} #iqdet .iqbody{grid-template-columns:minmax(0,1fr)} #iqdet .iqbody>*{min-width:0} #iqdet .iqbody>section:not(.iqcomp){padding:0 0 12px} #iqdet .iqbody>section.cx:not(.cxopen),#iqdet .iqbody>section.emxiqs:has(> .emxsum.cx:not(.cxopen)):not(:has(> .emxb,> .emxrow,> .emxms)){padding-bottom:0} #iqdet .iqbody>.iqtop2{padding:10px 0 12px} #iqdet .iqbody :is(.emxsh,.mish,.qbiqh,.aixih,.iqmlsh),#iqdet .iqbody>section:is(.qscard,.smiq,.iqcard)>h4,#iqdet .iqbody>section>h3:first-child,#iqdet .iqbody .iqcard>h4{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;min-height:44px;margin:0!important;padding:0!important;background:none;border:0;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:0;min-width:0} #iqdet .iqbody .emxstg,#iqdet .iqbody .mistg{flex:1 1 auto;min-width:0;flex-wrap:nowrap;align-items:center;gap:8px;overflow:hidden;white-space:nowrap} #iqdet .iqbody .emxstg>*,#iqdet .iqbody .mistg>*{flex:none} #iqdet .iqbody .emxstg>small:last-child,#iqdet .iqbody .mistg>.missum{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} #iqdet .iqbody .emxstg b,#iqdet .iqbody .mistg b{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:0} /* the icon slot: a real icon where the section has one, a quiet mark where it has none, so the titles line up */ #iqdet .iqbody .emxstg b i{display:inline-grid;place-items:center;width:var(--sh-ico);margin-right:6px;font-size:14px} #iqdet .iqbody .iqcard>h4 svg,#iqdet .iqbody .iqmlsh>svg,#iqdet .iqbody .aixih>.aixsp{flex:none;width:var(--sh-ico)!important;height:16px;margin:0} #iqdet .iqbody .mistg b::before,#iqdet .iqbody .qbiqh>b::before,#iqdet .iqbody>section.qscard>h4::before,#iqdet .iqbody>section.smiq>h4::before,#iqdet .iqbody>section>h3:first-child::before{content:"";flex:none;display:inline-block;width:var(--sh-ico);height:14px;margin-right:6px;background:var(--ink3);-webkit-mask:var(--sh-m) center/14px 14px no-repeat;mask:var(--sh-m) center/14px 14px no-repeat;vertical-align:-2px} #iqdet .iqbody .mistg b{--sh-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E")} #iqdet .iqbody .qbiqh>b,#iqdet .iqbody>section.qscard>h4{--sh-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 12h7M9 16h5'/%3E%3C/svg%3E")} #iqdet .iqbody>section.smiq>h4,#iqdet .iqbody>section>h3:first-child{--sh-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 12h4l3-7 4 14 3-7h2'/%3E%3C/svg%3E")} #iqdet .iqbody .qbiqh>b,#iqdet .iqbody .mistg b{display:inline-flex;align-items:center} /* meta after the title: one line, muted */ #iqdet .iqbody :is(.emxsh,.mish,.qbiqh,.iqmlsh) small,#iqdet .iqbody>section:is(.qscard,.smiq)>h4 small,#iqdet .iqbody>section:is(.qscard,.smiq)>h4 .muted{font-size:12px;font-weight:500;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} /* actions on the right, one size; the chevron last in a fixed slot */ #iqdet .iqbody :is(.emxsh,.mish,.qbiqh,.iqmlsh,.aixih)>.s,#iqdet .iqbody :is(.emxsh,.mish,.qbiqh,.iqmlsh,.aixih)>button.s,#iqdet .iqbody>section:is(.qscard,.smiq)>h4>.s{min-height:28px!important;height:28px;padding:0 10px!important;font-size:12px;border-radius:8px;flex:none} #iqdet .iqbody .qbiqh>.s,#iqdet .iqbody>section.qscard>h4>.s{margin-left:auto} #iqdet .iqbody .mish>.misb:first-of-type,#iqdet .iqbody .mish>.s:first-of-type{margin-left:auto} #iqdet .iqbody :is(.emxsh,.mish)>.cxchev{width:28px;height:28px;flex:none;margin-left:2px} #iqdet .iqbody .emxsum.cx>.cxb>.cxi,#iqdet .iqbody .misiq.cx>.cxb>.cxi{padding-top:0} /* the 이메일과 기록 band keeps its tint, at the same height */ #iqdet .iqbody .iqtlh{min-height:44px;padding-top:0;padding-bottom:0;display:flex;align-items:center;gap:8px;box-sizing:border-box} #iqdet .iqbody .iqtlh>svg{width:var(--sh-ico);flex:none} #iqdet .iqbody>section>.fpc,#iqdet .iqbody>section .fpc:first-child{margin-left:0} @media (max-width:760px){#t-inq .iqhact .s{width:36px;height:36px;min-width:36px}} @media (max-width:760px){#iqdet .iqbody :is(.emxsh,.mish)>.s,#iqdet .iqbody .mish>.misb{display:none}#iqdet .iqbody .cxopen :is(.emxsh,.mish)>.s,#iqdet .iqbody .cxopen .mish>.misb{display:inline-flex}} /* 메일 내용 검색, owner 10-14 */ #iqq.msxbusy{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%238b5cf6' stroke-width='3' stroke-dasharray='40 20'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px 16px;background-position:right 34px center} .iqmsx{display:flex;align-items:baseline;gap:6px;font-size:12px;color:var(--ink2)} .iqmsx .wn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .iqmsx mark,.msxhit mark{background:color-mix(in srgb,#facc15 45%,transparent);color:inherit;border-radius:3px;padding:0 1px} .msxtag{flex:none;font-style:normal;font-size:11px;font-weight:600;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)} .iql2.msxhide{display:none!important} #iqlist:not(.dense) .iqmsx{margin-top:3px} #t-inq #iqlist .iql2.iqmsx{display:flex!important} #t-inq #iqlist .iqr:has(.iqmsx) .iqx .iqsum{display:none} .iqe.msxmark .iqec{box-shadow:0 0 0 2px color-mix(in srgb,#facc15 70%,transparent)} .iqe.msxhit .iqec{animation:msxFlash 1.6s var(--mo-ease) 1} @keyframes msxFlash{0%,30%{background-color:color-mix(in srgb,#facc15 22%,var(--paper))}100%{background-color:inherit}} @media (prefers-reduced-motion:reduce){.iqe.msxhit .iqec{animation:none}} .mdlang{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 6px;font-size:12px} .mdlangc{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info);font-weight:600} .mdlangs{display:inline-flex;align-items:center;gap:5px;color:var(--ink2);cursor:pointer} /* the AI buttons, owner 10-14: AI purple tint, a slow sheen and twinkling stars; AI로 쓰기 is the hero, .aitone a step quieter */ /* [claudedraft 10-16] a reply Claude wrote ahead: warm orange with a soft breathing glow, before anyone presses */ .s.cdready,.aibtn.aihero.cdready{background:#FF7A1F!important;border-color:#FF7A1F!important;color:#fff!important;box-shadow:none} .s.cdready:hover,.aibtn.aihero.cdready:hover{filter:brightness(1.05)} @keyframes cdGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,122,31,.45),0 2px 10px rgba(255,122,31,.25)}50%{box-shadow:0 0 0 6px rgba(255,122,31,0),0 2px 18px rgba(255,122,31,.5)}} @media (prefers-reduced-motion:reduce){.s.cdready,.aibtn.aihero.cdready{animation:none;box-shadow:none}} .aihero,.aitone{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:6px} .aihero:not(.aibusy){background:var(--sink);border:1px solid var(--line);color:var(--ink);font-weight:500} .aitone:not(.aibusy){background:var(--paper);border-color:var(--line);color:var(--ink2)} .aihero .aisp3,.aitone .aisp3{flex:none;color:currentColor} .aitone .aisp3{width:14px;height:14px} .aihero:not(.aibusy):not(:disabled):hover{box-shadow:none;border-color:var(--ink3)} .aitone:not(.aibusy):not(:disabled):hover{box-shadow:none;border-color:var(--ink3)} .aihero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);background-size:250% 100%;background-position:150% 0;animation:aiSheen 5.5s ease-in-out infinite} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .aihero:not(.aibusy){background:var(--sink);border-color:var(--line);color:var(--ink);--x:#e9ddff}:root:not([data-theme="light"]) .aitone:not(.aibusy){background:var(--paper);border-color:var(--line);color:var(--ink2)}:root:not([data-theme="light"]) .aihero .aisp3,:root:not([data-theme="light"]) .aitone .aisp3{color:#c4b0ff}:root:not([data-theme="light"]) .aihero::after{background-image:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%)}} :root[data-theme="dark"] .aihero:not(.aibusy){background:var(--sink);border-color:var(--line);color:var(--ink);--x:#e9ddff} :root[data-theme="dark"] .aitone:not(.aibusy){background:var(--paper);border-color:var(--line);color:var(--ink2)} :root[data-theme="dark"] .aihero .aisp3,:root[data-theme="dark"] .aitone .aisp3{color:#c4b0ff} :root[data-theme="dark"] .aihero::after{background-image:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%)} .aisp3 path{transform-box:fill-box;transform-origin:center} .aihero .aisp3 .st1{animation:aiTw 4s var(--mo-ease) infinite} .aihero .aisp3 .st2{animation:aiTw 4s var(--mo-ease) .5s infinite} .aihero .aisp3 .st3{animation:aiTw 4s var(--mo-ease) 1s infinite} .aitone .aisp3 .st2{animation:aiTw 6s var(--mo-ease) 1s infinite} .aitone .aisp3 .st3{animation:aiTw 6s var(--mo-ease) 1.6s infinite} @keyframes aiTw{0%,30%,100%{opacity:1;transform:scale(1)}12%{opacity:.35;transform:scale(.55)}20%{opacity:1;transform:scale(1.15)}} @keyframes aiSheen{0%,62%{background-position:150% 0}100%{background-position:-50% 0}} .aiburst{position:fixed;width:0;height:0;z-index:95;pointer-events:none} .aiburst i{position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--ink3);box-shadow:none;animation:aiFly 520ms var(--mo-ease) forwards} .aiburst i:nth-child(2n){background:#f0abfc;width:4px;height:4px} @keyframes aiFly{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.3)}} .mdc.din{position:relative} .mdc.din::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(127,127,127,.12) 50%,transparent 65%);background-size:250% 100%;background-position:150% 0;animation:aiLandSheen 900ms var(--mo-ease) 1 forwards} @keyframes aiLandSheen{to{background-position:-50% 0}} @media (prefers-reduced-motion:reduce){.aihero::after,.aisp3 path,.mdc.din::after{animation:none!important}.aiburst{display:none}} /* AI 견적 계산 popup, owner 10-14: backdrop fade, card scale in, Esc and scroll lock; a bottom sheet on a phone */ .qaipop{display:none} .qaipop.on{display:block;position:fixed;inset:0;z-index:80} .qaipbk{position:absolute;inset:0;background:rgba(10,12,16,.42);animation:mdFade var(--mo-state) var(--mo-ease)} .qaipc{position:absolute;left:50%;top:4vh;transform:translateX(-50%);width:min(1100px,calc(100vw - 32px));max-height:92vh;display:flex;flex-direction:column;background:var(--bg,var(--paper));border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.28);animation:qaipIn var(--mo-state) var(--mo-ease)} .qaiph{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex:none} .qaiph b{font-size:15px;font-weight:600;display:inline-flex;gap:6px;align-items:center} .qaiph b i{font-style:normal;color:var(--aic,#8b5cf6)} .qaipn{color:var(--ink3);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .qaipfull{all:unset;cursor:pointer;margin-left:auto;font-size:13px;color:var(--ink2);text-decoration:underline;text-underline-offset:3px} .qaipfull:hover{color:var(--ink)} .qaiph .s{min-height:30px;padding:0 12px} .qaipb{overflow:auto;padding:14px 16px 16px;overscroll-behavior:contain} #qaipop .qai-d{display:flex!important;padding-bottom:0} #qaipop [data-qaiback]{display:none} .qaipsk{display:grid;gap:10px} .qaipsk i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--sink) 25%,var(--wash) 50%,var(--sink) 75%);background-size:200% 100%;animation:aiSweep 1.4s linear infinite} .qaipsk i:first-child{width:40%;height:18px}.qaipsk i.s{width:60%} @keyframes qaipIn{from{opacity:0;transform:translateX(-50%) scale(.98)}to{opacity:1;transform:translateX(-50%)}} @media (max-width:760px){ .qaipc{left:0;right:0;top:auto;bottom:0;width:auto;max-height:92vh;transform:none;border-radius:16px 16px 0 0;animation:qaipUp var(--mo-state) var(--mo-ease)} .qaipfull{display:none} } @keyframes qaipUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.qaipbk,.qaipc,.qaipsk i{animation:none}} /* one filled primary per area, owner 10-14: 공장 작업 만들기 is a quiet secondary button in its section */ #iqdet .iqbody .fxfrom button.p{background:var(--paper);color:var(--ink);border:1px solid var(--line);min-height:28px;padding:0 10px;font-size:13px;border-radius:8px;box-shadow:none} #iqdet .iqwho .kv>span{min-width:0} #iqdet .iqwho .kv>span .kvlink{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* status chips on one line, owner 10-14; aligned 10-14: one baseline for label and count, equal padding, equal gaps, the same height as the toolbar */ #iqrs.rschips{container-type:inline-size;flex-wrap:nowrap;justify-content:space-between;gap:2px;padding:2px;border-radius:10px;background:var(--sink);overflow-x:auto;scrollbar-width:none;position:relative;isolation:isolate} #iqrs .rsc{flex:none;justify-content:center;align-items:baseline;height:28px;line-height:28px;padding:0 9px;gap:4px;border:0;border-radius:8px;background:transparent;font-size:12px;min-width:0} #iqrs .rsc .rsl,#iqrs .rsc .rss{line-height:28px} #iqrs .rsc b{font-size:11px;line-height:28px;font-weight:500;color:var(--ink3);font-variant-numeric:tabular-nums} #iqrs .rsc.on{background:var(--ink);color:var(--paper)} #iqrs.slid:has(> .segi) .rsc.on{background:transparent} #iqrs .rsc.on b{color:var(--paper);opacity:.75} #iqrs .rsc:before{width:6px!important;height:6px!important;align-self:center} #iqrs .segi{position:absolute;left:0;top:0;border-radius:8px;background:var(--ink);z-index:-1;pointer-events:none;transition:transform var(--mo-state) var(--mo-ease),width var(--mo-state) var(--mo-ease)} #iqrs .rss{display:none} /* the toolbar above: 30 px controls, 4 px apart, the right edge on the track edge */ #t-inq .iqhact{gap:4px} #t-inq .iqhact .s{width:30px;height:30px;min-width:30px;flex:none;border-radius:8px} #t-inq .iqhact .dens{height:30px;padding:2px;border-radius:10px;box-sizing:border-box} #t-inq .iqhact .dens button{height:26px;padding:0 9px;font-size:12px;line-height:26px} #iqrs.ovf{scroll-snap-type:x proximity} /* owner 10-14 iPhone: the top menu rows keep no mask while they scroll; the edge fades are overlays on the row around them (opacity only) */ header .nin,header .nin.more,header .nin.fl,header .nin.fr,header .nin.fl.fr,#nsub,#nsub.more{-webkit-mask-image:none;mask-image:none} header .nin,#nsub,#iqrs,.stnav,.mlseg{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} header nav{position:relative} header nav:before,header nav:after,.nsubw:before,.nsubw:after{content:"";position:absolute;top:0;bottom:0;width:28px;pointer-events:none;opacity:0;transition:opacity .18s var(--mo-ease);z-index:2} header nav:before,.nsubw:before{left:0;background:linear-gradient(90deg,var(--wash),transparent)} header nav:after,.nsubw:after{right:0;background:linear-gradient(270deg,var(--wash),transparent)} header nav.fl:before,header nav.fr:after,.nsubw.fl:before,.nsubw.fr:after{opacity:1} /* owner 10-14 iPhone: 한눈에 / 자세히 보기 is as tall as the icon buttons beside it, the pill inside the track */ @media (max-width:760px){#t-inq .iqhact{align-items:center}#t-inq .iqhact .dens{height:36px;padding:2px;align-items:stretch}#t-inq .iqhact .dens button{height:32px;min-height:0;line-height:32px;padding:0 10px;font-size:13px;display:inline-flex;align-items:center}} #iqrs.ovf.fl.fr{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%)} #iqrs.ovf.fl:not(.fr){-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px);mask-image:linear-gradient(90deg,transparent 0,#000 16px)} #iqrs.ovf.fr:not(.fl){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent 100%)} #iqrs.rsshort .rsc .rsl{display:none}#iqrs.rsshort .rsc .rss{display:inline}#iqrs.rsshort .rsc:not(.none):not(.quo):not(.again):not(.fup) .rsl{display:inline} #iqrs.rstight .rsc{padding:0 5px;gap:3px}#iqrs.rstight .rsc:before{display:none}#iqrs.rstight{gap:0} #t-inq .iqhead{flex-wrap:wrap;row-gap:6px} #t-inq .iqhead .ldttl{flex:1 0 auto;min-width:max-content} #t-inq .iqhead .iqhact{margin-left:auto} #iqcount{white-space:nowrap;font-size:13px;display:inline-flex;align-items:center} #iqcount .hdv{display:inline-block;width:1px;height:11px;background:var(--line);margin:0 7px} .newpillw{position:sticky;top:0;height:0;z-index:6;display:flex;justify-content:center;pointer-events:none} .newpillw.out{position:absolute} .newpill{pointer-events:auto;margin-top:8px;height:28px;padding:0 12px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:inherit;font-size:12px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.18);cursor:pointer;opacity:0;transform:translateY(-6px);transition:opacity var(--mo-state) var(--mo-ease),transform var(--mo-state) var(--mo-ease);visibility:hidden} .newpillw.on .newpill{opacity:1;transform:none;visibility:visible} /* steady heights, owner 10-14: fold headers keep one height whether their buttons are there yet or not */ #iqdet .iqbody .mish,#iqdet .iqbody .emxsh{min-height:44px;align-items:center} #iqdet .iqbody .mish .s,#iqdet .iqbody .emxsh .s{min-height:26px;height:26px;padding:0 9px;font-size:12px} .qssk{display:grid;gap:8px} .qscard.qssk{min-height:92px;align-content:start} .iqfxsk .qssk{margin-top:8px} .qssk>div{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--sink) 25%,var(--wash) 50%,var(--sink) 75%);background-size:200% 100%;animation:aiSweep 1.4s linear infinite} .qssk1{width:38%;height:14px!important}.qssk2{width:86%}.qssk2.s{width:64%} @media (prefers-reduced-motion:reduce){.qssk>div{animation:none}} #iqdet .mm img,#iqdet .iqe img,#mldet .mm img{max-width:100%;height:auto} /* the … menu in the detail header */ .iqhm{position:relative;display:inline-flex} #iqdet .lddh .h>.iqhm{order:11} /* owner 10-17: the last icon on the right; phones keep their own order */ .iqhmp{position:absolute;top:calc(100% + 6px);right:0;z-index:40;display:grid;gap:2px;min-width:180px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 12px 32px rgba(0,0,0,.18);transform-origin:top right} .iqhmp>button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap} .iqhmp>button:hover,.iqhmp>button:focus-visible{background:var(--sink)} .iqhmp>button svg{width:15px;height:15px;color:var(--ink3);flex:none} .iqhmp>.frtog.on{color:var(--ok);font-weight:600} .popin{animation:popIn var(--mo-state) var(--mo-ease) backwards} @keyframes popIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.popin{animation:none}} /* micro interactions, owner 10-14: one press, one hover lift, a focus ring that fades in, sliding indicators, quick panel entrances. Transform and opacity only, 120 to 240 ms, triggered by a click or a one-shot key so repaints never replay them; all off with reduced motion */ .mlseg{position:relative;isolation:isolate}.stnav{isolation:isolate} .mlseg .segi,.stnav .segi{position:absolute;left:0;top:0;width:0;height:0;border-radius:8px;z-index:-1;pointer-events:none;transition:transform var(--mo-state) var(--mo-ease),width var(--mo-state) var(--mo-ease),height var(--mo-state) var(--mo-ease)} .mlseg .segi{background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.08)} .stnav .segi{background:var(--ink);border-radius:10px} .mlseg.slid:has(> .segi) button.on{background:transparent;box-shadow:none} .stnav.slid:has(> .segi) button.on{background:transparent;border-color:transparent} .lbt.cpd{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--line))} .lbt.cpd svg{margin-right:3px;vertical-align:-1px} @media (prefers-reduced-motion:no-preference){ .s,.p,.lbt,.iqstarb,.frtog,.callbtn,.dens button,.mlseg button,.rschips button,.nsub button,.stnav button{transition:background-color var(--mo-state) var(--mo-ease),border-color var(--mo-state) var(--mo-ease),color var(--mo-state) var(--mo-ease),box-shadow var(--mo-state) var(--mo-ease),transform var(--mo-press) var(--mo-ease)} button:not(:disabled):active,a.s:active,a.p:active,.s:active,.p:active,.lbt:active,.iqstarb:active,.frtog:active,.dens button:active,.seg button:active,.iqtiers button:active,.callbtn:active,.ntbell:active,.th:active,.fsz button:active,.mdsend:active{transform:scale(.97);transition-duration:var(--mo-press)} .s:not(:disabled):not(:active):hover,.p:not(:disabled):not(:active):hover,.lbt:not(:disabled):not(:active):hover{transform:translateY(-1px)} :where(button,a,input,select,textarea,summary):focus-visible{animation:focusIn var(--mo-state) var(--mo-ease)} input[type=checkbox]:active,input[type=radio]:active{transform:scale(.88)} input[type=checkbox],input[type=radio]{transition:transform var(--mo-press) var(--mo-ease)} section.tabin,.stsec.tabin{animation:tabIn6 var(--mo-state) var(--mo-ease)} .lddet.detin>*{animation:tabIn6 180ms var(--mo-ease)} .menu,.epick,.pop{animation:popIn var(--mo-state) var(--mo-ease) backwards} .modal{animation:mdFade var(--mo-state) var(--mo-ease)} .mbox{animation:mbIn var(--mo-state) var(--mo-ease)} .iqstarb.popt svg{animation:starPop var(--mo-success) var(--mo-spring)} .lbt.cpd svg{animation:sndPop var(--mo-state) var(--mo-spring)} #iqlist .iqr,.mli,.ri,.qai-row,tr{transition:background-color var(--mo-state) var(--mo-ease),box-shadow var(--mo-state) var(--mo-ease)} #mldet.detin>*{animation:tabIn6 180ms var(--mo-ease)} .cbump{display:inline-block;animation:cBump var(--mo-state) var(--mo-ease)} .askov{transition:opacity var(--mo-state) var(--mo-ease)} } @keyframes tabIn6{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* owner 10-17, picked concept 8 위에서 펼침: switching to another customer, mail, sample or payment unfolds the new content from the top like opening a document, instead of the slide up; the header leads and the body follows a beat later */ @keyframes unfold8{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}} html body .lddet.detin>*,html body #mldet.detin>*,html body .modetin>*{animation:unfold8 .4s cubic-bezier(.4,0,.2,1) backwards} html body .lddet.detin>*:nth-child(2),html body #mldet.detin>*:nth-child(2),html body .modetin>*:nth-child(2){animation-delay:.05s} html body .lddet.detin>*:nth-child(n+3),html body #mldet.detin>*:nth-child(n+3),html body .modetin>*:nth-child(n+3){animation-delay:.09s} @media (prefers-reduced-motion:reduce){html body .lddet.detin>*,html body #mldet.detin>*,html body .modetin>*{animation:none!important}} /* owner 10-19: clicking through a list shows the next customer at once, no entrance animation on any detail pane */ html body .lddet.detin>*,html body #mldet.detin>*,html body .modetin>*,html body .lddet.detin>*:nth-child(n){animation:none!important} @keyframes focusIn{from{outline-color:transparent}} @keyframes mbIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}} @keyframes cBump{0%{transform:none}45%{transform:scale(1.22)}100%{transform:none}} .nsub{position:relative;isolation:isolate} .nsub .segi{position:absolute;left:0;top:0;border-radius:9px;background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.08),0 0 0 1px var(--line);z-index:-1;pointer-events:none;transition:transform var(--mo-state) var(--mo-ease),width var(--mo-state) var(--mo-ease)} .nsub.slid:has(> .segi) button.on{background:transparent;box-shadow:none;border-color:transparent} @media (min-width:761px) and (prefers-reduced-motion:no-preference){.askov .askdlg{transform:scale(.98);transition:transform var(--mo-state) var(--mo-ease)}.askov.in .askdlg{transform:none}} @keyframes starPop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:none}} @media (prefers-reduced-motion:no-preference){ #iqdet .iqbody>section,#iqdet .iqbody>.iqtop2{transition:none} } /* layout pass, owner 10-14 ("inconsistent gaps between cards and elements, and broken elements"): one spacing scale, 4 8 12 16 24. The 공장 job page: every block 12 apart on one 16 gutter (12 on a phone), 16 inside every card (12 phone), 12 inside a product card, label to field 4, field rows 12 apart, buttons and fields one height (38) and 8 apart, one radius (12 cards, 10 fields) */ #fxdet>*:not(.mdh):not(.fxdbk):not(.fxdrawer):not(.ldempty){margin:12px 16px 0} #fxdet>*:not(.fxdbk):not(.fxdrawer):last-child{margin-bottom:24px} #fxdet>.fxc{padding:16px;border-radius:12px} #fxdet .fxcl{padding:0 2px;margin-bottom:0} #fxdet .fxit{padding:12px;border-radius:12px}#fxdet .fxits{gap:12px;margin:8px 0 12px} #fxdet .fxgrid{gap:12px;grid-auto-flow:row dense;align-items:start} #fxdet .fxduew{display:flex;flex-wrap:wrap;gap:8px;align-items:center}#fxdet .fxduew .fxduec{margin:0} #fxdet .fx2oq{gap:8px}#fxdet .fx2oqr{gap:12px}#fxdet label.fxl{margin:0;gap:4px} #fxdet .fxgo,#fxdet .fxitb,#fxdet .fxduec,#fxdet .fxpics{gap:8px} #fxdet .fxgo{margin-top:12px}#fxdet .fxpics{margin:0} #fxdet .fxgo>button,#fxdet .fxgo>select,#fxdet .fxgo>.fxsts{height:38px;min-height:38px;box-sizing:border-box;padding-top:0;padding-bottom:0} #fxdet input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]),#fxdet select{height:38px;min-height:38px;box-sizing:border-box;border-radius:10px} #fxdet button.s:not(.sm):not(.ico):not(.fxakc):not(.fxfn),#fxdet button.p:not(.sm){height:38px;min-height:38px;padding-top:0;padding-bottom:0;box-sizing:border-box} #fxdet button.s.ico:not(.sm){width:38px;height:38px;min-height:38px} #fxdet button.s.sm{height:32px;min-height:32px;padding:0 10px;box-sizing:border-box;font-size:13px} #fxdet input[type=date]{padding:0 10px;width:auto;min-width:150px} #fxdet textarea{border-radius:10px} #fxdet .fxans{margin-left:16px;margin-right:16px} @media (max-width:1700px){#t-fx .fxacth span{display:none}} /* owner 10-14 layout: the 공장 header stays one row; the hint is in the title */ .mlhead .trashb{margin-left:0;flex:none;height:36px;padding:0 10px;font-size:13px} @media (max-width:760px){#fxdet input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]),#fxdet select,#fxdet button.s:not(.sm):not(.ico):not(.fxakc):not(.fxfn),#fxdet button.p:not(.sm),#fxdet .fxgo>button,#fxdet .fxgo>select{height:44px;min-height:44px}#fxdet button.s.ico:not(.sm){width:44px;height:44px;min-height:44px}#fxdet button.s.sm{height:40px;min-height:40px}#fxdet>*:not(.mdh):not(.fxdbk):not(.fxdrawer):not(.ldempty){margin:12px 12px 0}#fxdet>.fxc{padding:12px}#fxdet .fxans{margin-left:12px;margin-right:12px}} /* [ui-consistency 10-15] one spacing, radius and control scale for the whole console, owner 10-15 "fix inconsistent gaps". New and touched rules use these tokens; older rules keep their own values until they are moved here */ :root{--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px; --card-pad:16px;--card-pad-x:18px;--sec-gap:12px;--ctl-h:36px;--ctl-h-sm:30px;--ctl-h-lg:44px; --r-sm:8px;--r-md:10px;--r-lg:14px;--r-pill:99px} @media (max-width:760px){:root{--card-pad:14px;--card-pad-x:14px;--sec-gap:12px}} /* [ui-consistency 10-15] 설정 left menu: headings, a filter box, compact rows; the column is sticky and scrolls on its own so the last item is never cut off (owner 10-15 "i cant scroll down in this setting"); phones get a select instead of the long list */ .stside{position:sticky;top:var(--stn-top,122px);max-height:calc(100vh - var(--stn-top,122px) - 16px);display:flex;flex-direction:column;gap:var(--sp-2);min-height:0;min-width:0} .stside .stnav{position:relative;top:auto;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;gap:1px;padding:0 2px var(--sp-2) 0;scrollbar-width:thin} .stside .stnav button{flex:none;height:32px;padding:0 10px;gap:9px;border-radius:var(--r-sm);font-size:13px;font-weight:500} .stside .stnav button svg{width:16px;height:16px} .stside .stnav .segi{border-radius:var(--r-sm)} .stside .stnav:not(.slid) .segi{opacity:0} .stside .stnav .stdz{margin-top:var(--sp-3)} .stside .stnav .stdz::before{left:10px;right:10px;top:-6px} .stnav .stf-x{display:none!important} .stgh{flex:none;padding:var(--sp-3) 10px var(--sp-1);font-size:11px;font-weight:600;line-height:1.4;color:var(--ink3);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stnav .stgh:first-of-type{padding-top:2px} .stnone{padding:var(--sp-2) 10px;font-size:12px;color:var(--ink3)} .stfind{position:relative;flex:none} .stfind svg{position:absolute;left:10px;top:50%;width:14px;height:14px;margin-top:-7px;fill:none;stroke:var(--ink3);stroke-width:2;stroke-linecap:round;pointer-events:none} .stfind input[type=search]{height:var(--ctl-h-sm);padding:0 10px 0 30px;border-radius:var(--r-sm);font-size:13px;background:var(--paper)} .stsel{display:none} @media (max-width:760px){ .stside{display:none} .stw>select.stsel{display:block;width:100%;height:var(--ctl-h-lg);font-size:16px;font-weight:500;border-radius:var(--r-md);padding:0 12px} } @media (min-width:1600px){.stw{max-width:1240px}} .card>.chd:last-child{margin-bottom:0} /* [ui-consistency 10-15] 통합 문의 detail: every section title starts at the same x (an 18px icon slot plus an 8px gap), every section header is 44px with 28px buttons, and a card dropped into the flat list reads like the other sections */ #iqdet .iqbody>section>h3:first-child::before,#iqdet .iqbody>section.smiq>h4::before,#iqdet .iqbody>section.qscard>h4::before{margin-right:0} #iqdet .iqbody .mistg b::before,#iqdet .iqbody .qbiqh>b::before,#iqdet .iqbody .emxstg b i{margin-right:var(--sp-2)} #iqdet .iqbody>section.iqcalls>h4{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sp-2);min-height:44px;margin:0;padding:0;font-size:13px;font-weight:600} #iqdet .iqbody>section.iqcalls>h4>svg{flex:none;width:var(--sh-ico);height:14px;color:var(--ink3)} #iqdet .iqbody>section.iqcalls>h4>.crxadd{height:28px;padding:0 10px;border-radius:var(--r-sm);box-sizing:border-box} #iqdet .iqbody .mish .s,#iqdet .iqbody .emxsh .s{min-height:28px;height:28px;padding:0 10px} #iqdet .iqbody>.card{border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none;margin:0;padding:var(--sp-3) 0} @media (min-width:761px){#iqdet .lddh .iqtiers button{height:34px;min-width:34px}} /* [ui-consistency 10-15] buttons and fields in one row share one height. .p had no border and sat 2px shorter than .s next to it; page toolbars (search, filters, actions) are 36px on a computer, phones keep their 44px touch rules */ .p{border:1px solid transparent} @media (min-width:761px){ :is(.mlhead,.qbhd,.kbtop,.mlfilt)>:is(button.s,button.p,a.s,a.p,select,input[type=search],input[type=text]):not(.sm){height:var(--ctl-h);min-height:var(--ctl-h);padding-top:0;padding-bottom:0;box-sizing:border-box} :is(.mlhead,.qbhd,.kbtop,.mlfilt)>:is(button.s,button.p,a.s,a.p):not(.sm){display:inline-flex;align-items:center;justify-content:center;gap:6px} :is(.mlhead,.qbhd,.kbtop,.mlfilt)>button.ico:not(.sm){width:var(--ctl-h);padding:0} } /* [ui-consistency 10-15] cards and tiles: top level cards 14px corners, number tiles 12px 14px padding, empty states one size */ .hmc,.imz{border-radius:var(--r-lg)} html body :is(.optile,.sxtile,.kpi,.kpit,.fxtile){padding:var(--sp-3) 14px;border-radius:var(--r-lg)} .ldempty{padding:32px var(--sp-4)} html body :is(.chf-empty,.qai-empty,.lguempty){padding:32px var(--sp-4);border-radius:var(--r-lg)} @media (max-width:760px){html body :is(.optile,.sxtile,.kpi,.kpit,.fxtile){padding:10px 12px;border-radius:12px}} /* the gap between stacked blocks on a page is 12px everywhere (it was 8, 10, 12 or 14 by page) */ .card,.masonry .card{margin-bottom:var(--sec-gap)} .masonry{column-gap:var(--sec-gap)} .hv,.hvcol{gap:var(--sec-gap)} .sxsegw{margin-bottom:var(--sec-gap)} html body .calbar{margin-bottom:var(--sec-gap)} /* [ui-consistency 10-15] list and detail pages: one list width, a little wider on big screens; single list pages one cap */ :root{--list-w:clamp(380px,28vw,480px)} @media (min-width:1000px){ html body :is(.qbwrap,.sxwrap,#t-cl .clmwrap,#t-ex .exwrap,#t-sh2 .exwrap,#t-ct .ctrwrap,#t-smp .opwrap,#t-pay .opwrap,#t-fx .mlwrap){grid-template-columns:minmax(300px,var(--list-w)) minmax(0,1fr)} html body .qai{grid-template-columns:minmax(300px,var(--list-w)) minmax(0,1fr);gap:12px} } html body :is(.snt,.kca,.chf){max-width:min(1600px,100%)} /* [ui-consistency 10-15] chips: status chips 22px, count and meta chips 20px, text centered the same way everywhere */ :root{--chip-h:22px;--chip-h-sm:20px} html body :is(.opchip,.sppd,.sxk,.kca-st,.snt-st,.opdir){display:inline-flex;align-items:center;min-height:var(--chip-h);padding-top:0;padding-bottom:0;line-height:1.3;box-sizing:border-box;vertical-align:middle} html body :is(.mlchip,.pyq-tag,.kca-tag,.tstrole){display:inline-flex;align-items:center;min-height:var(--chip-h-sm);padding-top:0;padding-bottom:0;line-height:1.3;box-sizing:border-box;vertical-align:middle} @media (min-width:761px){.tools2>:is(input[type=search],button.s:not(.ico)){height:34px;min-height:34px;padding-top:0;padding-bottom:0}} /* [ui-consistency 10-15] 샘플 and 결제 detail header: 통합 문의에서 열기 and 마이페이지 미리보기 joined 환불하고 취소 and 휴지통으로 (owner 10-15); the title keeps at least 220px and the buttons wrap under it on a narrow pane or a phone */ #t-smp .opdh,#t-pay .opdh{flex-wrap:wrap;row-gap:var(--sp-2)} #t-smp .opdh>.opdt,#t-pay .opdh>.opdt{flex:1 1 220px} @media (max-width:760px){#t-smp .opdh>button.s:not(.opback),#t-pay .opdh>button.s:not(.opback){flex:1 1 auto}} #tierhv{position:fixed;z-index:10050;max-width:280px;min-width:170px;background:#1d2026;color:#fff;border-radius:10px;padding:9px 11px;font-size:12px;line-height:1.45;box-shadow:0 8px 24px rgba(0,0,0,.22);pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity .14s ease,transform .14s ease} #tierhv.on{opacity:1;transform:none} #tierhv .thvh{color:#aab2bf;font-size:12px;margin-bottom:5px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.12)} #tierhv .thvt{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px} #tierhv .thvb{margin-top:3px;font-weight:600} #tierhv .thvd,#tierhv .thvm{color:#cbd2dc;font-size:12px}#tierhv .thvd span{color:#8d96a3} #tierhv .thvp{margin-top:6px;padding-top:5px;border-top:1px solid rgba(255,255,255,.12);color:#8d96a3;font-size:11px} #tierhv .thvl{font-size:12px;color:#e4e7ec}#tierhv .thvl span{color:#8d96a3} @media (prefers-reduced-motion:reduce){#tierhv{transition:none}} /* 통합 문의 detail as separate cards, owner 10-16: the blocks all looked the same with no lines or color. Each block is a white card on a light wash with its own accent: a colored left edge and a colored icon. 원하는 것 leads in pink; info rows get faint dividers */ #iqdet .iqbody{background:var(--wash);gap:10px;padding-top:10px;padding-bottom:16px} #iqdet#iqdet .iqbody>section:not(.iqcomp){--acc:#94a3b8;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:0 14px 12px 16px;margin:0;box-shadow:inset 3px 0 0 var(--acc),0 1px 2px rgba(15,23,42,.04)} #iqdet .iqbody>section:not(.iqcomp)+section:not(.iqcomp){border-top:1px solid var(--line)} #iqdet#iqdet .iqbody>section.cx:not(.cxopen):not(.iqcomp),#iqdet#iqdet .iqbody>section.emxiqs:has(> .emxsum.cx:not(.cxopen)):not(:has(> .emxb,> .emxrow,> .emxms)):not(.iqcomp){padding-bottom:0} #iqdet .iqbody>.iqtop2{padding:0} #iqdet .iqbody>.iqtop2:empty{display:none} #iqdet .iqbody>section.iqcard{--acc:var(--pink);border-color:color-mix(in srgb,var(--pink) 30%,var(--line))} #iqdet .iqbody>section.iqcard>h4{margin:0 -14px 10px -16px!important;padding:0 14px 0 16px!important;background:color-mix(in srgb,var(--pink) 7%,var(--paper));border-bottom:1px solid color-mix(in srgb,var(--pink) 18%,var(--line));border-radius:11px 11px 0 0} #iqdet .iqbody>section.iqcalls{--acc:#16a34a} #iqdet .iqbody>section.iqwho{--acc:#64748b} #iqdet .iqbody>section.emxiqs{--acc:var(--ink2)} #iqdet .iqbody>section.misiq{--acc:#ea580c} #iqdet .iqbody>section.qbiq,#iqdet .iqbody>section.qscard{--acc:#2563eb} #iqdet .iqbody>section.smoc,#iqdet .iqbody>section.smiq{--acc:#0d9488} #iqdet .iqbody>section.aixiq{--acc:#c026d3} #iqdet .iqbody>section.saciq{--acc:#0284c7} #iqdet .iqbody>section.iqmlst{--acc:#4f46e5} #iqdet .iqbody>section.exiq{--acc:#65a30d} #iqdet .iqbody>section:has(> h3:first-child){--acc:#0891b2} #iqdet#iqdet .iqbody>section.iqtlsec{--acc:#475569;padding-top:0} #iqdet .iqbody>section.iqtlsec>h4.iqtlh{margin:0 -14px 12px -16px;padding-left:16px;border-top:0;border-radius:11px 11px 0 0} /* icons take the card color */ #iqdet .iqbody>section>h4>svg,#iqdet .iqbody>section .iqmlsh>svg,#iqdet .iqbody>section .aixih>.aixsp,#iqdet .iqbody>section.iqtlsec>h4>svg{color:var(--acc)!important} #iqdet .iqbody>section .mistg b::before,#iqdet .iqbody>section .qbiqh>b::before,#iqdet .iqbody>section.qscard>h4::before,#iqdet .iqbody>section.smiq>h4::before,#iqdet .iqbody>section>h3:first-child::before,#iqdet .iqbody>section>.iqwhoh::before{background:var(--acc)} /* 고객 정보 header, then key and value rows with faint dividers */ #iqdet .iqbody>section.iqwho>.iqwhoh{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:0} #iqdet .iqbody>section.iqwho>.iqwhoh::before{content:"";flex:none;width:var(--sh-ico);height:14px;-webkit-mask:var(--sh-m) center/14px 14px no-repeat;mask:var(--sh-m) center/14px 14px no-repeat;--sh-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4.5-6 8-6s7 2 8 6'/%3E%3C/svg%3E")} /* owner 10-22 UI pass: the 특별 조건 card matches the other detail sections (44px head with an icon, tinted when there are terms) */ #iqdet .iqbody>section.ofr{padding-bottom:0}#iqdet .iqbody>section.ofr.on{padding-bottom:10px;background:color-mix(in srgb,var(--mint) 55%,var(--paper))!important} #iqdet .iqbody>section.ofr>.ofrh{min-height:44px;gap:8px}#iqdet .iqbody>section.ofr>.ofrh>b{font-size:13px} #iqdet .iqbody>section.ofr>.ofrh::before{content:"";flex:none;width:var(--sh-ico);height:14px;background:var(--ink3);-webkit-mask:var(--sh-m) center/14px 14px no-repeat;mask:var(--sh-m) center/14px 14px no-repeat;--sh-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E")} #iqdet .iqbody>section.ofr.on>.ofrh::before{background:var(--ok)} #t-inq #iqdet .iqbody>section.iqwho.cmp{padding-top:0;padding-bottom:6px} #t-inq #iqdet .iqwho.cmp .kv{min-height:32px;padding:4px 0;border-bottom:1px dashed color-mix(in srgb,var(--ink) 9%,transparent)} #t-inq #iqdet .iqwho.cmp .kv>b{color:var(--ink3);font-weight:500} #iqdet .iqbody>section[class="iqsec"]>h4:first-child{display:flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:0} @media (max-width:760px){#iqdet .iqbody{padding-left:10px;padding-right:10px}#iqdet#iqdet .iqbody>section:not(.iqcomp){padding-left:14px;padding-right:12px}#iqdet .iqbody>section.iqcard>h4,#iqdet .iqbody>section.iqtlsec>h4.iqtlh{margin-left:-14px!important;margin-right:-12px!important;padding-left:14px!important}} #iqdet#iqdet .iqbody>section.cx:not(.cxopen){gap:0} /* a folded card is only its 44 px header, like AI 요약 */ /* owner 10-16: the 이메일과 기록 part is dark, so where the emails start is clear at a glance; the mail bubbles stay light inside it */ #iqdet#iqdet .iqbody>section.iqtlsec{--acc:#64748b;background:#1d2026;border-color:#1d2026;color:#e8eaee;box-shadow:0 1px 3px rgba(15,23,42,.18)} #iqdet .iqbody>section.iqtlsec>h4.iqtlh{background:#111317;color:#fff;border-bottom:1px solid #2c3038} #iqdet .iqbody>section.iqtlsec>h4.iqtlh>svg{color:#cbd2dc!important} #iqdet .iqtlh .iqtln{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff} #iqdet .iqtlh small{color:#aab2bf} #iqdet .iqtlh .iqtlml{margin-left:8px;height:30px;min-height:30px;padding:0 10px;font-size:12px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff}#iqdet .iqtlh .iqtlml:hover{background:rgba(255,255,255,.16)} /* owner 10-17: the language switch lives on the dark 이메일 기록 bar now, with the full screen button at the end */ #iqdet .iqtlh .iqtrsw{margin:0;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);padding:2px;border-radius:9px;flex:none} #iqdet .iqtlh .iqtrsw button{height:26px;min-height:26px;padding:0 9px;font-size:12px;color:#c4cbd6;border-radius:7px} #iqdet .iqtlh .iqtrsw button.on{color:#111317}#iqdet .iqtlh .iqtrsw .segi{background:#fff;box-shadow:none} #iqdet .iqtlh .iqtrsw button:hover:not(.on){color:#fff} #iqdet .iqtlh .iqtrsw.trbusy .segi{background-color:#fff;background-image:linear-gradient(100deg,transparent 25%,rgba(127,127,127,.22) 50%,transparent 75%);background-size:240% 100%;background-repeat:no-repeat} #iqdet .iqtlh .iqtrsw.trbusy button.on{color:#6d28d9} #iqdet .iqtlh .iqtrsw.trbusy::after{background:#8b5cf6;box-shadow:0 0 0 2px #0b0c0f} #iqdet .iqtlh .iqtlx{width:30px;height:30px;min-height:30px;padding:0;display:inline-grid;place-items:center;flex:none;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff} #iqdet .iqtlh .iqtlx:hover{background:rgba(255,255,255,.18)} #iqdet .iqtlh .iqtlw{height:30px;min-height:30px;padding:0 12px;font-size:13px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;flex:none;background:#fff;color:#111317;border:0} /* the full screen history: a centered sheet over a dim page; next to the big editor it takes the left half and the editor the right */ .iqhbk{position:fixed;inset:0;z-index:69;background:rgba(12,12,16,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mdFade .2s var(--out)} #iqdet#iqdet .iqbody>section.iqtlsec.hfs{position:fixed;z-index:70;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1100px,calc(100vw - 40px));height:92vh;max-height:none;margin:0;padding-top:0;overflow:auto;overscroll-behavior:contain;border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.42);animation:mdPop .26s var(--out)} #iqdet#iqdet .iqbody>section.iqtlsec.hfs>h4.iqtlh{position:sticky;top:0;z-index:3;border-radius:16px 16px 0 0} #iqdet#iqdet .iqbody>section.iqtlsec.hsd{left:20px;top:4vh;transform:none;width:calc(50vw - 30px);animation:hsIn .26s var(--out)} #iqdet .iqbody:has(>section.iqtlsec.hsd) .mdc.big{left:calc(50vw + 10px);transform:translateY(-50%);width:calc(50vw - 30px);animation:mdFade .2s var(--out)} @keyframes hsIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}} .mdhist.on{background:var(--ink);color:var(--paper);border-color:var(--ink)} @media (max-width:760px){#iqdet#iqdet .iqbody>section.iqtlsec.hfs,#iqdet#iqdet .iqbody>section.iqtlsec.hsd{left:0;top:0;transform:none;width:100vw;height:100dvh;border-radius:0;animation:mdFade .2s var(--out)}#iqdet#iqdet .iqbody>section.iqtlsec.hfs>h4.iqtlh{border-radius:0}.mdhist{display:none}} @media (prefers-reduced-motion:reduce){#iqdet .iqbody>section.iqtlsec.hfs,.iqhbk{animation:none!important}}#iqdet#iqdet .iqbody>section.iqtlsec.hkeep,#iqdet .iqhbk.hkeep{animation:none!important} /* owner 10-17: the stage line in color. Every stage has its own color, the line between two done stages runs from one color into the next, the current stage pulses softly and the next one waits in a dashed ring. The line draws in once when a customer opens */ .cst .cstp{--c:var(--ink3);gap:0} .cst .cstp li.s1{--c:#3b82f6}.cst .cstp li.s2{--c:#06b6d4;--pc:#3b82f6}.cst .cstp li.s3{--c:#8b5cf6;--pc:#06b6d4} .cst .cstp li.s4{--c:#f59e0b;--pc:#8b5cf6}.cst .cstp li.s5{--c:#ec4899;--pc:#f59e0b}.cst .cstp li.s6{--c:#10b981;--pc:#ec4899} .cst .cstp li{padding-top:20px;transition:color .3s var(--ease)} .cst .cstp li:before{top:3px;width:13px;height:13px;margin-left:-6.5px;border-width:2px;transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--snap)} .cst .cstp li:after{top:8px;height:3px;border-radius:3px;transform-origin:left center} .cst .cstp li.on{color:var(--ink)} .cst .cstp li.on:before{background:var(--c);border-color:var(--c)} .cst .cstp li.on:after{background:linear-gradient(90deg,var(--pc,var(--c)),var(--c))} .cst .cstp li.on small{color:var(--c);font-weight:500} .cst .cstp li.cur:before{transform:scale(1.15);animation:cstPulse 2.4s ease-out infinite} .cst .cstp li.nx{color:var(--ink2)}.cst .cstp li.nx:before{border-style:dashed;border-color:var(--c);background:var(--paper)} .cst .cstp li:hover:before{transform:scale(1.2)} @keyframes cstPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 45%,transparent)}70%{box-shadow:0 0 0 7px color-mix(in srgb,var(--c) 0%,transparent)}100%{box-shadow:0 0 0 0 transparent}} .cst.anim .cstp li.on:after{animation:cstFill .45s var(--out) backwards;animation-delay:calc(var(--i) * 110ms + var(--el, 0ms))} .cst.anim .cstp li.on:before{animation:cstPop .35s var(--snap) backwards;animation-delay:calc(var(--i) * 110ms + 60ms + var(--el, 0ms))} .cst.anim .cstp li.cur:before{animation:cstPop .35s var(--snap) backwards,cstPulse 2.4s ease-out infinite;animation-delay:calc(var(--i) * 110ms + 60ms + var(--el, 0ms)),calc(var(--i) * 110ms + 500ms + var(--el, 0ms))} @keyframes cstFill{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes cstPop{from{transform:scale(.3);opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){.cst .cstp li:before,.cst .cstp li:after{animation:none!important}} #iqdet .iqtlsec .iqec{color:var(--ink)} #iqdet .iqtlsec .iqe.d-int .iqec{background:color-mix(in srgb,var(--paper) 94%,var(--ink));border-color:color-mix(in srgb,var(--ink) 35%,var(--line))} /* owner 10-16: team-only entries (chat, memo) were see-through on the dark band; a soft paper card, still dashed */ #iqdet .iqtlsec :is(.iqday,.iqday span,.ldnone){color:#aab2bf} #iqdet .iqtlsec .iqday::before,#iqdet .iqtlsec .iqday::after{background:#2c3038;border-color:#2c3038} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #iqdet#iqdet .iqbody>section.iqtlsec{background:#0b0c0f;border-color:#2a2d35}:root:not([data-theme="light"]) #iqdet .iqbody>section.iqtlsec>h4.iqtlh{background:#000}} :root[data-theme="dark"] #iqdet#iqdet .iqbody>section.iqtlsec{background:#0b0c0f;border-color:#2a2d35}:root[data-theme="dark"] #iqdet .iqbody>section.iqtlsec>h4.iqtlh{background:#000} /* owner 10-17: 이메일 기록 reads like iMessage in dark mode. The customer on the left in grey bubbles, our mail on the right in blue, team-only entries as quiet dashed notes in the middle, the day as a small centered label. No timeline line or icon dots here */ #iqdet#iqdet .iqbody>section.iqtlsec,:root #iqdet#iqdet .iqbody>section.iqtlsec{background:#000;border-color:#1c1c1e;color:#fff} #iqdet#iqdet .iqbody>section.iqtlsec>h4.iqtlh{background:#1c1c1e;border-bottom:1px solid #2c2c2e;color:#fff} #iqdet .iqtlsec .iqtl2{gap:6px;padding:4px 2px 6px} #iqdet .iqtlsec .iqtl2::before{display:none} #iqdet .iqtlsec .iqe{display:flex;flex-direction:column;align-items:flex-start} #iqdet .iqtlsec .iqe>.iqen{display:none} #iqdet .iqtlsec .iqe>.iqec{max-width:min(78%,680px);margin:0;border:0;border-radius:20px 20px 20px 6px;background:#262629;color:#fff;padding:9px 14px 10px;box-shadow:none} #iqdet .iqtlsec .iqe.d-out{align-items:flex-end} #iqdet .iqtlsec .iqe.d-out>.iqec{background:#0a84ff;border-radius:20px 20px 6px 20px} #iqdet .iqtlsec .iqe.d-int{align-items:center} #iqdet .iqtlsec .iqe.d-int>.iqec{max-width:min(88%,680px);background:#121214;border:1px dashed #3a3a3c;border-radius:14px;color:#d1d1d6} #iqdet .iqtlsec .iqe+.iqe{margin-top:2px} #iqdet .iqtlsec .iqe.d-in+.iqe.d-out,#iqdet .iqtlsec .iqe.d-out+.iqe.d-in{margin-top:10px} #iqdet .iqtlsec .iqec .iqtx{color:inherit;font-size:14px;line-height:1.5} #iqdet .iqtlsec .iqec .iqtx.sub{font-weight:600} #iqdet .iqtlsec .iqec .iqeh{color:rgba(255,255,255,.6);gap:2px 8px;margin-bottom:5px} #iqdet .iqtlsec .iqec .iqek{color:#fff} #iqdet .iqtlsec .iqec :is(.iqft,.iqft i,.iqft span,.iqet,.iqet span){color:rgba(255,255,255,.6)} #iqdet .iqtlsec .iqec :is(.iqft b,.iqft b.us,.iqet b){color:rgba(255,255,255,.92)} #iqdet .iqtlsec .iqec .iqmore{color:#5eb1ff} #iqdet .iqtlsec .iqe.d-out .iqec .iqmore{color:#fff;text-decoration:underline;text-underline-offset:2px} /* owner 10-26: translation tags and the waiting pill read on the dark history bubbles; on the blue sent bubble they turn white */ #iqdet .iqtlsec .iqec .trtag{background:rgba(255,255,255,.1);color:rgba(255,255,255,.62)} #iqdet .iqtlsec .iqec .trtag.cl{color:var(--ink2);background:var(--sink);box-shadow:inset 0 0 0 1px var(--line)} #iqdet .iqtlsec .iqe.d-out .iqec .trtag{background:rgba(255,255,255,.2);color:rgba(255,255,255,.9);box-shadow:none} #iqdet .iqtlsec .iqe.d-out .iqec .trtag.cl{color:#fff;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)} #iqdet .iqtlsec .iqec :is(.iqtx.trwait,.trx.busy){color:inherit} #iqdet .iqtlsec .iqec .trst{color:var(--ink2);background-color:var(--sink);background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%)} #iqdet .iqtlsec .iqec .trspin{border-color:rgba(255,255,255,.2);border-top-color:var(--ink2)} #iqdet .iqtlsec .iqe.d-out .iqec .trst{color:#fff;background-color:rgba(255,255,255,.16);background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%)} #iqdet .iqtlsec .iqe.d-out .iqec .trspin{border-color:rgba(255,255,255,.35);border-top-color:#fff} /* owner 10-19: the website AI chat is not an email, so its card is gray with a dotted edge, on either side */ #iqdet#iqdet .iqtlsec .iqe.k-chat>.iqec{background:#2f2f33;border:1.5px dashed #8e8e93;color:#ececf0;border-radius:16px} #iqdet#iqdet .iqtlsec .iqe.k-chat .iqec .iqmore{color:#c7c7cc;text-decoration:underline;text-underline-offset:2px} #iqdet .iqtlsec .iqec a{color:inherit;text-decoration:underline;text-underline-offset:2px} #iqdet .iqtlsec .iqec .mlchip{background:rgba(255,255,255,.16);border-color:transparent;color:#fff} #iqdet .iqtlsec .iqtl2 .iqday{justify-content:center;padding:0;margin:12px 0 4px;color:#8e8e93;font-size:12px;font-weight:500;letter-spacing:0} #iqdet .iqtlsec .iqtl2 .iqday:first-child{margin-top:2px} #iqdet .iqtlsec .iqtl2 .iqday::before,#iqdet .iqtlsec .iqtl2 .iqday::after{display:none} #iqdet .iqtlsec .iqtl2 .iqday span{color:#8e8e93} @media (max-width:760px){#iqdet .iqtlsec .iqe>.iqec{max-width:88%}#iqdet .iqtlsec .iqe.d-int>.iqec{max-width:96%}} /* owner 10-17 phone pass: no wasted rows, a solid undo pill, sheets that slide like iOS */ @media (max-width:760px){ /* header: logo, live dot, text size, AI, bell and log out on one row; the menu rows slide away while scrolling down */ html body .hin>b{display:none} html body .hin .me{padding:0;background:none;gap:0} html body #mename{display:none} html body .hin .me button{min-height:36px;padding:0 11px;font-size:12px} /* owner 10-18: on a phone the AI cost of today stands where the text size buttons were; tap it for the split */ html body .hin .fsz{display:none} html body .hin .aiusd:not([hidden]){display:inline-flex;height:34px;margin:0 0 0 auto;padding:0 12px;font-size:13px;cursor:pointer} html body .hin .aiusd.tk{animation:aiTk .6s ease} header,.nsubw{transition:transform .3s cubic-bezier(.32,.72,0,1)} html.hdup header{transform:translateY(calc(var(--hrow1,0px) - var(--hdra,58px) - 2px))} html.hdup .nsubw{transform:translateY(calc(-100% - var(--hdra,58px) + var(--hrow1,0px) - 2px))} .mlttl .muted{display:none} #t-mail .mlhead>.mlttl{display:none} /* 문의 list: title and buttons on one row, the five filters on one row */ html body #t-inq .ldwrap>#iqtools{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px} html body #t-inq .ldwrap>#iqtools #iqq{grid-column:1/-1} #iqtools>ui-select{min-height:38px;height:38px;padding:0 6px 0 9px;font-size:13px;border-radius:10px} #iqtools>ui-select .usel-l{min-width:0} #iqtools .iqhead{flex-wrap:nowrap;align-items:center;gap:6px} #iqtools .iqhead .ldttl{flex:1 1 auto;min-width:0;overflow:hidden} #iqtools .iqhead .ldttl>b{display:none} #iqtools .iqhead .ldttl .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-size:13px} #iqtools .iqhead .iqhact{flex:none;gap:4px} #iqtools .iqhead .dens,#iqtools .iqhead .vsst{display:none} #iqtools .iqhead .iqhact>button{width:36px;height:36px;min-height:36px} /* rows: no empty "no summary" lines */ #iqlist .iql2:has(>.wn>.muted:only-child),#iqlist .iqsum:has(>.muted:only-child){display:none} /* 이메일 views: one sideways row instead of three wrapped rows */ #mlcards.mlseg,#fxseg.mlseg{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:flex-start;grid-template-columns:none} #mlcards.mlseg::-webkit-scrollbar,#fxseg.mlseg::-webkit-scrollbar{display:none} #mlcards.mlseg>button,#fxseg.mlseg>button{flex:none;white-space:nowrap;min-height:40px;padding:0 12px} #mlcards.mlseg>button br{display:none} /* + new sample, payment, request: a round button at the bottom right instead of its own row */ .mlhead>button.p{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:40;height:50px;min-height:50px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:600;box-shadow:0 10px 28px rgba(15,23,42,.28),0 2px 6px rgba(15,23,42,.18)} #t-smp,#t-pay,#t-sxi,#t-sxn,#t-sxs,#t-sxl{padding-bottom:84px} /* customer detail: grade, factory, next and owner on one row; the 다시 답장 bubble sits inline */ html body #iqdet .lddh .h>.asgwrap{order:13;flex:0 1 auto;width:auto;margin-left:auto} html body #iqdet .lddh .asgwrap .asgpl{display:none} html body #iqdet .lddh .asgwrap ui-select{min-height:36px;height:36px;font-size:13px} html body #iqdet .lddh .asgwrap .asgp{min-height:36px} html body #iqdet .lddh .iqtiers button{width:32px;height:32px;min-height:32px} html body #iqdet .lddh .ib2fx>span{display:none} html body #iqdet .lddh .ib2fx{width:36px;padding:0;justify-content:center} .lddh .rsdh span.rsp.rsp.rsp.rsp .rsag{position:static;margin-left:6px;height:18px;box-shadow:none} .lddh .rsdh span.rsp.rsp.rsp.rsp.ag{margin-right:0} /* the action bar: one row that scrolls sideways, 답장 쓰기 first */ #iqdet .iqact{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))} #iqdet .iqact .iqbtns{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:6px} #iqdet .iqact .iqbtns::-webkit-scrollbar{display:none} #iqdet .iqact .iqbtns::after{display:none} #iqdet .iqact .iqbtns>*{flex:none;height:42px;min-height:42px} #iqdet .iqact .iqbtns>.p{order:-2} #iqdet .iqact .iqbtns>.aibtn{order:-1} #iqdet .iqact .iqbtns>ui-select{flex:none;width:118px;min-width:118px} /* 팀 현황: a member with no activity is one line */ #tstcard .tstr:has(.tstdev small:only-child){grid-template-areas:"who st";row-gap:0;padding-top:10px;padding-bottom:10px} #tstcard .tstr:has(.tstdev small:only-child) .tstnums,#tstcard .tstr:has(.tstdev small:only-child) .tstbars,#tstcard .tstr:has(.tstdev small:only-child) .tstdev{display:none} #tstcard .tstr:has(.tstdev small:only-child) .tstst{display:flex;align-items:center;justify-content:flex-end;gap:6px} #tstcard .tstr:has(.tstdev small:only-child) .tstst>b{font-size:13px;opacity:.7} #tstcard .tstr:has(.tstdev small:only-child) .tstst>b em{display:none} /* 보내기 취소: a solid dark pill above the bottom buttons, never see-through */ #ushbox{bottom:calc(76px + env(safe-area-inset-bottom))} #ushbox .ushp{background:#16171b;color:#fff;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 30px rgba(0,0,0,.28);min-height:50px;border-radius:16px} #ushbox .ushp::before{display:none} #ushbox .ushu{background:#fff;color:#111;border:0;height:34px;padding:0 14px;font-size:13px} #ushbox .ushx{color:#fff} #ushbox .ushbar{background:rgba(255,255,255,.14)} #ushbox .ushp.sent,#ushbox .ushp.undone{background:#14532d;color:#fff} #ushbox .ushp.late{background:#78350f;color:#fff} #ushbox .ushmore{background:#16171b;color:#fff;border:0;-webkit-backdrop-filter:none;backdrop-filter:none} } /* owner 10-19 "message is blurry bg": the 보내기 취소 pill is a solid dark bar at every screen size, never see-through glass */ html body #ushbox .ushp{background:#16171b;color:#fff;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 30px rgba(0,0,0,.28)} html body #ushbox .ushp::before{display:none} html body #ushbox .ushu{background:#fff;color:#111;border:0} html body #ushbox .ushx{color:#fff} html body #ushbox .ushbar{background:rgba(255,255,255,.14)} html body #ushbox .ushp.sent,html body #ushbox .ushp.undone{background:#14532d;color:#fff} html body #ushbox .ushp.late{background:#78350f;color:#fff} html body #ushbox .ushmore{background:#16171b;color:#fff;border:0;-webkit-backdrop-filter:none;backdrop-filter:none} @keyframes aiTk{0%{transform:scale(1)}35%{transform:scale(1.08);background:color-mix(in srgb,var(--info) 18%,var(--sink))}100%{transform:none}} @media (max-width:760px) and (prefers-reduced-motion:reduce){header,.nsubw{transition:none}html body .hin .aiusd.tk{animation:none}} /* slim customer header, owner 10-19 "make this slimmer": the reply and status chips sit on the name line, the company line under it, so the header is two short lines; the 답변옴 end stays inside the pill instead of floating over the quote chip; smaller avatar and controls */ @media (min-width:761px){ html body #iqdet .ldtop{padding-top:7px;padding-bottom:6px} html body #iqdet .lddh .nm{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:3px;line-height:1.25} html body #iqdet .lddh .nm .rsdh{margin:0;padding-top:0;gap:5px} html body #iqdet .lddh .rsdh span.rsp.rsp.rsp.rsp{height:22px} html body #iqdet .lddh .rsdh span.rsp.rsp.rsp.rsp .rsag{position:static;margin:0 -10px 0 6px;height:22px;padding:0 8px;border-radius:0 999px 999px 0;box-shadow:none;animation:none;font-size:11px} html body #iqdet .lddh .rsdh span.rsp.rsp.rsp.rsp.ag{margin-right:0;overflow:hidden} html body #iqdet .lddh .rsdh>.iqs,html body #iqdet .lddh .rsdh>.cbk{height:22px} html body #iqdet .lddh .w>.sb{margin-top:2px;line-height:1.3} html body #iqdet .lddh .h>.iqav2.lg{width:32px;height:32px;font-size:12px;align-self:center} html body #iqdet .lddh .iqtiers button{width:30px;height:30px;min-height:30px} html body #iqdet .lddh .h>.iqstarb,html body #iqdet .lddh .iqhm>.iqstarb{width:30px;height:30px} html body #iqdet .lddh .asgp select,html body #iqdet .lddh .asgwrap ui-select{height:30px;min-height:30px} html body #iqdet .lddh .h>.asgwrap{align-self:center} }