/*
 * 기믹 G8 종합 해독 (js/gimmicks/prefaceDecode.js). 공용 부품은 css/g-g789-origwords.css.
 * 글자 크기: 뿌리에서 calc(17px * var(--fs, 1) * var(--st-big, 1)), 안쪽은 em. 색만으로 나누지 않음(○ ● ✕ 기호, 점선).
 */
.pd { font-size: calc(17px * var(--fs, 1) * var(--st-big, 1)); display: flex; flex-direction: column; gap: .8em; min-width: 0; }
.pd-howto { margin: 0; }
.pd-h { margin: .3em 0 .2em; font-size: 1em; font-weight: 700; }
.pd-sub { margin: 0; font-size: .88em; font-weight: 600; }
.pd-tip { margin: 0; font-size: .8em; opacity: .85; }
.pd-nav { display: flex; flex-wrap: wrap; gap: .35em; }
.pd-nav-btn {
  min-height: 44px; min-width: 44px; padding: .2em .7em; border-radius: 10px; cursor: pointer;
  border: 2px solid rgba(43, 36, 32, .3); background: #fffaf0; color: inherit; font: 600 .9em/1.2 var(--font-ui, sans-serif);
  display: inline-flex; align-items: center; gap: .3em;
}
.pd-nav-btn[aria-current="step"] { border-color: var(--ink, #2b2420); background: var(--hanji, #efe4cf); box-shadow: inset 0 -3px 0 var(--ink, #2b2420); }
.pd-nav-btn.is-wrong { border: 2px dashed var(--seal, #b8322a); }
.pd-nav-btn.is-wrong .pd-nav-sym { color: var(--seal, #b8322a); }
.pd-nav-btn:focus-visible, .pd-piece:focus-visible, .pd-hanmun-sum:focus-visible { outline: 3px solid var(--st-focus, #d08a12); outline-offset: 2px; }
.pd-phrase, .pd-spirits, .pd-modern { display: flex; flex-direction: column; gap: .55em; }
.pd-phrase[hidden], .pd-spirits[hidden] { display: none; }
.pd-hanmun { font-size: .92em; }
.pd-hanmun-sum { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.pd-dec { display: flex; flex-direction: column; gap: .35em; padding: .5em .6em; border: 1px solid var(--st-line, rgba(43, 36, 32, .22)); border-radius: 10px; }
.pd-dec.is-wrong { border: 2px dashed var(--seal, #b8322a); }
.pd-dec.is-hint, .pd-sp.is-hint, .pd-seg.is-hint, .pd-tray.is-hint { box-shadow: 0 0 0 3px rgba(208, 138, 18, .35); }
.pd-dec-word { font-size: 1.25em; }
.pd-rule { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; font-size: .88em; }
.pd-rule-name { font-weight: 700; }
.pd-rule-where { opacity: .9; }
.pd-rule-text { flex: 1 1 100%; opacity: .9; }
.pd-tray-wrap { display: flex; flex-direction: column; gap: .3em; }
.pd-tray, .pd-pool { display: flex; flex-wrap: wrap; gap: .4em; min-height: 48px; padding: .35em; border-radius: 10px; }
.pd-tray { border: 2px solid var(--ink, #2b2420); background: #fffdf6; }
.pd-pool { border: 1px dashed rgba(43, 36, 32, .35); }
.pd-tray-empty { margin: auto 0; font-size: .85em; opacity: .8; }
.pd-piece {
  min-height: 44px; max-width: 100%; padding: .25em .7em; border-radius: 8px; cursor: pointer; text-align: left;
  border: 2px solid rgba(43, 36, 32, .35); background: #fffaf0; color: inherit; font: 500 .95em/1.35 var(--font-ui, sans-serif);
  display: inline-flex; align-items: center; gap: .35em;
}
.pd-piece:disabled { cursor: default; }
.pd-piece.is-placed { border-color: var(--ink, #2b2420); background: var(--hanji, #efe4cf); }
.pd-piece-no { font-weight: 700; font-size: .8em; min-width: 1.3em; height: 1.3em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid currentColor; }
.pd-piece.is-wrong { border: 2px dashed var(--seal, #b8322a); }
.pd-piece.is-wrong::after { content: '\2715'; color: var(--seal, #b8322a); font-weight: 700; }
.pd-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 2px dashed var(--seal, #b8322a); border-radius: 8px; color: var(--seal, #b8322a); font-weight: 700; }
.pd-piece.is-answer { border: 3px solid var(--st-know, #4f6b3a); }
.pd-piece.is-answer::after { content: '\25cb'; color: var(--st-know, #4f6b3a); font-weight: 700; }
.pd-sp, .pd-seg { display: flex; flex-direction: column; gap: .4em; padding: .5em .6em; border: 1px solid var(--st-line, rgba(43, 36, 32, .22)); border-radius: 10px; }
.pd-sp.is-wrong, .pd-seg.is-wrong { border: 2px dashed var(--seal, #b8322a); }
.pd-seg-text { font-size: 1.05em; line-height: 1.7; }
.pd-seg-text.is-cue { background: linear-gradient(transparent 55%, rgba(208, 138, 18, .35) 55%); }
.pd-seg-text.is-cue::before { content: '\25c6\00a0'; color: #8a5c00; font-size: .8em; }
.pd-modern-head { display: flex; gap: .5em; }
.pd-pager { display: flex; justify-content: space-between; gap: .6em; }
.pd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6em; }
.pd-note { flex: 1 1 12em; margin: 0; font-size: .9em; }
.pd-note:empty { display: none; }