/* 2026-10-21 조동사(단원 9): 기존 gi 화면을 유지하며 단원 9 전용 부품만 더한다. 모든 선택자는 #main .gi .mo-로 한정한다. 동명사 단원(ps2-gerund.css)의 모양을 옮기고 새 부품(조동사 렌즈 · 두 갈래 가르기 · 확신의 단계 · 모양 다이얼)을 더했다. 설계 D:\PeshareGrammarModal\SPEC.md */
#main .gi .mo-caption { padding: 0 0 10px; text-align: left; color: var(--ps-ink-2); font-size: 14px; font-weight: 600; }
#main .gi .mo-cell { display: block; width: 100%; padding: 4px 0; border: 0; border-radius: 5px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#main .gi .mo-cell:focus-visible { outline: 3px solid var(--ps-brand, #2563eb); outline-offset: 4px; }
#main .gi .mo-rare { background: #fff8dc; }
#main .gi .mo-rare-label { display: inline-block; margin-top: 7px; padding: 2px 8px; border: 1px solid #e7cc7a; border-radius: 999px; background: #fff0b8; color: #705000; font-size: 11px; font-weight: 800; }

/* 한눈에 보기 표 (parts/modal_table.jsp) */
#main .gi .mo-slot { table-layout: fixed; width: 100%; }
#main .gi .mo-slot col.c-p { width: 20%; }
#main .gi .mo-slot col.c-s { width: 42%; }
#main .gi .mo-slot col.c-m { width: 18%; }
#main .gi .mo-slot col.c-o { width: 20%; }
#main .gi .mo-slot th { white-space: normal; }
#main .gi .mo-slot td.p { white-space: normal; }
#main .gi .mo-slot td.p small { display: block; margin-top: 3px; color: var(--ps-ink-3); font-size: 12.5px; font-weight: 500; }
#main .gi .mo-slot td.m, #main .gi .mo-slot td.o { white-space: normal; font-size: 14px; }
#main .gi .mo-slot td.en .s { display: block; font-weight: 700; line-height: 1.45; }
#main .gi .mo-slot td.en .s u { text-decoration: none; border-bottom: 3px solid var(--ps-brand, #2563eb); color: var(--ps-brand, #2563eb); }
#main .gi .mo-slot td.en small { display: block; margin-top: 4px; color: var(--ps-ink-3); font-size: 12.5px; line-height: 1.45; }
@media (max-width: 760px) {
    #main .gi .gi-master:has(.mo-slot) { overflow-x: auto; }
    #main .gi .mo-slot { min-width: 640px; }
}

/* 조동사 · 덧셈 · 원형을 색으로 보이는 문장 (장 본문): <p class="mo-chips"><span class="m">must</span> <span class="a">have</span> <span class="v">left</span> early.</p> */
#main .gi .mo-chips { margin: 10px 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--ps-bg-2, #f6f7fb); font-size: 17px; line-height: 2; }
#main .gi .mo-chips span { display: inline-block; margin: 0 2px; padding: 0 8px; border-radius: 6px; font-weight: 700; }
#main .gi .mo-chips .m { background: #ffe9d6; color: #8a3b00; }
#main .gi .mo-chips .a { background: #fff3c4; color: #7a5200; }
#main .gi .mo-chips .v { background: #e6f6e9; color: #1b5e20; }
#main .gi .mo-chips .s { background: #e3f2ff; color: #0b4a8a; }
#main .gi .mo-chips .x { background: #ffe0e0; color: #9b1c1c; text-decoration: line-through; }
#main .gi .mo-chips small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ps-ink-3); font-weight: 500; }
#main .gi .mo-legend { margin: -6px 0 16px; font-size: 13px; color: var(--ps-ink-3); }
#main .gi .mo-legend i { display: inline-block; width: 12px; height: 12px; margin: 0 4px 0 10px; border-radius: 3px; vertical-align: -1px; }
#main .gi .mo-legend i.m { background: #ffe9d6; border: 1px solid #f0b98a; }
#main .gi .mo-legend i.a { background: #fff3c4; border: 1px solid #e5c76b; }
#main .gi .mo-legend i.v { background: #e6f6e9; border: 1px solid #9fd4a8; }
#main .gi .mo-legend i.s { background: #e3f2ff; border: 1px solid #9cc7ee; }

