/* 사이트 데모 — 실제 확장(samsung-extension)의 유튜브 자막·패널, 웹 쉬운말 카드, 학습 카드를 그대로 옮긴 것.
   색의 뜻도 확장과 같다: 원문 = 먹색, 쉬운말 = 파랑, 수어 어순 = 노랑.
   기기가 다크 모드면 유튜브 어두운 테마처럼 바뀐다(아래 변수만 바꾼다). */

.dm {
  --ink0: #14171f; --on-ink0: #fff; --easy0: #1366e4; --sign0: #ffdd00;
  --bg0: #fff; --sub0: #f3f4f6; --line0: #e5e7eb; --mut0: #6b7280; --faint0: #9ca3af; --txt0: #374151;
  --chrome0: #f5f6f8; --edge0: #eceef2; --dot0: #dfe2e7; --sel0: #cfe0ff; --hover0: #fff6c2;
  --easy-tag-bg: #e9f1fe; --sign-tag-bg: #fff4b8; --sign-tag-ink: #6b5600;
  font-size: 13px; line-height: 1.5; color: var(--ink0); text-align: left; letter-spacing: -0.01em;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dm {
    --ink0: #f1f1f1; --on-ink0: #0f0f0f; --easy0: #3ea6ff;
    --bg0: #0f0f0f; --sub0: #272727; --line0: #303030; --mut0: #aaaaaa; --faint0: #8a8a8a; --txt0: #d4d4d4;
    --chrome0: #1b1b1b; --edge0: #2c2c2c; --dot0: #3a3a3a; --sel0: rgba(62, 166, 255, .32); --hover0: rgba(255, 221, 0, .18);
    --easy-tag-bg: rgba(62, 166, 255, .16); --sign-tag-bg: rgba(255, 221, 0, .16); --sign-tag-ink: #ffdd00;
  }
}
.dm * { box-sizing: border-box; }
/* :where로 낮춰야 .wd-chip·.yw-back 같은 자기 배경색이 덮이지 않는다 */
:where(.dm) button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
/* 화면 밖이면 비·파형 같은 계속 도는 움직임을 멈춘다(스크롤이 끊기지 않게) */
.dm.paused *, .dm.paused *::before, .dm.paused *::after { animation-play-state: paused !important; }

/* 브라우저 틀 */
.dm-browser { background: var(--bg0); border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 23, 41, .08), 0 30px 70px -30px rgba(15, 23, 41, .45); }
.dm-bar { height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--chrome0); border-bottom: 1px solid var(--edge0); }
.dm-dots { display: flex; gap: 6px; }
.dm-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--dot0); }
.dm-url { flex: 1; max-width: 420px; margin: 0 auto; height: 26px; border-radius: 8px; background: var(--bg0); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--mut0); box-shadow: 0 0 0 1px var(--edge0); }
.dm-ext { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--bg0); box-shadow: 0 0 0 1px var(--edge0); }
.dm-ext img { width: 15px; }

