/* ================================================================
   디지털 포트 vs 아날로그 포트 (보드 장 바로 다음)
   왼쪽: 스위치 → 램프가 켜짐/꺼짐 두 가지 / 오른쪽: 다이얼 → 램프 밝기가 0~100
   ================================================================ */
.da{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:22px}
.da > div{position:relative;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:7px 7px 0 var(--ink);padding:20px 26px 22px;display:grid;grid-template-columns:1fr 230px;grid-template-rows:auto 1fr auto;column-gap:16px}
.da h3{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;font-size:48px;font-weight:900;line-height:1.1}
.da h3 .tag{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;border:4px solid currentColor;font-size:38px}
.da-d h3{color:var(--coral)}
.da-a h3{color:var(--purple)}
.da h3 small{font-size:26px;color:var(--ink);font-weight:900}
.da .say{grid-column:1;font-size:36px;font-weight:900;line-height:1.35;margin-top:14px}
.da .say b{background:linear-gradient(transparent 60%,rgba(255,212,59,.85) 60%)}
.da .ex{grid-column:1;align-self:end;font-size:24px;font-weight:700;color:var(--mute);line-height:1.5}
.da .ex em{font-style:normal;color:var(--ink);font-weight:900}
/* 램프 (꺼진 그림 위에 켜진 그림을 겹쳐 투명도로 밝기) */
.da-lamp{grid-column:2;grid-row:2/4;position:relative;align-self:center;height:230px}
.da-lamp img{position:absolute;inset:0;width:230px;mix-blend-mode:multiply}
.da-lamp .lit{opacity:0;transition:opacity .25s}
.da-d .da-lamp .lit{transition:opacity .08s}
/* 조작부 */
.da-ctl{grid-column:1;display:flex;align-items:center;gap:22px;margin-top:20px}
.da-v{font-size:30px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.da-v b{font-size:52px;color:var(--ink)}
.da-sw{position:relative;width:132px;height:68px;border-radius:99px;border:4px solid var(--ink);background:#e7e3da;cursor:pointer;transition:background .15s}
.da-sw i{position:absolute;left:6px;top:6px;width:48px;height:48px;border-radius:50%;background:#fff;border:3px solid var(--ink);transition:left .15s cubic-bezier(.3,1.5,.5,1)}
.da-sw.on{background:var(--coral)}
.da-sw.on i{left:72px}
.da-knob{position:relative;width:76px;height:76px;border-radius:50%;border:4px solid var(--ink);background:#fff;flex:none}
.da-knob i{position:absolute;left:50%;top:6px;width:6px;height:26px;margin-left:-3px;border-radius:3px;background:var(--purple);transform-origin:50% 26px}
.da-knob::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:3px dashed rgba(27,27,31,.25)}
.da-range{-webkit-appearance:none;appearance:none;width:200px;height:16px;border-radius:99px;border:3px solid var(--ink);background:linear-gradient(90deg,var(--purple) var(--p,0%),#fff var(--p,0%));cursor:pointer}
.da-range::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:#fff;border:4px solid var(--ink)}
/* 두 가지 vs 여러 단계를 칸으로 보여 주는 띠 */
.da-scale{grid-column:1;display:flex;gap:6px;margin-top:16px}
.da-scale i{flex:1;height:22px;border-radius:5px;border:2.5px solid var(--ink)}
.da-d .da-scale i:first-child{background:#e7e3da}.da-d .da-scale i:last-child{background:var(--coral)}
.da-a .da-scale i{border-width:2px}
.da-rule{margin-top:26px;display:flex;align-items:center;gap:22px;font-size:34px;font-weight:900;background:var(--ink);color:#fff;border-radius:14px;padding:16px 26px}
.da-rule .r{display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;border-radius:50%;border:3px solid var(--hl,#FFD43B);color:var(--hl,#FFD43B);font-size:.85em;margin:0 .1em}
.da-rule span.to{margin-left:auto;font-size:28px;font-weight:700;opacity:.9}
.da-rule span.to b{color:var(--hl,#FFD43B)}
body[data-mode="present"] .x-da .title{font-size:92px}
@media (max-width:820px){.da{grid-template-columns:1fr}.da > div{grid-template-columns:1fr}.da-lamp{grid-column:1;grid-row:auto;height:180px}.da-lamp img{width:180px}.da-rule{flex-wrap:wrap;font-size:22px}}
/* 불빛: 램프 그림은 하나만 두고 빛을 그 위에 그린다 (켜진 그림을 겹치면 위치가 어긋나 상이 두 개로 보임) */
.da-lamp svg.lit{position:absolute;left:0;top:0;width:230px;height:230px;overflow:visible;opacity:0;transition:opacity .25s;pointer-events:none}
.da-d .da-lamp svg.lit{transition:opacity .08s}
.da-lamp .cone{fill:rgba(255,212,59,.55);filter:blur(7px)}
.da-lamp .bulb{fill:#FFE266;filter:blur(5px)}
.da-lamp svg.lit{mix-blend-mode:multiply}