/* 두 모양을 나란히 견주는 표의 작은 설명 */
#main .gi .gi-table td small.mo-note { display: block; margin-top: 3px; color: var(--ps-ink-3); font-size: 12.5px; line-height: 1.45; }
/* 확신 · 세기의 단계를 보이는 표의 띠 */
#main .gi .mo-steps { display: grid; gap: 6px; margin: 10px 0 16px; padding: 0; list-style: none; }
#main .gi .mo-steps li { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--ps-line, #dfe5ee); }
#main .gi .mo-steps li b { font-size: 16px; color: #0f2a4a; }
#main .gi .mo-steps li span { font-size: 14.5px; color: var(--ps-ink-2); }
#main .gi .mo-steps li.is-top { background: #fff1e6; border-color: #f0b98a; }
#main .gi .mo-steps li.is-low { background: #eef6ff; border-color: #9cc7ee; }
@media (max-width: 640px) {
    #main .gi .mo-chips { font-size: 15px; }
    #main .gi .mo-steps li { grid-template-columns: 90px 1fr; }
}

/* 조동사 렌즈 (js/ps2-modal.js, .mo-lens[data-mo-lens]) */
#main .gi .mo-lens, #main .gi .mo-branch, #main .gi .mo-scale, #main .gi .mo-dial { margin: 14px 0 20px; padding: 14px 16px 14px; border: 1.5px solid var(--ps-line, #dfe5ee); border-radius: 16px; background: linear-gradient(180deg, #fbfcff, #f4f7fc); }
#main .gi .mo-lens__head, #main .gi .mo-branch__head, #main .gi .mo-scale__head, #main .gi .mo-dial__head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 8px; }
#main .gi .mo-lens__head b, #main .gi .mo-branch__head b, #main .gi .mo-scale__head b, #main .gi .mo-dial__head b { font-size: 15px; }
#main .gi .mo-lens__head span, #main .gi .mo-branch__head span, #main .gi .mo-scale__head span, #main .gi .mo-dial__head span { font-size: 13.5px; color: var(--ps-ink-3, #64748b); }
#main .gi .mo-lens__line { text-align: left; word-spacing: normal; margin: 6px 0 6px; font-size: 20px; line-height: 2.1; font-weight: 600; color: #0f2a4a; }
#main .gi .mo-lens__line .w { display: inline-block; margin: 0; padding: 0 3px; border: 2px solid transparent; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s; }
#main .gi .mo-lens__line .w:hover, #main .gi .mo-lens__line .w:focus-visible { background: #eef2f8; outline: none; }
#main .gi .mo-lens__line .w.is-miss { color: #b91c1c; text-decoration: line-through; text-decoration-thickness: 2px; }
#main .gi .mo-lens__line .w.is-modal { background: #ffedd5; color: #8a3b00; border-color: #ea8a3c; transform: translateY(-2px); }
#main .gi .mo-lens__line .w.is-add { background: #fff3c4; color: #7a5200; border-bottom-color: #e5c76b; }
#main .gi .mo-lens__line .w.is-verb { background: #e6f6e9; color: #14532d; border-bottom-color: #16a34a; }
#main .gi .mo-lens__ko { margin: 0 0 6px; color: var(--ps-ink-2); font-size: 14.5px; }
#main .gi .mo-lens__note { margin: 4px 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 14.5px; line-height: 1.65; }
#main .gi .mo-lens__note.is-ok { background: #f0fdf4; color: #14532d; }
#main .gi .mo-lens__note.is-no { background: #fef2f2; color: #7f1d1d; }
#main .gi .mo-lens__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#main .gi .mo-lens__acts .gi-btn[aria-pressed="true"] { border-color: var(--ps-ink); background: #f1f5f9; }
#main .gi .mo-lens__kind { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 800; }
#main .gi .mo-lens__kind.is-deed { background: #dcfce7; color: #14532d; }
#main .gi .mo-lens__kind.is-judge { background: #e0e7ff; color: #312e81; }
#main .gi .mo-lens__legend { margin: 10px 0 0; font-size: 12.5px; color: var(--ps-ink-3); }
#main .gi .mo-lens__legend i { display: inline-block; width: 12px; height: 12px; margin: 0 4px 0 10px; border-radius: 3px; vertical-align: -1px; }
#main .gi .mo-lens__legend i:first-child { margin-left: 0; }
#main .gi .mo-lens__legend i.m { background: #ffedd5; border: 1px solid #ea8a3c; }
#main .gi .mo-lens__legend i.a { background: #fff3c4; border: 1px solid #e5c76b; }
#main .gi .mo-lens__legend i.v { background: #e6f6e9; border: 1px solid #16a34a; }

