/*
 * 기믹 '끊어 읽기'(js/gimmicks/wordCut.js) 스타일. 토큰은 css/base.css · css/stage.css.
 * - 글자 크기: 창 글자 크기(--fs)를 따라 em 으로 잡는다. 글자 단추는 44px 이상.
 * - 끊은 자리: 세로 막대 + 넓어진 틈. 틀림: 번짐(blur) + ✕ + 점선, 덜 끊긴 말: 물결 밑줄 + …, 강조: ▼ + 점선 테두리, 정답: ◎.
 * - 방점 음높이 막대: 모양으로 가른다(평성 아래 가로 막대, 거성 위 가로 막대, 상성 오르는 비탈). 방점 끄기면 숨긴다.
 * - 움직임 줄이기: html[data-nm-motion="reduce"], html.nm-reduced-motion, .gwc.is-static 이면 전환 없음.
 */
.gwc { display: flex; flex-direction: column; gap: .8em; }
.gwc-guide { margin: 0; font-size: .92em; opacity: .85; }
.gwc-line {
  padding: .6em .7em; border-radius: 12px; background: #fbf6ea;
  border: 1px solid var(--st-line, rgba(43, 36, 32, .22)); box-shadow: inset 0 0 0 3px #fbf6ea, inset 0 0 0 4px rgba(184, 50, 42, .25);
}
.gwc-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-bottom: .3em; }
.gwc-title { font-weight: 600; font-size: .88em; }
.gwc-src { font-size: .78em; opacity: .75; margin: .3em 0 0; }
.gwc-row { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: .35em; }
.gwc-cell { display: inline-flex; flex-direction: column; align-items: center; border-radius: 6px; }
.gwc-syl {
  min-width: 44px; min-height: 44px; padding: 0 .15em; margin: 0; border-radius: 6px;
  border: 1.5px solid transparent; background: transparent; color: var(--ink, #2b2420); cursor: pointer;
  font: 400 1.45em/1.5 var(--font-yet, 'NMYet', serif); letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.gwc-syl:hover:not(:disabled) { background: var(--st-shade, rgba(43, 36, 32, .07)); border-color: var(--st-line, rgba(43, 36, 32, .22)); }
.gwc-syl[aria-pressed="true"] { border-right-color: var(--ink, #2b2420); }
.gwc-last { cursor: default; }
.gwc-syl:disabled { cursor: default; }
.gwc-gap {
  position: relative; align-self: stretch; width: .3em; min-height: 44px; cursor: pointer;
  display: inline-flex; align-items: flex-start; justify-content: center; transition: width .15s;
}
.gwc-bar { display: none; width: 3px; height: 1.9em; margin-top: .2em; border-radius: 2px; background: var(--ink, #2b2420); }
.gwc-gap.is-cut { width: .95em; }
.gwc-gap.is-cut .gwc-bar { display: block; }
.gwc-sym { position: absolute; top: -0.35em; left: 50%; transform: translateX(-50%); font: 900 .85em/1 var(--font-ui, system-ui, sans-serif); pointer-events: none; }

/* 방점 음높이 막대 */
.gwc-pitch { position: relative; display: block; width: 1.4em; height: .55em; margin-top: .05em; }
.gwc-pitch-bar { position: absolute; left: .1em; right: .1em; height: 3px; border-radius: 2px; background: var(--interp, #34508a); }
.gwc-pitch[data-tone="0"] .gwc-pitch-bar { bottom: 0; }
.gwc-pitch[data-tone="1"] .gwc-pitch-bar { top: 0; }
.gwc-pitch[data-tone="2"] .gwc-pitch-bar { top: 50%; transform: rotate(-20deg); }
.gwc-pitch[data-tone="none"] .gwc-pitch-bar { display: none; }
html[data-nm-bangjeom="off"] .gwc-pitch, html[data-nm-bangjeom="off"] .gwc-legend { display: none; }
.gwc-legend { padding: .5em .7em; border-radius: 10px; border: 1px solid var(--st-line, rgba(43, 36, 32, .22)); background: #fffaf0; }
.gwc-legend-title { margin: 0 0 .3em; font-weight: 700; font-size: .9em; }
.gwc-legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3em 1.1em; }
.gwc-legend-item { display: inline-flex; align-items: center; gap: .4em; font-size: .88em; }
.gwc-legend-item .gwc-pitch { height: .9em; }
.gwc-legend-note { margin: .4em 0 0; font-size: .8em; }

/* 두 장 견주기 */
.gwc-compare { display: flex; flex-direction: column; gap: .5em; }
.gwc-compare-title { margin: 0; font-weight: 700; font-size: .92em; }
.gwc-pair { padding: .5em .7em; border-radius: 10px; border: 2px dashed var(--st-line, rgba(43, 36, 32, .22)); background: #fffaf0; }
.gwc-pair[data-found="1"] { border-style: solid; border-color: var(--st-know, #4f6b3a); }
.gwc-pair-words { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; font-size: 1.3em; }
.gwc-word { padding: 0 .3em; border-radius: 6px; border: 1.5px dashed var(--st-line, rgba(43, 36, 32, .22)); }
.gwc-word.is-found { border-style: solid; border-color: var(--st-know, #4f6b3a); background: #f1f6ea; }
.gwc-vs { font-family: var(--font-ui, system-ui, sans-serif); }
.gwc-note { margin: .3em 0 0; font-size: .9em; }
.gwc-pair-state { display: inline-block; margin-top: .25em; font-size: .82em; font-weight: 700; }
.gwc-cell.is-pair .gwc-syl { background: linear-gradient(transparent 70%, rgba(79, 107, 58, .3) 70%); }

.gwc-actions { display: flex; justify-content: flex-end; }

/* 틀림: 번짐 */
.gwc-gap.is-wrong .gwc-bar { background: var(--seal, #b8322a); filter: blur(1.5px); box-shadow: 0 0 6px 2px rgba(184, 50, 42, .55); }
.gwc-gap.is-wrong .gwc-sym { color: var(--seal, #b8322a); }
.gwc-cell.is-joined .gwc-syl { text-decoration: underline wavy var(--seal, #b8322a); text-underline-offset: .25em; }
/* 도움 2 */
.gwc-gap.is-hint { outline: 2px dotted var(--st-focus, #d08a12); outline-offset: 1px; border-radius: 4px; }
.gwc-gap.is-hint .gwc-sym { color: var(--st-focus, #d08a12); }
/* 정답 */
.gwc-gap.is-answer .gwc-bar { background: var(--st-know, #4f6b3a); }
.gwc-gap.is-answer .gwc-sym { color: var(--st-know, #4f6b3a); font-size: .6em; }

.gwc button:focus-visible { outline: 3px solid var(--st-focus, #d08a12); outline-offset: 1px; }
html[data-nm-motion="reduce"] .gwc *, html.nm-reduced-motion .gwc *, .gwc.is-static * { transition: none !important; animation: none !important; }