/* Korean driver's licence written-test practice — CBT runner, study cards and glossary on the Korea-guide look
   (teal #0b8d77, ink #163847, soft #e3f3ee, 20px cards). Mobile first, no horizontal scroll from 360px. */
.dt{--ink:#163847;--teal:#0b8d77;--teal-d:#0b6b60;--soft:#e3f3ee;--line:#d5e6e0;--muted:#4f6873;--warm:#c9821b;--bad:#c8402f;margin:0 0 34px;min-width:0}
.dt [hidden],.dt-dialog[hidden]{display:none!important}
.dt button{font:inherit;touch-action:manipulation}
.dt-stats{margin-bottom:18px}
.dt-stats .hbg-stat:nth-child(2){background:linear-gradient(150deg,#b86d1b,#8a4a14)}
.dt-stats .hbg-stat:nth-child(3){background:linear-gradient(150deg,#1b5f8f,#163e6b)}
.dt-notice{margin:0 0 20px;padding:14px 16px;border:1px solid #f0dfbf;border-left:5px solid var(--warm,#c9821b);border-radius:16px;background:#fdf6ea}
.dt-notice strong{display:block;color:#5b4310;font-size:15px}
.dt-notice p{margin:4px 0 0;font-size:14px;line-height:1.75;color:#5b4a2c}
.dt-notice a{color:#8a4a14;font-weight:700}
.dt-card{padding:20px;border:1px solid #dde8e5;border-radius:20px;background:#fff;box-shadow:0 8px 24px #123b330a;min-width:0}
.dt-card h2{margin:0 0 10px;font-size:20px;color:var(--ink)}

/* ---------- tabs ---------- */
.dt-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 16px;padding:6px;border-radius:18px;background:#eaf3f0}
.dt-tabs button{min-height:48px;padding:6px 8px;border:0;border-radius:13px;background:transparent;color:var(--muted);font-size:15px;font-weight:700;cursor:pointer;line-height:1.3}
.dt-tabs button:hover{color:var(--ink);background:#ffffff8c}
.dt-tabs button.is-on{background:#fff;color:var(--teal-d);box-shadow:0 4px 12px #0b3d3014}
.dt-tabs button:focus-visible{outline:3px solid var(--warm);outline-offset:1px}

/* ---------- intro ---------- */
.dt-intro{display:grid;gap:18px}
.dt-setup h3{margin:16px 0 8px!important;font-size:14px!important;color:var(--muted)}
.dt-setup h3:first-of-type{margin-top:4px!important}
.dt-opts2,.dt-opts3{display:grid;gap:10px}
.dt-opts3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dt-pick{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 14px 12px 44px;border:2px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.dt-pick::before{content:"";position:absolute;left:14px;top:15px;width:18px;height:18px;border-radius:50%;border:2px solid #9fb8b0;background:#fff}
.dt-pick b{font-size:17px}
.dt-pick span{font-size:13px;line-height:1.55;color:var(--muted)}
.dt-pick small{font-size:12px;color:var(--teal-d);font-weight:650}
.dt-pick:hover{border-color:#9fd2c4}
.dt-pick.is-on{border-color:var(--teal);background:#f3faf7}
.dt-pick.is-on::before{border-color:var(--teal);background:var(--teal);box-shadow:inset 0 0 0 3px #fff}
.dt-opts3 .dt-pick{padding:12px 8px 10px;align-items:center;text-align:center}
.dt-opts3 .dt-pick::before{position:static;margin-bottom:4px}
.dt-langnote{margin:10px 0 0!important;font-size:13px;line-height:1.7;color:var(--muted)}
.dt-start{width:100%;margin-top:16px;font-size:18px}
.dt-resume{margin-top:14px;padding:14px 16px;border-radius:14px;background:#fdf6ea;border:1px solid #f0dfbf}
.dt-resume p{margin:0 0 10px;font-size:15px;line-height:1.7;color:#5b4a2c}
.dt-resume .kc-button{width:100%}
.dt-loaderr{margin:10px 0 0!important;color:var(--bad)!important;font-size:14px}
.dt-rules{margin:0}
.dt-rules li{font-size:15px;line-height:1.75;color:#2d4752}
.dt kbd{display:inline-block;min-width:22px;padding:0 6px;border:1px solid #b9d3ca;border-bottom-width:2px;border-radius:6px;background:#fff;font:600 13px/20px system-ui,sans-serif;text-align:center;color:var(--ink)}

/* ---------- test ---------- */
.dt-test{scroll-margin-top:12px}
.dt-bar{position:sticky;top:var(--dt-top,0px);z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;padding:10px 12px 10px 16px;border-radius:16px;background:var(--ink);color:#fff;box-shadow:0 10px 26px #0f2b3a33}
.dt-bar-cls{font-weight:700;font-size:15px}
.dt-bar-type{padding:2px 10px;border-radius:999px;background:#ffffff1f;font-size:13px;font-weight:650}
.dt-timer{margin-left:auto;padding:2px 10px;border-radius:10px;background:#ffffff14;font:700 22px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.dt-timer.is-low{background:var(--bad);animation:dt-blink 1s steps(2) infinite}
.dt-submit{min-height:42px;padding:6px 16px;border:0;border-radius:10px;background:#ffd88a;color:#3d2a06;font-weight:750;cursor:pointer}
.dt-submit:hover{background:#ffc95c}
@keyframes dt-blink{50%{background:#a8301f}}
.dt-grid{display:grid;gap:14px}
.dt-q{min-width:0;padding:18px 16px 20px;border:1px solid #dde8e5;border-radius:20px;background:#fff;box-shadow:0 8px 24px #123b330a;outline:0}
.dt-qhead{display:flex;gap:12px;align-items:center;margin:0 0 12px}
.dt-qno{flex:none;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--teal);color:#fff;font:800 19px/1 system-ui,sans-serif}
.dt-qno.sm{width:34px;height:34px;border-radius:10px;font-size:15px}
.dt-qmeta{display:flex;flex-wrap:wrap;gap:6px}
.dt-badge{display:inline-block;padding:3px 10px;border-radius:999px;background:#eef6f3;color:var(--teal-d);font-size:12.5px;font-weight:700;line-height:1.5}
.dt-badge.is-pts{background:#fdf2e1;color:#8a4a14}
.dt-badge.is-pick{background:#eef1fb;color:#2d4a8a}
.dt-badge.is-two{background:#2d4a8a;color:#fff}
.dt-stem{margin:0 0 14px!important;font-size:19px;line-height:1.75;font-weight:650;color:var(--ink)!important;word-break:keep-all;overflow-wrap:anywhere}
.dt-stem.sm{font-size:16px;margin:0 0 8px!important}
.dt-stem.is-tr{font-weight:500;color:#3b5560!important}
.dt-lang{display:inline-block;margin-right:6px;padding:0 7px;border-radius:6px;background:#eef6f3;color:var(--teal-d);font-size:11px;font-weight:700;vertical-align:2px}
.dt-pic{display:flex;justify-content:center;margin:2px 0 16px}
.dt-pic svg{display:block;width:100%;height:auto}
.dt-pic.is-sign svg{width:min(150px,42vw);padding:10px;border:1px solid #e3ece9;border-radius:18px;background:#fbfdfc}
.dt-pic.is-scene svg{width:100%;max-width:560px;border-radius:14px;box-shadow:0 4px 16px #0f2b3a1f}
.dt-pic.sm.is-sign svg{width:96px;padding:6px}
.dt-pic.sm.is-scene svg{max-width:420px}
.dt-pic.is-opt{margin:0}
.dt-pic.is-opt svg{width:min(96px,100%);padding:0;border:0;background:none}
.dt-vnote{margin:-8px 0 12px!important;text-align:center;font-size:13px;color:var(--muted)}
.dt-opts{display:grid;gap:10px;margin-top:4px}
.dt-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font-size:17px;line-height:1.55;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.dt-opt:hover{border-color:#8fcab9;background:#f6fbf9}
.dt-opt:active{transform:scale(.99)}
.dt-opt.is-on{border-color:var(--teal);background:var(--teal);color:#fff;box-shadow:0 8px 18px #0b8d7733}
.dt-no{flex:none;color:var(--teal);font-size:23px;line-height:1;font-weight:700}
.dt-opt.is-on .dt-no{color:#fff}
.dt-ot{min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.dt-opts.is-picopts{grid-template-columns:repeat(2,minmax(0,1fr))}
.dt-opts.is-picopts .dt-opt{flex-direction:column;justify-content:center;padding:10px}
.dt-opts.is-picopts .dt-no{align-self:flex-start}
.dt-opts.is-picopts .dt-opt.is-on{background:#e3f3ee;color:var(--ink)}
.dt-opts.is-picopts .dt-opt.is-on .dt-no{color:var(--teal)}
.dt-picknote{min-height:1.6em;margin:10px 0 0!important;font-size:14px;font-weight:650;color:#2d4a8a}
.dt-picknote.is-warn{color:var(--bad)}

.dt-nav{padding:14px;border:1px solid #dde8e5;border-radius:20px;background:#fff;min-width:0}
.dt-nav-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;color:var(--ink)}
.dt-nav-head span{font-size:14px;font-weight:700;color:var(--teal-d)}
.dt-nav h3{margin:10px 0 6px!important;font-size:12.5px!important;line-height:1.4!important;color:var(--muted)}
.dt-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}
.dt-cell{height:40px;border:1px solid #c9dcd5;border-radius:10px;background:#fff;color:var(--ink);font:700 15px/1 system-ui,sans-serif;cursor:pointer}
.dt-cell:hover{border-color:var(--teal)}
.dt-cell.is-ans{border-color:var(--teal);background:var(--teal);color:#fff}
.dt-cell.is-cur{outline:3px solid var(--warm);outline-offset:1px;border-color:var(--warm)}
.dt-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;padding:0;list-style:none;font-size:12px;color:var(--muted)}
.dt-legend li::before{content:"";display:inline-block;width:12px;height:12px;margin-right:5px;border-radius:3px;vertical-align:-1px;border:1px solid #c9dcd5;background:#fff}
.dt-legend .a::before{background:var(--teal);border-color:var(--teal)}
.dt-legend .c::before{border:2px solid var(--warm)}
.dt-move{position:sticky;bottom:0;z-index:15;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px -4px 0;padding:10px 4px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(#f7f9f800,#f7f9f8 30%)}
.dt-move .kc-button{width:100%;min-height:52px;font-size:17px}
.dt-move .kc-secondary{background:#fff}
.dt-move .kc-button:disabled{opacity:.45;cursor:default}
/* never let the floating WhatsApp button cover the answer buttons during a running test */
html.dt-running .hb-wa-float{display:none}

/* ---------- dialog ---------- */
.dt-dialog{--ink:#163847;position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:#0f2b3acc}
.dt-dialog-box{width:min(440px,100%);padding:24px 22px 20px;border-radius:20px;background:#fff;box-shadow:0 24px 60px #0008;outline:0}
.dt-dialog-box h2{margin:0 0 8px!important;font-size:22px!important;color:var(--ink)}
.dt-dialog-box p{margin:0 0 18px!important;font-size:15px;line-height:1.75;color:#2d4752!important}
.dt-dialog-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dt-dialog-btns .kc-button{width:100%;padding:10px}

/* ---------- result ---------- */
.dt-result{scroll-margin-top:12px}
.dt-score{display:grid;gap:14px}
.dt-score-main{position:relative;overflow:hidden;padding:22px;border-radius:22px;background:linear-gradient(150deg,#b86d1b,#8a4a14);color:#fff;box-shadow:0 14px 30px #0f3b4a26}
.dt-result.is-pass .dt-score-main{background:linear-gradient(150deg,#0f7a6b,#123f6b)}
.dt-score-main::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:#ffffff14}
.dt-score-main span{display:block;font-size:14px;font-weight:650;opacity:.92}
.dt-score-main b{font-size:64px;line-height:1.1;font-weight:800}
.dt-score-main small{margin-left:6px;font-size:20px;font-weight:650;opacity:.9}
.dt-score-main p{position:relative;margin:8px 0 0!important;color:#fff!important;font-size:15px;line-height:1.7}
.dt-tbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;margin:0 0 10px}
.dt-tbar span{font-size:14px;font-weight:650;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.dt-tbar small{font-weight:500;color:var(--muted);font-size:12px}
.dt-tbar b{font-size:15px;color:var(--ink)}
.dt-trk{grid-column:1/-1;display:block;height:12px;border-radius:6px;background:#edf3f1;overflow:hidden}
.dt-fill{display:block;width:0;height:100%;border-radius:6px;background:var(--teal);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.dt-fill.is-low{background:var(--warm)}
.dt-used{margin:6px 0 0!important;font-size:13px;line-height:1.7;color:var(--muted)}
.dt-cta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.dt-cta .kc-button{flex:1 1 220px;justify-content:center;text-align:center}
.dt-review{margin-top:26px}
.dt-review-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.dt-review-head h2{margin:0!important;font-size:22px!important;color:var(--ink)}
.dt-filter{display:flex;flex-wrap:wrap;gap:6px}
.dt-filter button{min-height:40px;padding:4px 14px;border:1px solid #c9dcd5;border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:650;cursor:pointer}
.dt-filter button.is-on{border-color:var(--ink);background:var(--ink);color:#fff}
.dt-rlist{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.dt-ri,.dt-scard{min-width:0;padding:16px;border:1px solid #dde8e5;border-left:5px solid var(--teal);border-radius:16px;background:#fff}
.dt-ri.is-wrong,.dt-scard.is-bad{border-left-color:var(--bad)}
.dt-ri.is-skip{border-left-color:#9fb0bf}
.dt-scard{border-left-color:#c9dcd5}
.dt-scard.is-ok{border-left-color:var(--teal)}
.dt-ri-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:10px}
.dt-ri-type{font-size:13px;color:var(--muted)}
.dt-ri-badge{margin-left:auto;font-size:13px;color:var(--teal-d)}
.is-wrong .dt-ri-badge{color:var(--bad)}.is-skip .dt-ri-badge{color:#6b818a}
.dt-stems{display:grid;gap:4px}
.dt-ri-opts{display:grid;gap:6px;margin:6px 0 10px;padding:0;list-style:none}
.dt-ri-opts li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0;padding:8px 10px;border:1px solid #e3ece9;border-radius:12px;font-size:15px;line-height:1.55;color:var(--ink)}
.dt-ri-opts .dt-no{font-size:18px}
.dt-ri-opts .dt-ot{flex:1 1 0;display:flex;flex-direction:column}
.dt-ri-opts .dt-ot small{font-size:13.5px;color:#56707b;line-height:1.55}
.dt-ri-opts.is-picopts{grid-template-columns:repeat(2,minmax(0,1fr))}
.dt-ri-opts.is-picopts li{flex-direction:column;justify-content:center}
.dt-ri-opts.is-picopts .dt-pic.is-opt svg{width:70px}
.dt-ri-opts li.is-right{border-color:var(--teal);background:var(--soft)}
.dt-ri-opts li.is-mine{border-color:#e7b2a9;background:#fdeeeb}
.dt-ri-opts em{padding:1px 8px;border-radius:999px;background:var(--teal);color:#fff;font-size:11px;font-style:normal;font-weight:700;white-space:nowrap}
.dt-ri-opts .is-mine em{background:var(--bad)}
.dt-ex{margin-top:4px;padding:12px 14px;border-radius:12px;background:#f6faf8;border:1px solid #e0ece7}
.dt-ex p{margin:0 0 6px!important;font-size:15px;line-height:1.75;color:#2d4752!important;overflow-wrap:anywhere}
.dt-ex p:last-child{margin-bottom:0!important}
.dt-ex b{color:var(--teal-d)}
.dt-ex2{font-size:14px!important;color:#4a636d!important}
.dt-law{font-size:13px!important;color:var(--muted)!important}
.dt-law span:first-child{font-weight:700}

/* ---------- study ---------- */
.dt-tools{display:grid;gap:12px;margin-bottom:12px;padding:14px}
.dt-toolrow{display:flex;flex-wrap:wrap;gap:10px}
.dt-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:#eef4f2;max-width:100%}
.dt-seg button{min-height:38px;padding:4px 12px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:14px;font-weight:650;cursor:pointer}
.dt-seg button.is-on{background:#fff;color:var(--teal-d);box-shadow:0 2px 8px #0b3d3014}
.dt-chips{display:flex;flex-wrap:wrap;gap:6px}
.dt-chip{min-height:38px;padding:4px 12px;border:1px solid #c9dcd5;border-radius:999px;background:#fff;color:var(--ink);font-size:13.5px;font-weight:650;cursor:pointer;line-height:1.3}
.dt-chip span{margin-left:2px;padding:0 6px;border-radius:999px;background:#eef4f2;color:var(--muted);font-size:12px}
.dt-chip.is-on{border-color:var(--teal);background:var(--teal);color:#fff}
.dt-chip.is-on span{background:#ffffff2e;color:#fff}
.dt-chip.is-wrong{border-color:#e7b2a9;color:#9a3324}
.dt-chip.is-wrong.is-on{background:var(--bad);border-color:var(--bad);color:#fff}
.dt-sinfo{margin:0 0 10px!important;font-size:14px;color:var(--muted)}
.dt-slist,.dt-glist{display:grid;gap:12px}
.dt-sopts li{cursor:pointer;transition:border-color .15s,background .15s}
.dt-sopts li:hover{border-color:#8fcab9;background:#f6fbf9}
.dt-sopts li:focus-visible{outline:3px solid var(--warm);outline-offset:1px}
.dt-sopts li.is-sel{border-color:#2d4a8a;background:#eef1fb}
.dt-scard.is-done .dt-sopts li{cursor:default}
.dt-scard.is-done .dt-sopts li:hover{background:inherit}
.dt-scard.is-done .dt-sopts li:not(.is-right):not(.is-mine){opacity:.75}
.dt-sact{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px}
.dt-link{min-height:40px;padding:4px 14px;border:1px solid #c9dcd5;border-radius:999px;background:#fff;color:var(--teal-d);font-size:14px;font-weight:700;cursor:pointer}
.dt-res{font-size:14px;font-weight:700}
.dt-res.ok{color:var(--teal-d)}.dt-res.bad{color:var(--bad)}
.dt-wtag{margin-left:auto;padding:1px 8px;border-radius:999px;background:#fdeeeb;color:#9a3324;font-size:12px;font-weight:700}
.dt-more{display:block;width:100%;margin-top:14px}

/* ---------- glossary ---------- */
.dt-search{display:grid;gap:6px}
.dt-search span{font-size:14px;font-weight:700;color:var(--ink)}
.dt-search input{width:100%;min-height:46px;padding:8px 14px;border:2px solid var(--line);border-radius:12px;font:inherit;font-size:16px;color:var(--ink);background:#fff;box-sizing:border-box}
.dt-search input:focus{outline:0;border-color:var(--teal)}
.dt-glist{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:10px}
.dt-gitem{display:grid;gap:2px;min-width:0;padding:12px 14px;border:1px solid #dde8e5;border-radius:16px;background:#fff}
.dt-gko{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dt-gko b{font-size:20px;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.dt-say{flex:none;width:36px;height:36px;border:1px solid #c9dcd5;border-radius:50%;background:#fff;cursor:pointer;font-size:15px}
.dt-gpr{font-size:14px;color:var(--teal-d);font-weight:650}
.dt-gen{font-size:14px;color:#3b5560}
.dt-gbn{font-size:15px;color:var(--ink);font-weight:600}
.dt-about{max-width:none;margin-top:10px}

/* ---------- wider screens ---------- */
@media(min-width:560px){
 .dt-opts2{grid-template-columns:1fr 1fr}
 .dt-start,.dt-resume .kc-button{width:auto;min-width:260px}
 .dt-opts.is-picopts{grid-template-columns:repeat(4,minmax(0,1fr))}
 .dt-q{padding:24px 26px 26px}
 .dt-stem{font-size:20px}
 .dt-stems.is-two{grid-template-columns:1fr 1fr;gap:16px}
 .dt-ri-opts.is-picopts{grid-template-columns:repeat(4,minmax(0,1fr))}
 .dt-more{width:auto;margin-inline:auto;min-width:260px}
}
@media(min-width:900px){
 .dt-intro{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
 .dt-grid{grid-template-columns:minmax(0,1fr) 260px;align-items:start}
 .dt-nav{position:sticky;top:calc(var(--dt-top,0px) + 74px)}
 .dt-cells{grid-template-columns:repeat(5,minmax(0,1fr))}
 .dt-move{position:static;max-width:calc(100% - 274px);margin:14px 0 0;padding:0;background:none;display:flex;justify-content:space-between}
 .dt-move .kc-button{width:auto;min-width:170px}
 .dt-score{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:start}
 .dt-opt{font-size:18px}
}
@media(max-width:600px){
 .dt-bar{padding:8px 10px 8px 12px;gap:6px 8px;border-radius:14px}
 .dt-timer{font-size:19px}
 .dt-submit{min-height:40px;padding:6px 12px}
 .dt-tabs button{font-size:14px;padding:6px 4px}
 .dt-card{padding:16px}
 .dt-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
 .dt-chip{flex:none;white-space:nowrap}
}
@media(max-width:400px){
 .dt-bar-type{display:none}
 .dt-stem{font-size:17px}
 .dt-opt{font-size:16px;padding:10px 12px}
 .dt-opts3 .dt-pick b{font-size:15px}
 .dt-tabs button span{display:none}
}
@media(prefers-reduced-motion:reduce){
 .dt-fill,.dt-opt,.dt-pick{transition:none}
 .dt-timer.is-low{animation:none}
}

/* official bank (도로교통공단 문제은행): photos, signs, video link, tip */
.dt-pic.is-photo img{display:block;width:100%;max-width:560px;height:auto;border-radius:14px;box-shadow:0 4px 16px #0f2b3a1f;background:#f3f6f5}
.dt-pic.is-photo.sm img{max-width:420px}
.dt-pic.is-photo.is-sign.sm img{max-width:140px}
.dt-pic.is-photo.is-ex img{max-width:480px;box-shadow:none;border:1px solid #e3ece9}
.dt-pic.is-photo.is-sign img{max-width:min(200px,52vw);box-shadow:none;background:none}
.dt-vbox{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:2px 0 16px;padding:14px 16px;border:1px dashed #9fd2c4;border-radius:14px;background:#f3faf7}
.dt-vbox p{margin:0;flex:1 1 260px;font-size:14px;line-height:1.6;color:var(--ink)}
.dt-tip{padding:10px 12px;border-radius:12px;background:#fff7e6;border:1px solid #f3dca8}
.dt-bank{margin-bottom:6px}
.dt-pick:disabled{opacity:.55;cursor:not-allowed}
.dt-seg button:disabled{opacity:.5;cursor:not-allowed}
.dt-pic.is-multi{flex-wrap:wrap;gap:10px;align-items:center}
.dt-pic.is-multi img{width:auto;max-width:min(46%,200px)}
.dt-sit{list-style:none;margin:-6px 0 16px;padding:12px 14px;border-radius:12px;background:#f6f8fb;border:1px solid #e3e8f0;display:grid;gap:6px;font-size:14px;line-height:1.55}
.dt-sit li{position:relative;padding-left:16px}
.dt-sit li::before{content:"■";position:absolute;left:0;top:1px;font-size:10px;color:var(--teal)}
.dt-sit small{display:block;color:var(--muted)}
.dt-seg button span{font-size:12px;font-weight:600;opacity:.75}
.dt-video{margin:2px 0 16px}
.dt-video video{display:block;width:100%;max-width:640px;margin:0 auto;aspect-ratio:16/9;border-radius:14px;background:#0f2b3a;box-shadow:0 4px 16px #0f2b3a1f}
.dt-video .dt-vnote{display:block;position:relative;z-index:1;text-align:center;margin:12px 0 0!important;font-size:14px;line-height:1.6;color:var(--ink)}
.dt-snav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin:14px 0 6px}
.dt-snav .dt-spos{font-weight:700;color:var(--ink);font-size:16px}
.dt-snav button:disabled{opacity:.45;cursor:not-allowed}
/* tap-to-zoom pictures */
img.dt-zoomable{cursor:zoom-in}
.dt-pic.is-photo{position:relative}
.dt-pic.is-photo:not(.is-opt)::after{content:"🔍 বড় করে দেখতে ছবিতে চাপুন";position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);font-size:12px;color:var(--muted);white-space:nowrap;pointer-events:none}
.dt-pic.is-photo:not(.is-opt){margin-bottom:30px}
.dt-pic.is-photo.is-sign img{max-width:min(280px,70vw)}
.dt-zoom{position:fixed;inset:0;z-index:1000;background:#071a22;display:flex;flex-direction:column}
.dt-zoom[hidden]{display:none}
.dt-zoom-in{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:10px;-webkit-overflow-scrolling:touch}
.dt-zoom.is-big .dt-zoom-in{display:block}
.dt-zoom.is-big .dt-zoom-in img{margin:auto;cursor:zoom-out}
.dt-zoom-in img{display:block;max-width:none;width:min(100%,1440px);height:auto;background:#fff;border-radius:8px}
.dt-zoom-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 12px}
.dt-zoom-bar button{width:44px;height:44px;border:0;border-radius:50%;background:#ffffffe6;color:#0f2b3a;font-size:20px;font-weight:700;cursor:pointer}
.dt-zoom-lv{min-width:34px;text-align:center;color:#fff;font-weight:700}
.dt-zoom-x{margin-left:8px}
.dt-zoom-tip{margin:0;padding:8px 12px 14px;text-align:center;color:#d6e6e2;font-size:13px}
html.dt-zooming{overflow:hidden}
/* Bengali on/off switch */
.dt-bntoggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 14px 4px 6px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:650;cursor:pointer}
.dt-bntoggle b{color:var(--teal-d)}
.dt-sw{position:relative;width:38px;height:22px;border-radius:999px;background:var(--teal);transition:background .2s}
.dt-sw::after{content:"";position:absolute;top:3px;left:19px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s}
.dt-nobn .dt-sw{background:#b9c7c3}
.dt-nobn .dt-sw::after{left:3px}
.dt-nobn .dt-bntoggle b{color:var(--muted)}
.dt-nobn .dt-stem.is-tr,.dt-nobn .dt-ot small[lang="bn"],.dt-nobn .dt-sit small[lang="bn"]{display:none}
.dt-nobn .dt-stems.is-two{grid-template-columns:1fr}

.dt .dt-snav .dt-sjump{flex-basis:100%;display:flex;justify-content:center;align-items:center;gap:10px;margin:4px 0 0;padding:0}
.dt .dt-sjump-l{font-size:14px;font-weight:650;color:var(--muted);line-height:44px}
.dt .dt-sjump input{box-sizing:border-box;width:110px;height:44px;margin:0;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:16px;line-height:44px;text-align:center}
.dt .dt-sjump-go{box-sizing:border-box;height:44px;margin:0;padding:0 18px;border:1px solid var(--teal);border-radius:12px;background:#fff;color:var(--teal-d);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.dt .dt-sjump-go:hover{background:#f3faf7}