/* 두 갈래 가르기 (.mo-branch) */
#main .gi .mo-branch__s { margin: 4px 0 10px; font-size: 19px; line-height: 1.7; font-weight: 600; color: #0f2a4a; }
#main .gi .mo-branch__s u { text-decoration: none; padding: 0 3px; border-radius: 6px; background: #fff7d6; box-shadow: inset 0 -3px 0 #f2b705; }
#main .gi .mo-branch__ko { margin: -4px 0 10px; color: var(--ps-ink-2); font-size: 14.5px; }
#main .gi .mo-branch__tests { display: grid; gap: 6px; margin: 0 0 12px; }
#main .gi .mo-branch__test { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#main .gi .mo-branch__res { padding: 4px 10px; border-radius: 8px; background: #fff; border: 1px dashed var(--ps-line-strong, #cbd5e1); font-size: 15px; }
#main .gi .mo-branch__pick { display: grid; gap: 8px; }
#main .gi .mo-branch__opt { display: block; width: 100%; padding: 10px 12px; border: 1.5px solid var(--ps-line-strong, #cbd5e1); border-radius: 12px; background: #fff; color: var(--ps-ink, #0f172a); font: inherit; font-size: 15px; font-weight: 700; text-align: center; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
#main .gi .mo-branch__opt:hover { border-color: var(--ps-ink, #0f172a); }
#main .gi .mo-branch__opt.is-ok { border-color: #16a34a; background: #f0fdf4; }
#main .gi .mo-branch__opt.is-no { border-color: #dc2626; background: #fef2f2; text-decoration: line-through; }
#main .gi .mo-branch__out, #main .gi .mo-scale__out { margin-top: 10px; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.65; }
#main .gi .mo-branch__out.is-no, #main .gi .mo-scale__out.is-no { background: #fef2f2; color: #7f1d1d; }
#main .gi .mo-branch__out.is-ok, #main .gi .mo-scale__out.is-ok { background: #fff; border: 1px solid var(--ps-line, #dfe5ee); }
#main .gi .mo-branch__why, #main .gi .mo-scale__why { margin: 0 0 8px; }
#main .gi .mo-branch__end, #main .gi .mo-scale__end { margin: 10px 0 0; color: var(--ps-ink-2, #334155); font-weight: 600; }

/* 확신의 단계 (.mo-scale) — 사다리 */
#main .gi .mo-scale__ko { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
#main .gi .mo-scale__wrap { display: grid; grid-template-columns: 1fr 96px; gap: 12px; align-items: stretch; }
#main .gi .mo-scale__ladder { position: relative; display: grid; gap: 6px; margin: 0; padding: 10px 14px; list-style: none; border-radius: 14px; background: linear-gradient(180deg, #fff1e6, #eef6ff); }
#main .gi .mo-scale__ladder::before, #main .gi .mo-scale__ladder::after { content: ""; position: absolute; top: 6px; bottom: 6px; width: 6px; border-radius: 3px; background: #c9a27a; }
#main .gi .mo-scale__ladder::before { left: 4px; }
#main .gi .mo-scale__ladder::after { right: 4px; }
#main .gi .mo-scale__rung { margin: 0; }
#main .gi .mo-scale__btn { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 8px 14px; border: 1.5px solid var(--ps-line-strong, #cbd5e1); border-radius: 10px; background: #fff; color: var(--ps-ink, #0f172a); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
#main .gi .mo-scale__btn b { min-width: 64px; font-size: 17px; color: #0f2a4a; }
#main .gi .mo-scale__btn small { font-size: 13.5px; color: var(--ps-ink-3); }
#main .gi .mo-scale__btn:hover { border-color: var(--ps-ink, #0f172a); transform: translateX(2px); }
#main .gi .mo-scale__btn.is-ok { border-color: #16a34a; background: #f0fdf4; }
#main .gi .mo-scale__rung.is-no .mo-scale__btn { border-color: #dc2626; background: #fef2f2; animation: mo-shake .5s; }
#main .gi .mo-scale__ladder.is-done .mo-scale__btn:not(.is-ok) { opacity: .55; }
#main .gi .mo-scale__side { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 12.5px; font-weight: 800; color: var(--ps-ink-3); text-align: center; }
#main .gi .mo-scale__side::before { content: "↑"; font-size: 22px; color: #ea8a3c; }
#main .gi .mo-scale__top { color: #8a3b00; }
#main .gi .mo-scale__bottom { color: #0b4a8a; }
#main .gi .mo-scale__res { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #0f2a4a; }
#main .gi .mo-scale__res u, #main .gi .mo-dial__line u { text-decoration: none; padding: 0 3px; border-radius: 6px; background: #ffedd5; box-shadow: inset 0 -3px 0 #ea8a3c; }