/* ── 유튜브 ── */
.yt-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; padding: 14px; background: var(--bg0); }
.yt-player { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0b1220; color: #fff; }
.yt-scene { position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 10%, #3a5b8f 0%, #1a2a47 45%, #0b1220 100%); }
.yt-scene::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 18%; height: 38%; border-radius: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.yt-scene i { position: absolute; top: -20%; width: 1px; height: 18%; background: linear-gradient(transparent, rgba(190, 215, 255, .55)); animation: rain 1.1s linear infinite; }
@keyframes rain { to { transform: translateY(700%); } }
.yt-anchor { position: absolute; top: 18px; left: 18px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.yt-anchor::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; }
.yt-cap-zone { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); width: min(92%, 560px); display: grid; justify-items: center; gap: 8px; }
.yt-cap { max-width: 100%; padding: 5px 16px 7px; border-radius: 8px; background: rgba(8, 9, 12, .75); color: #fff; font-size: clamp(14px, 1.9vw, 21px); font-weight: 600; line-height: 1.55; text-align: center; word-break: keep-all; }
/* 누를 수 있는 낱말은 점선 밑줄 — 눌러 볼 수 있다는 걸 보이게 */
.yt-cap .w { cursor: pointer; border-radius: 3px; text-decoration: underline 2px dotted rgba(255, 255, 255, .5); text-underline-offset: 6px; transition: text-decoration-color .12s, background .12s; }
.yt-cap .w:hover, .yt-cap .w.sel { text-decoration: underline 2px solid #ffdd00; background: rgba(255, 221, 0, .16); }
.yt-cap.fade { animation: capin .35s ease both; }
@keyframes capin { from { opacity: 0; transform: translateY(4px); } }
.yt-controls { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.yt-track { position: absolute; left: 14px; right: 14px; top: 2px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.yt-track i { display: block; height: 100%; width: var(--p, 0%); background: #ff0033; border-radius: inherit; transition: width .25s linear; }
.yt-play { width: 16px; height: 16px; }
.yt-time { font-size: 12px; opacity: .85; font-variant-numeric: tabular-nums; }
.yt-ext { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.yt-ext img { width: 18px; }
.yt-ext span { width: 28px; height: 16px; border-radius: 999px; background: #1366e4; position: relative; }
.yt-ext span::after { content: ""; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.yt-title { grid-column: 1; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; padding: 2px 2px 0; }

/* "눌러 보세요" 말풍선 — 처음 한 번 눌러 볼 때까지 낱말 바로 아래에서 살짝 뛴다(위는 모드 스위치 자리) */
.dm-hint { position: absolute; z-index: 5; transform: translate(-50%, 0); pointer-events: none; white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: #ffdd00; color: #14171f; font-size: 12.5px; font-weight: 800; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .45); animation: hint 1.4s ease-in-out infinite; transition: opacity .25s; }
.dm-hint::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.dm-hint[hidden] { display: block !important; opacity: 0; }
@keyframes hint { 50% { margin-top: -5px; } }

/* 모드 스위치(확장의 .ieasy-seg--mode) */
.dm-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 999px; background: var(--sub0); isolation: isolate; }
.dm-seg::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; z-index: -1; width: calc((100% - 6px) / 3); border-radius: 999px; background: var(--m); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .22s cubic-bezier(.2, .8, .2, 1), background-color .22s; }
.dm-seg button { height: 30px; padding: 0 8px; border-radius: 999px; color: var(--mut0); font-size: 13px; font-weight: 600; white-space: nowrap; transition: color .22s; }
.dm-seg button[aria-pressed="true"] { color: var(--m-on); }
[data-mode="original"] { --m: var(--ink0); --m-on: var(--on-ink0); }
[data-mode="easy"] { --m: var(--easy0); --m-on: #fff; }
[data-mode="ksl"] { --m: var(--sign0); --m-on: #14171f; }
.yt-modes { width: 250px; background: rgba(16, 17, 20, .78); }
.yt-modes button { height: 28px; color: rgba(255, 255, 255, .72); }
.yt-modes[data-mode="original"] { --m: #fff; --m-on: #14171f; }

/* 오른쪽 패널(확장의 #ieasy-video-panel) */
.yt-panel { display: flex; flex-direction: column; min-height: 0; border-radius: 12px; box-shadow: 0 0 0 1px var(--line0); overflow: hidden; background: var(--bg0); grid-row: span 2; max-height: 420px; }
.yp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 10px 14px; }
.yp-brand { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 800; letter-spacing: -0.02em; }
.yp-brand img { width: 18px; }
.yp-icons { display: flex; gap: 2px; color: var(--mut0); }
.yp-icons i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; }
.yp-icons svg { width: 16px; height: 16px; }
.yp-modes { margin: 0 12px 10px; }
.yp-body { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 0 8px 10px; scrollbar-width: thin; }
.yp-search { margin: 0 4px 6px; height: 32px; border-radius: 999px; background: var(--sub0); display: flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--faint0); font-size: 12.5px; }
.yp-row { width: 100%; cursor: pointer; display: grid; grid-template-columns: 38px 1fr; gap: 6px; padding: 7px 8px 7px 4px; border-radius: 10px; font-size: 13px; line-height: 1.6; text-align: left; transition: background .12s; }
.yp-row:hover { background: var(--sub0); }
.yp-row time { font-size: 11.5px; color: var(--faint0); font-variant-numeric: tabular-nums; padding-top: 2px; }
.yp-row.on { background: color-mix(in srgb, var(--m) 10%, transparent); box-shadow: inset 3px 0 0 var(--m); }
.yp-row.on time { color: var(--ink0); font-weight: 700; }
.yp-row .w { cursor: pointer; text-decoration: underline 1px dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 4px; }
.yp-row .w:hover { text-decoration: underline 1.5px solid currentColor; }
.yt-panel[data-mode="ksl"] .yp-row.on { background: color-mix(in srgb, #ffdd00 20%, transparent); box-shadow: inset 3px 0 0 #e0b800; }

/* 낱말 보기 */
.yw { padding: 2px 6px 6px; display: grid; gap: 10px; animation: capin .25s ease both; }
.yw-back { justify-self: start; display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--mut0); background: var(--sub0); }
.yw-title { display: flex; align-items: center; gap: 6px; font-size: 24px; font-weight: 750; letter-spacing: -0.03em; }
.yw-title button { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--mut0); }
.yw-title button:hover { background: var(--sub0); color: var(--ink0); }
.yw-title svg { width: 16px; height: 16px; }
.yw-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sub0); }
.yw-tabs span { height: 30px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--mut0); }
.yw-tabs span.on { background: var(--bg0); color: var(--ink0); box-shadow: 0 1px 3px rgba(20, 23, 31, .14); }
.yw-stage { position: relative; aspect-ratio: 700 / 466; border-radius: 10px; overflow: hidden; background: radial-gradient(90% 90% at 50% 35%, #aeb9c6, #7a8797); color: #f3f5f8; display: grid; place-items: center; font-size: 12.5px; text-align: center; padding: 0; }
.yw-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* 어떤 낱말의 수어인지 영상 위에 붙인다(확장의 "1 / 1 · 신청" 표시와 같은 자리) */
.yw-badge { position: absolute; z-index: 1; left: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(10, 12, 16, .62); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em; }
.yw-def { font-size: 13px; color: var(--txt0); }
.yw-def small { display: block; font-size: 11.5px; color: var(--faint0); margin-bottom: 2px; }
.yw-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.yw-actions a, .yw-actions button { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; background: var(--sub0); }
.yw-actions .on { background: var(--ink0); color: var(--on-ink0); }

/* ── 웹 쉬운말 ── */
.wd-page { position: relative; padding: clamp(20px, 3vw, 36px); min-height: 500px; background: var(--bg0); }
.wd-org { font-size: 12px; color: var(--mut0); font-weight: 600; }
.wd-h { font-size: clamp(18px, 2vw, 22px); font-weight: 750; letter-spacing: -0.03em; margin: 6px 0 14px; }
.wd-text { font-size: 15px; line-height: 1.95; color: var(--txt0); }
.wd-s { cursor: pointer; border-radius: 4px; text-decoration: underline 1px dotted color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 5px; transition: background .15s; }
.wd-s:hover { background: var(--hover0); }
.wd-s.sel { background: var(--sel0); color: var(--ink0); text-decoration: none; }
.wd-chip { position: absolute; z-index: 3; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; background: #14171f; color: #fff; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); animation: capin .2s ease both; }
.wd-chip img { width: 16px; }
.wd-card { position: absolute; z-index: 4; width: min(340px, calc(100% - 24px)); background: var(--bg0); border-radius: 16px; box-shadow: 0 0 0 1px var(--line0), 0 24px 48px -16px rgba(15, 23, 41, .35); padding: 14px; display: grid; gap: 10px; animation: capin .25s ease both; }
.wd-card header { display: flex; align-items: center; justify-content: space-between; }
.wd-card header b { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.wd-card header img { width: 16px; }
.wd-card header button { width: 26px; height: 26px; border-radius: 8px; color: var(--mut0); }
.wd-sec { display: grid; gap: 4px; }
.wd-tag { justify-self: start; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.wd-tag.easy { background: var(--easy-tag-bg); color: var(--easy0); }
.wd-tag.sign { background: var(--sign-tag-bg); color: var(--sign-tag-ink); }
.wd-easy { font-size: 14.5px; font-weight: 600; line-height: 1.6; color: var(--ink0); }
.wd-sign { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; }
.wd-sign .yw-stage { font-size: 11px; }
.wd-sign p { font-size: 12.5px; color: var(--txt0); }
.wd-sign p b { display: block; font-size: 14px; color: var(--ink0); }

/* ── 학습 ── */
.ld { padding: clamp(18px, 3vw, 28px); background: var(--chrome0); border-radius: 24px; display: grid; gap: 14px; justify-items: center; }
.ld-top { width: min(420px, 100%); display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--mut0); font-weight: 600; }
.ld-prog { flex: 1; height: 6px; border-radius: 999px; background: var(--line0); overflow: hidden; }
.ld-prog i { display: block; height: 100%; width: var(--p); background: var(--ink0); border-radius: inherit; transition: width .4s ease; }
.ld-card { width: min(420px, 100%); background: var(--bg0); border-radius: 20px; padding: 16px; display: grid; gap: 12px; box-shadow: 0 0 0 1px var(--line0), 0 16px 40px -20px rgba(15, 23, 41, .3); }
.ld-q { text-align: center; font-size: 13px; font-weight: 700; color: var(--mut0); }
.ld-reveal-wrap { position: relative; display: grid; }
.dm-hint.up { left: 50%; bottom: calc(100% + 10px); animation-name: hint-up; }
@keyframes hint-up { 50% { margin-bottom: 5px; } }
.dm-hint.up::after { top: auto; bottom: -5px; }
.ld-reveal { height: 44px; border-radius: 12px; background: var(--ink0) !important; color: var(--on-ink0) !important; font-size: 14px; font-weight: 700; }
.ld-ans { text-align: center; display: grid; gap: 2px; }
.ld-ans b { font-size: 28px; letter-spacing: -0.04em; }
.ld-ans span { font-size: 13.5px; color: var(--txt0); }
.ld-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ld-grades button { height: 52px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line0); font-size: 13px; font-weight: 700; display: grid; align-content: center; }
.ld-grades button small { font-size: 11px; font-weight: 600; color: var(--faint0); }
.ld-grades .again { color: #e5484d; }
.ld-grades .good { background: var(--ink0); color: var(--on-ink0); box-shadow: none; }
.ld-grades .good small { color: color-mix(in srgb, var(--on-ink0) 65%, transparent); }

@media (max-width: 760px) {
  .yt-body { grid-template-columns: 1fr; }
  .yt-panel { grid-row: auto; max-height: 340px; }
  .yt-cap-zone { bottom: 50px; }
  .yt-modes { width: 210px; }
  .yt-anchor { display: none; }
}

/* 설명 점선(calloutRight) */
.dm-callout { position: absolute; z-index: 2; width: 160px; transform: translateY(-50%); display: grid; gap: 4px; text-align: left; font-size: 13.5px; line-height: 1.5; color: var(--ink-2, #4b5263); }
.dm-callout[hidden] { display: none; }
.dm-callout b { font-size: 14px; color: var(--ink, #14171f); letter-spacing: -0.02em; }
.dm-callout::before { content: ""; position: absolute; right: calc(100% + 10px); top: 50%; width: var(--reach, 60px); border-top: 1.5px dashed var(--ink-3, #8b93a3); }
.dm-callout::after { content: ""; position: absolute; right: calc(100% + 10px + var(--reach, 60px) - 4px); top: calc(50% - 3.5px); width: 8px; height: 8px; border-radius: 50%; background: var(--ink, #14171f); box-shadow: 0 0 0 3px var(--bg, #fff); }