/* LINE AI受付 — App shell & responsive (핸드폰 <768 · 아이패드 세로 768–1023 · 아이패드 가로 1024–1199 · PC 1200+)
 * 디자인 시스템 「아이링크소프트」 v4 기준. 색 값은 tokens.css 변수만 사용해요. */
/* ---------- app shell ---------- */
.app{position:fixed;inset:0;display:flex;font-size:15px;line-height:1.5;background:var(--bg)}
.side{display:none}
.col{flex:1;display:flex;flex-direction:column;min-width:0}
#layers{position:absolute;inset:0;pointer-events:none;z-index:50}#layers>*{pointer-events:auto}
.top{flex:none;background:#fff;display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top,0px)) 16px 10px;border-bottom:1px solid var(--line2)}
.appi{width:34px;height:34px;border-radius:10px;background:var(--brand);display:grid;place-items:center;flex:none}
.appi svg{width:19px;height:19px;stroke:#fff}
.top .nm{display:flex;align-items:baseline;gap:6px;flex:1;min-width:0}.top .nm small{font-size:11px;color:var(--muted);font-weight:600;line-height:1.2;white-space:nowrap}.top .nm b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .ttl{display:none}
.top .add{display:none}
.icb{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;position:relative;flex:none}
.icb svg{width:23px;height:23px;stroke:var(--sub)}
.icb:hover{background:var(--line2)}
.icb .dt{position:absolute;top:9px;right:10px;width:10px;height:10px;border-radius:50%;background:var(--brand);border:2px solid #fff}
.band{flex:none;display:flex;text-decoration:none;align-items:center;gap:8px;background:var(--tint);color:var(--brand);font-weight:700;font-size:13px;padding:9px 16px;text-align:left;width:100%}
.band svg{width:16px;height:16px;stroke:var(--brand)}
.band u{margin-left:auto}
.panes{flex:1;min-height:0;display:flex;min-width:0}
.pane{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.list{flex:1;min-width:0;padding:16px 16px 110px}
.panes.one .list>.inner{max-width:none;margin:0 auto}
.det{position:absolute;left:0;right:0;top:0;bottom:0;padding-top:env(safe-area-inset-top,0px);background:var(--bg);z-index:20;display:none;flex-direction:column}
.det.on{display:flex}
.det .scroll{flex:1;overflow-y:auto;min-width:0;padding:16px 16px 40px}
.dhead{flex:none;background:#fff;display:flex;align-items:center;gap:6px;padding:4px 8px;border-bottom:1px solid var(--line2);min-height:56px}
.dhead b{flex:1;text-align:center;font-size:17px;margin-right:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dhead .x{display:none}
.dempty{display:none}
.dim{display:none}
.tabs{flex:none;background:#fff;border-top:1px solid var(--line);display:flex;padding:6px 6px calc(8px + var(--safe-b))}
.tabs>*{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--muted);padding:4px 0;position:relative;min-height:50px}
.tabs svg{width:25px;height:25px;stroke:var(--muted)}
.tabs .on{color:var(--brand)}.tabs .on svg{stroke:var(--brand)}
.tabs em,.side em{font-style:normal;position:absolute;top:0;left:calc(50% + 6px);background:var(--brand);color:#fff;font-size:11px;font-weight:800;min-width:19px;height:19px;padding:0 5px;border-radius:10px;display:grid;place-items:center;border:2px solid #fff}
.fab{position:absolute;right:18px;bottom:calc(84px + var(--safe-b));z-index:10;background:var(--brand);color:#fff;border-radius:999px;height:54px;padding:0 22px 0 18px;font-weight:800;font-size:15px;display:flex;align-items:center;gap:6px;box-shadow:0 10px 28px rgba(209,25,25,.32)}
.fab svg{width:20px;height:20px;stroke:#fff}

/* ---------- iPad portrait (768–1023) ---------- */
@media (min-width:768px){
 .app{font-size:15px}
 .side{display:flex;flex-direction:column;align-items:center;width:84px;flex:none;background:#fff;border-right:1px solid var(--line);padding:18px 0 16px;gap:6px}
 .side .appi{margin-bottom:16px}
 .side .bn{display:none}
 .side .nav{width:68px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0;border-radius:16px;font-size:11.5px;font-weight:700;color:var(--muted);position:relative}
 .side .nav svg{width:25px;height:25px;stroke:var(--muted)}
 .side .nav:hover{background:var(--line2)}
 .side .nav.on{background:var(--tint);color:var(--brand)}.side .nav.on svg{stroke:var(--brand)}
 .side em{left:auto;right:6px;top:2px}
 .side .tri{display:none}
 .side .out{margin-top:auto;width:68px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--muted);padding:8px 0}
 .side .out svg{width:22px;height:22px;stroke:var(--muted)}
 .side .out span.l2{display:none}
 .tabs,.fab{display:none}
 .top{padding:0 24px;height:70px;border-bottom:1px solid var(--line)}
 .top .appi{display:none}
 .top .nm{display:none}
 .top .ttl{display:block;flex:1;min-width:0;overflow:hidden}.top .ttl b{font-size:22px}.top .ttl small{margin-left:10px;color:var(--muted);font-size:14px;font-weight:600}
 .top .add{display:flex;width:auto}
 .h1.pt{display:none}
 .band{padding:10px 24px}
 .panes{position:relative;overflow:hidden;min-width:0}
 .list{padding:20px 24px 40px;min-width:0}
 .chips{margin:0 0 10px;padding:0}
 .det{top:0;left:auto;width:min(560px,66%);display:flex;transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:-18px 0 50px rgba(15,23,42,.16);border-left:1px solid var(--line)}
 .det.on{transform:none}
 .det .scroll{padding:20px 22px 40px}
 .dim{display:block;position:absolute;inset:0;background:rgba(15,23,42,.28);z-index:15;opacity:0;pointer-events:none;transition:opacity .25s}
 .dim.on{opacity:1;pointer-events:auto}
 .dhead{padding:6px 10px 6px 20px;min-height:64px}
 .dhead .bk{display:none}
 .dhead .x{display:grid}
 .dhead b{text-align:left;margin:0}
 .layer{justify-content:center;align-items:center}
 .sheet{width:560px;max-height:86%;border-radius:24px;animation:pop .2s}
 .sheet .gr{display:none}
 .sheet .sh{padding:14px 12px 6px 24px}
 .sheet .sb{padding:6px 24px 14px}.sheet .sf{padding:14px 24px 20px;flex-direction:row-reverse}
 .sheet .sf .btn{flex:1}
 .sheet .sf.col{flex-direction:column}.sheet .sf.col .btn{flex:none}
 .toast{bottom:32px}
 .login{flex-direction:row;background:var(--bg)}
 .login .frm{margin:auto;background:#fff;border-radius:28px;padding:44px 40px 30px;flex:none;box-shadow:0 20px 60px rgba(15,23,42,.08)}
 .login .lgfoot{display:none}
 .sum b{font-size:28px}
 .kp{grid-template-columns:repeat(4,1fr)}
 .rgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
}
/* ---------- iPad landscape (1024+) : split ---------- */
@media (min-width:1024px){
 .panes{display:grid;grid-template-columns:minmax(0,400px) 1fr;grid-template-rows:minmax(0,1fr);overflow:hidden;min-width:0}
 .panes.one{grid-template-columns:minmax(0,1fr)}
 .panes>.list{min-height:0}
 .panes.one .det{display:none}
 .list{border-right:1px solid var(--line);padding:20px 20px 40px;min-width:0}
 .chips{margin:0 0 10px;padding:0}
 .det{position:static;transform:none;width:auto;box-shadow:none;border-left:0;transition:none;min-width:0;min-height:0;overflow:hidden}
 .det .scroll{min-height:0}
 .det .scroll{padding:24px 28px 40px;min-width:0}
 .det .scroll.nar{max-width:none;width:100%;margin:0;min-width:0}
 .dim{display:none}
 .dhead{background:var(--bg);border-bottom:0;padding:16px 16px 0 28px;min-height:auto}
 .dhead b{font-size:21px}
 .dempty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:8px;font-size:14px}
 .dempty .ic{width:60px;height:60px;border-radius:20px;background:#fff}.dempty .ic svg{width:28px;height:28px;stroke:#a3adbb}
 .panes.one .list{border:0;padding:24px 28px 40px;min-width:0}
 .panes.one .list>.inner{max-width:none;margin:0 auto}
}
/* ---------- PC (1200+) ---------- */
@media (min-width:1200px){
 .side{width:220px;align-items:stretch;padding:20px 14px 16px;gap:2px}
 .side .brand{display:flex;align-items:center;gap:10px;padding:0 8px 22px}
 .side .appi{margin:0}
 .side .bn{display:block;min-width:0}.side .bn b{display:block;font-size:13.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side .bn small{font-size:11.5px;color:var(--muted);font-weight:600}
 .side .nav{width:auto;flex-direction:row;gap:12px;padding:0 14px;height:46px;border-radius:12px;font-size:14.5px}
 .side .nav svg{width:21px;height:21px}
 .side em{position:static;margin-left:auto;border:0}
 .side .tri{display:block;margin-top:auto;background:var(--tint);color:var(--brand);border-radius:16px;padding:14px;font-size:13px;font-weight:700;text-align:left;line-height:1.5}
 .side .tri u{display:block;margin-top:4px;font-size:12.5px}
 .side .out{margin-top:10px;width:auto;flex-direction:row;gap:12px;padding:0 14px;height:44px;font-size:14px}
 .side .out span.l2{display:inline}.side .out span.l1{display:none}
 .band{display:none}
 .top{padding:0 28px}
 .panes{grid-template-columns:minmax(0,440px) 1fr;overflow:hidden;min-width:0}
 .list{padding:24px 24px 40px;min-width:0}
 .chips{margin:0 0 10px;padding:0}
 .det .scroll{padding:24px 36px 40px;min-width:0}
 .dhead{padding:20px 20px 0 36px}
}
/* 체험 종료 임박 (TRIAL_NOTICE_DAYS 이내) */
.band.soon,.side .tri.soon{background:var(--brand);color:#fff}
.band.soon svg{stroke:#fff}