/* 모양 다이얼 (.mo-dial) */
#main .gi .mo-dial__sw { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
#main .gi .mo-dial__btn { height: 34px; padding: 0 14px; border: 1.5px solid var(--ps-line-strong, #cbd5e1); border-radius: 999px; background: #fff; color: var(--ps-ink-2, #334155); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s; }
#main .gi .mo-dial__btn.is-on { border-color: #ea8a3c; background: #ea8a3c; color: #fff; box-shadow: 0 4px 12px rgba(234, 138, 60, .25); }
#main .gi .mo-dial__line { margin: 4px 0 6px; font-size: 19px; line-height: 1.7; font-weight: 600; color: #0f2a4a; transition: opacity .2s; }
#main .gi .mo-dial.is-none .mo-dial__line { color: #94a3b8; font-size: 15px; font-weight: 600; }
#main .gi .mo-dial__ko { margin: 0 0 6px; color: var(--ps-ink-2, #334155); font-size: 15px; }
#main .gi .mo-dial__note { margin: 8px 0 0; font-size: 13.5px; color: var(--ps-ink-3, #64748b); }
@keyframes mo-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { #main .gi .mo-scale__rung.is-no .mo-scale__btn { animation: none; } }
@media (max-width: 600px) {
    #main .gi .mo-branch__pick { grid-template-columns: 1fr !important; }
    #main .gi .mo-branch__s, #main .gi .mo-dial__line, #main .gi .mo-lens__line { font-size: 17px; }
    #main .gi .mo-scale__wrap { grid-template-columns: 1fr; }
    #main .gi .mo-scale__side { flex-direction: row; justify-content: center; gap: 14px; padding: 0; }
    #main .gi .mo-scale__side::before { content: "←"; }
    #main .gi .mo-scale__res { font-size: 16.5px; }
}

/* ───── 2026-10-21 눈금(graph): 확신 · 세기 · 공손함을 한 줄 위에 차례로 놓는다 (hardly < not < never 처럼) ───── */
#main .gi .mo-gauge { margin: 14px 0 20px; padding: 14px 16px 12px; border: 1px solid var(--ps-line, #dfe5ee); border-radius: 14px; background: #fff; }
#main .gi .mo-gauge__title { display: block; margin-bottom: 4px; font-size: 14.5px; font-weight: 800; color: #0f2a4a; }
#main .gi .mo-gauge__ends { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px; font-weight: 800; color: var(--ps-ink-3, #64748b); }
#main .gi .mo-gauge__track { position: relative; height: 150px; margin: 0 70px; }
#main .gi .mo-gauge__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: linear-gradient(90deg, #9cc7ee, #e5e7eb 50%, #86d3a2); }
#main .gi .mo-gauge--one .mo-gauge__track::before { background: linear-gradient(90deg, #e5e7eb, #86d3a2); }
#main .gi .mo-gauge__pt { position: absolute; left: calc(var(--x) * 1%); top: 50%; width: 0; }
#main .gi .mo-gauge__pt::before { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #1f7a4d; border: 3px solid #fff; box-shadow: 0 0 0 1px #1f7a4d; }
#main .gi .mo-gauge__pt.is-no::before { background: #3b82c4; box-shadow: 0 0 0 1px #3b82c4; }
#main .gi .mo-gauge__pt.is-mid::before { background: #8a94a6; box-shadow: 0 0 0 1px #8a94a6; }
#main .gi .mo-gauge__pt > b, #main .gi .mo-gauge__pt > span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; line-height: 1.25; }
#main .gi .mo-gauge__pt > b { font-size: 14.5px; color: #0f2a4a; }
#main .gi .mo-gauge__pt > span { font-size: 12.5px; color: var(--ps-ink-2); }
#main .gi .mo-gauge__pt:nth-child(odd) > b { bottom: 14px; }
#main .gi .mo-gauge__pt:nth-child(odd) > span { bottom: 33px; }
#main .gi .mo-gauge__pt:nth-child(even) > b { top: 14px; }
#main .gi .mo-gauge__pt:nth-child(even) > span { top: 33px; }
#main .gi .mo-gauge--short .mo-gauge__track { height: 110px; }
#main .gi .mo-gauge__note { margin: 4px 0 0; font-size: 14px; color: var(--ps-ink-2); }
@media (max-width: 700px) {
    #main .gi .mo-gauge__track { height: auto; margin: 0; display: flex; flex-direction: column-reverse; gap: 6px; }
    #main .gi .mo-gauge--short .mo-gauge__track { height: auto; }
    #main .gi .mo-gauge__track::before { display: none; }
    #main .gi .mo-gauge__pt { position: static; width: auto; display: grid; grid-template-columns: 14px 1fr; gap: 2px 10px; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: #f8fafc; }
    #main .gi .mo-gauge__pt::before { position: static; display: inline-block; grid-row: 1 / span 2; align-self: center; }
    #main .gi .mo-gauge__pt > b, #main .gi .mo-gauge__pt > span { position: static; transform: none; white-space: normal; text-align: left; }
    #main .gi .mo-gauge__pt > span { grid-column: 2; }
    #main .gi .mo-gauge__ends { flex-direction: column-reverse; gap: 2px; }
}