/* KDB 하노이지점 고객표출 화면 — 확정 디자인 3안 Kinetic Blue
   원본: 디자인시안_260915/build.py (BASE_CSS + 테마 3). 여기가 구현 정본이다. */

*{margin:0;padding:0;box-sizing:border-box}
body{width:1920px;height:1080px;overflow:hidden;position:relative;display:flex;flex-direction:column;
 font-family:"Noto Sans","Noto Sans KR","Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-variant-numeric:tabular-nums;
 color:var(--ink);background:var(--bgc) var(--bgimg) center/cover no-repeat}
body::before{content:"";position:absolute;inset:0;background:var(--veil);pointer-events:none}
.hdr,.main,.ftr{position:relative;z-index:1}
/* header */
.hdr{height:128px;flex:0 0 128px;display:flex;align-items:center;gap:22px;padding:0 48px;border-bottom:var(--hdr-rule)}
.mark{width:76px;height:76px;border-radius:var(--mark-r);background:var(--mark-bg);display:flex;align-items:center;justify-content:center;box-shadow:var(--mark-sh);flex:0 0 76px}
.mark img{width:56px;height:auto;display:block}
.bn{font-size:40px;font-weight:700;letter-spacing:-.5px;line-height:1.05;font-family:var(--disp)}
.bs{font-size:22px;color:var(--dim);margin-top:4px}
.sp{flex:1}
.clk{text-align:right}.clk .d{font-size:22px;color:var(--dim)}.clk .t{font-size:58px;font-weight:700;line-height:1;letter-spacing:-1px;margin-top:4px}
/* grid */
.main{flex:1;min-height:0;display:grid;grid-template-columns:650px 560px 1fr;grid-template-rows:452px 1fr;gap:20px;padding:26px 48px 18px}
.tile{background:var(--tile);border:var(--tile-bd);border-radius:var(--r);box-shadow:var(--tile-sh);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);position:relative;overflow:hidden}
.usd{grid-column:1;grid-row:1;padding:28px 34px 22px;display:flex;flex-direction:column}
.refs{grid-column:2;grid-row:1;display:grid;grid-template-rows:repeat(var(--nref),1fr);gap:20px}
.dep{grid-column:1/3;grid-row:2;padding:20px 30px 16px;display:flex;flex-direction:column}
.card{grid-column:3;grid-row:1/3;padding:30px 34px 22px;display:flex;flex-direction:column}
/* flag */
.flag{display:inline-block;width:60px;height:40px;border-radius:var(--flag-r);overflow:hidden;box-shadow:0 0 0 1px var(--flag-bd);flex:0 0 auto}
.flag svg{width:100%;height:100%;display:block}
.flag.sm{width:48px;height:32px}
.round .flag{width:46px;height:46px;border-radius:50%}.round .flag.sm{width:40px;height:40px}
/* USD */
.uh{display:flex;align-items:center;gap:16px}.uh .c{font-size:44px;font-weight:700;letter-spacing:.5px;font-family:var(--disp)}
.uh .n{font-size:20px;color:var(--dim);margin-left:auto;letter-spacing:.3px}
.lbl{font-size:21px;font-weight:700;letter-spacing:2px;color:var(--dim);margin-top:22px}
.lbl.acc{color:var(--acc)}
.big{font-size:112px;font-weight:var(--numw);line-height:1;letter-spacing:-3px;color:var(--acc);margin-top:6px;text-shadow:var(--glow)}
.mid{font-size:80px;font-weight:var(--numw);line-height:1;letter-spacing:-2px;margin-top:6px}
.rule{height:1px;background:var(--hair);margin-top:22px}
.quote{margin-top:auto;font-size:17px;color:var(--dim)}
/* refs */
.ref{padding:20px 28px 16px;display:flex;flex-direction:column}
.rh{display:flex;align-items:center;gap:14px;font-size:26px;font-weight:600}
.rh b{font-weight:700;font-family:var(--disp)}
.badge{margin-left:auto;font-size:15px;font-weight:600;letter-spacing:.5px;color:var(--dim);border:1px solid var(--hair2);border-radius:999px;padding:4px 14px;background:var(--badge)}
.rv{font-size:84px;font-weight:var(--numw);line-height:1;letter-spacing:-2px;margin-top:auto}
.src{font-size:15px;color:var(--dim);margin-top:12px}
/* deposit */
.dh{display:flex;align-items:center;gap:14px}.dh h2{font-size:32px;font-weight:700;font-family:var(--disp)}
.dh .bar{width:6px;height:30px;border-radius:3px;background:var(--acc2)}
.dh .k{margin-left:auto;font-size:17px;letter-spacing:2px;color:var(--dim);font-weight:600}
.terms{display:grid;grid-template-columns:repeat(var(--nterm),1fr);gap:14px;margin-top:14px}
.tm{background:var(--sub);border:var(--sub-bd);border-radius:var(--r2);padding:18px 20px 18px}
.tm .l{font-size:19px;color:var(--dim);font-weight:600}
.tm .v{font-size:66px;font-weight:var(--numw);line-height:1.05;letter-spacing:-1.5px;margin-top:2px}
.tm .v small,.ot .v small{font-size:24px;color:var(--dim);font-weight:500;margin-left:4px;letter-spacing:0}
.tm.new{border:2px dashed var(--acc2);position:relative}
.tm.new::after{content:"ADDED";position:absolute;top:10px;right:12px;font-size:12px;font-weight:800;letter-spacing:1.5px;color:var(--newc);background:var(--acc2);border-radius:4px;padding:2px 7px}
.others{display:grid;grid-template-columns:repeat(var(--noth),1fr);gap:14px;margin-top:14px}
.ot{background:var(--sub);border:var(--sub-bd);border-radius:var(--r2);padding:18px 22px;display:flex;align-items:center;gap:12px}
.ot .l{font-size:21px;color:var(--ink2);flex:1}
.ot .v{font-size:54px;font-weight:var(--numw);letter-spacing:-1px;line-height:1}
.note{margin-top:auto;padding-top:10px;font-size:16px;color:var(--dim)}
.terms.n5 .tm .v{font-size:58px}.terms.n5 .tm{padding:18px 16px}
/* card */
.ctag{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:.5px;color:var(--tagc);background:var(--tagbg);border:var(--tagbd);border-radius:999px;padding:6px 18px}
.ctag i{width:9px;height:9px;border-radius:50%;background:var(--acc2)}
.ctitle{font-size:48px;font-weight:700;line-height:1.12;letter-spacing:-.8px;margin-top:18px;font-family:var(--disp)}
.csub{font-size:20px;color:var(--dim);margin-top:10px;line-height:1.35}.csub.strong{color:var(--acc2);font-weight:600;font-size:22px}
.csec{font-size:16px;font-weight:700;letter-spacing:2.5px;color:var(--dim);margin-top:26px;padding-bottom:8px;border-bottom:1px solid var(--hair)}
.csec.waive{color:var(--okc)}
.crow{display:flex;align-items:center;gap:14px;padding:17px 0;border-bottom:1px solid var(--hair);font-size:24px}
.crow span{flex:1;color:var(--ink2)}.crow b{font-weight:700;white-space:nowrap}
.crow b.ok{color:var(--okc)}.crow b.tbd{color:var(--dim);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.st{border:var(--sub-bd);background:var(--sub);border-radius:var(--r2);padding:12px 14px;font-size:17px;font-weight:600;line-height:1.3}
.st em{display:block;font-style:normal;font-size:26px;font-weight:700;color:var(--acc2);margin-bottom:6px}
.promise{margin-top:14px;border:1.5px solid var(--acc2);border-radius:var(--r2);padding:12px 16px;font-size:20px;font-weight:700;text-align:center}
.svc{font-size:26px;padding:13px 0;border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:14px}
.svc::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--acc2);transform:rotate(45deg);flex:0 0 10px}
.hours{font-size:34px;font-weight:700;margin-top:10px}.hours small{font-size:22px;color:var(--dim);font-weight:500}
.qr{display:flex;align-items:center;gap:20px;margin-top:auto;padding-top:16px}
.qrbox{width:120px;height:120px;background:#fff;border-radius:10px;padding:8px;flex:0 0 120px;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.qrbox svg{width:100%;height:100%;display:block}
.qt{font-size:20px;color:var(--dim);line-height:1.4}
.dots{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.dot{width:9px;height:9px;border-radius:5px;background:var(--hair2)}.dot.on{width:36px;background:var(--acc2)}
/* footer */
.ftr{height:48px;flex:0 0 48px;display:flex;align-items:center;padding:0 48px;font-size:16px;color:var(--dim);border-top:var(--ftr-rule)}

/* ── 테마 3 Kinetic Blue ── */

:root{--bgc:#010B24;--veil:linear-gradient(90deg,rgba(1,8,28,.55) 0%,rgba(1,8,28,.2) 70%,rgba(1,8,28,0) 100%);
 --ink:#F2F8FF;--ink2:#CFE0F5;--dim:#7F9BC0;--acc:#6FE3FF;--acc2:#35B8FF;--okc:#5BF0B8;--newc:#001226;
 --hair:rgba(111,227,255,.14);--hair2:rgba(111,227,255,.28);--tile:linear-gradient(160deg,rgba(20,50,110,.40),rgba(4,16,48,.55));--tile-bd:1px solid rgba(111,227,255,.22);
 --tile-sh:inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px rgba(0,0,0,.35);--blur:blur(18px);--r:20px;--r2:14px;--sub:rgba(111,227,255,.05);--sub-bd:1px solid rgba(111,227,255,.16);
 --badge:transparent;--tagc:#001226;--tagbg:linear-gradient(90deg,#35B8FF,#6FE3FF);--tagbd:none;
 --mark-bg:rgba(255,255,255,.95);--mark-r:50%;--mark-sh:0 0 0 6px rgba(111,227,255,.15),0 0 30px rgba(53,184,255,.45);--flag-r:50%;--flag-bd:rgba(111,227,255,.5);
 --hdr-rule:none;--ftr-rule:none;--numw:600;--disp:inherit;--glow:0 0 34px rgba(111,227,255,.45)}
.tile::before{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;background:linear-gradient(90deg,transparent,#6FE3FF,transparent)}
.card{background:linear-gradient(160deg,rgba(20,50,110,.28),rgba(4,16,48,.35))}
.ctag i{background:#001226}
.hdr::after{content:"";position:absolute;left:48px;right:48px;bottom:0;height:1px;background:linear-gradient(90deg,#35B8FF,rgba(53,184,255,0) 70%)}

:root{ --bgimg:url("/bg.jpg"); }

/* ── 구현 보강: 카드가 들어가는 칸 ── */
.card-slot{grid-column:3;grid-row:1/3;padding:30px 34px 22px;display:flex;flex-direction:column;min-height:0}
.card-slot .card{animation:fade .6s ease-out}
.refs{display:grid;grid-template-rows:repeat(auto-fit,minmax(0,1fr));gap:20px}
.qr:empty{display:none}

/* 카드 안 항목 목록 — 원본 시안의 .rows 규칙 */
.card .rows{display:flex;flex-direction:column;}
.card-slot .rows{display:flex;flex-direction:column;}
.refs{grid-template-rows:repeat(var(--nref),1fr);}

.crule{height:1px;background:var(--hair);margin:16px 0}
.card-slot .crow small{font-size:16px;color:var(--dimmer)}

/* 한국어는 단어 중간에서 줄을 바꾸지 않는다 (영어·베트남어에는 영향 없음) */
.ctitle,.csub,.svc,.crow span,.st,.promise,.tm .l,.ot .l{word-break:keep-all;overflow-wrap:anywhere}