/* 2026-10-19 동명사(단원 8): 기존 gi 화면을 유지하며 단원 8 전용 부품만 더한다. 모든 선택자는 #main .gi .gg-로 한정한다. 분사 단원(ps2-participle.css)의 모양을 옮기고 새 부품(자리 시험기 · 시간 순서 막대 · 모양 다이얼)을 더했다. 설계 D:\PeshareGrammarGer\SPEC.md */
#main .gi .gg-caption { padding: 0 0 10px; text-align: left; color: var(--ps-ink-2); font-size: 14px; font-weight: 600; }
#main .gi .gg-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 .gg-cell:focus-visible { outline: 3px solid var(--ps-brand, #2563eb); outline-offset: 4px; }
#main .gi .gg-rare { background: #fff8dc; }
#main .gi .gg-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/participle_table.jsp) */
#main .gi .gg-slot { table-layout: fixed; width: 100%; }
#main .gi .gg-slot col.c-p { width: 22%; }
#main .gi .gg-slot col.c-s { width: 40%; }
#main .gi .gg-slot col.c-m { width: 20%; }
#main .gi .gg-slot col.c-o { width: 18%; }
#main .gi .gg-slot th { white-space: normal; }
#main .gi .gg-slot td.p { white-space: normal; }
#main .gi .gg-slot td.p small { display: block; margin-top: 3px; color: var(--ps-ink-3); font-size: 12.5px; font-weight: 500; }
#main .gi .gg-slot td.m, #main .gi .gg-slot td.o { white-space: normal; font-size: 14px; }
#main .gi .gg-slot td.en .s { display: block; font-weight: 700; line-height: 1.45; }
#main .gi .gg-slot td.en .s u { text-decoration: none; border-bottom: 3px solid var(--ps-brand, #2563eb); color: var(--ps-brand, #2563eb); }
#main .gi .gg-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(.gg-slot) { overflow-x: auto; }
    #main .gi .gg-slot { min-width: 640px; }
}


/* 명사 · 관계사절 · 짝을 색으로 보이는 문장 (장 본문): <p class="gl-chips"><span class="n">the boy</span> <span class="c">who is standing there</span> <span class="v">is</span> my cousin.</p> */
#main .gi .gg-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 .gg-chips span { display: inline-block; margin: 0 2px; padding: 0 8px; border-radius: 6px; font-weight: 700; }
#main .gi .gg-chips .s { background: #e3f2ff; color: #0b4a8a; }
#main .gi .gg-chips .v { background: #ffe9d6; color: #8a3b00; }
#main .gi .gg-chips .t { background: #e6f6e9; color: #1b5e20; }
#main .gi .gg-chips .n { background: #e3f2ff; color: #0b4a8a; }
#main .gi .gg-chips .c { background: #e6f6e9; color: #1b5e20; }
#main .gi .gg-chips .g { background: #fff3c4; color: #7a5200; }
#main .gi .gg-chips .x { background: #ffe0e0; color: #9b1c1c; text-decoration: line-through; }
#main .gi .gg-chips small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ps-ink-3); font-weight: 500; }
#main .gi .gg-legend { margin: -6px 0 16px; font-size: 13px; color: var(--ps-ink-3); }
#main .gi .gg-legend i { display: inline-block; width: 12px; height: 12px; margin: 0 4px 0 10px; border-radius: 3px; vertical-align: -1px; }
#main .gi .gg-legend i.s { background: #e3f2ff; border: 1px solid #9cc7ee; }
#main .gi .gg-legend i.v { background: #ffe9d6; border: 1px solid #f0b98a; }
#main .gi .gg-legend i.t { background: #e6f6e9; border: 1px solid #9fd4a8; }
#main .gi .gg-legend i.n { background: #e3f2ff; border: 1px solid #9cc7ee; }
#main .gi .gg-legend i.c { background: #e6f6e9; border: 1px solid #9fd4a8; }
#main .gi .gg-legend i.g { background: #fff3c4; border: 1px solid #e5c76b; }

/* 두 모양을 나란히 견주는 표의 작은 설명 */
#main .gi .gi-table td small.gg-note { display: block; margin-top: 3px; color: var(--ps-ink-3); font-size: 12.5px; line-height: 1.45; }
@media (max-width: 640px) {
    #main .gi .gg-chips { font-size: 15px; }
}

/* 동명사 렌즈 (js/ps2-gerund.js, .gg-lens[data-gg-lens]) */
#main .gi .gg-lens { margin: 14px 0 20px; padding: 14px 16px 12px; border: 1.5px solid var(--ps-line, #dfe5ee); border-radius: 16px; background: linear-gradient(180deg, #fbfcff, #f4f7fc); }
#main .gi .gg-lens__head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 8px; }
#main .gi .gg-lens__head b { font-size: 15px; }
#main .gi .gg-lens__head span { font-size: 13.5px; color: var(--ps-ink-3, #64748b); }
#main .gi .gg-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 .gg-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 .gg-lens__line .w:hover, #main .gi .gg-lens__line .w:focus-visible { background: #eef2f8; outline: none; }
#main .gi .gg-lens__line .w.is-miss { color: #b91c1c; text-decoration: line-through; text-decoration-thickness: 2px; }
#main .gi .gg-lens__line .w.is-part { background: #e6f6e9; color: #14532d; border-bottom-color: #16a34a; }
#main .gi .gg-lens__line .w.is-head { background: #e3f2ff; color: #0b4a8a; border-bottom-color: #0b4a8a; }
#main .gi .gg-lens__line .w.is-verb { background: #ffedd5; color: #8a3b00; border-color: #ea8a3c; transform: translateY(-2px); }
#main .gi .gg-lens__ko { margin: 0 0 6px; color: var(--ps-ink-2); font-size: 14.5px; }
#main .gi .gg-lens__note { margin: 4px 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 14.5px; line-height: 1.65; }
#main .gi .gg-lens__note.is-ok { background: #f0fdf4; color: #14532d; }
#main .gi .gg-lens__note.is-no { background: #fef2f2; color: #7f1d1d; }
#main .gi .gg-lens__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#main .gi .gg-lens__acts .gi-btn[aria-pressed="true"] { border-color: var(--ps-ink); background: #f1f5f9; }
#main .gi .gg-lens__role { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 800; }
#main .gi .gg-lens__role.is-do { background: #dcfce7; color: #14532d; }
#main .gi .gg-lens__role.is-get { background: #e0e7ff; color: #312e81; }
#main .gi .gg-lens__role.is-done { background: #fef3c7; color: #78350f; }
#main .gi .gg-lens__role.is-feel { background: #fce7f3; color: #831843; }
#main .gi .gg-lens__legend, #main .gi .gg-switch__legend { margin: 10px 0 0; font-size: 12.5px; color: var(--ps-ink-3); }
#main .gi .gg-lens__legend i, #main .gi .gg-switch__legend i { display: inline-block; width: 12px; height: 12px; margin: 0 4px 0 10px; border-radius: 3px; vertical-align: -1px; }
#main .gi .gg-lens__legend i:first-child, #main .gi .gg-switch__legend i:first-child { margin-left: 0; }
#main .gi .gg-lens__legend i.p, #main .gi .gg-switch__legend i.p { background: #e6f6e9; border: 1px solid #16a34a; }
#main .gi .gg-lens__legend i.h { background: #e3f2ff; border: 1px solid #0b4a8a; }
#main .gi .gg-lens__legend i.v { background: #ffedd5; border: 1px solid #ea8a3c; }

/* 하는 쪽 · 받는 쪽 문장 만들기 (.gg-role[data-gg-role]) */
#main .gi .gg-role { margin: 14px 0 20px; padding: 14px 16px; border: 1.5px solid var(--ps-line, #dfe5ee); border-radius: 16px; background: #f8fafc; }
#main .gi .gg-role__head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 8px; }
#main .gi .gg-role__head b { font-size: 15px; }
#main .gi .gg-role__head span { font-size: 13px; color: var(--ps-ink-3); }
#main .gi .gg-role__ko { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
#main .gi .gg-role__pick { display: grid; gap: 8px; }
#main .gi .gg-role__opt { display: block; width: 100%; padding: 10px 14px; border: 1.5px solid var(--ps-line-strong); border-radius: 12px; background: #fff; color: var(--ps-ink); font: inherit; font-size: 17px; font-weight: 600; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
#main .gi .gg-role__opt:hover { border-color: var(--ps-ink); }
#main .gi .gg-role__opt.is-ok { border-color: #16a34a; background: #f0fdf4; }
#main .gi .gg-role__opt.is-no { border-color: #dc2626; background: #fef2f2; text-decoration: line-through; }
#main .gi .gg-role__out { margin-top: 10px; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.65; }
#main .gi .gg-role__out.is-no { background: #fef2f2; color: #7f1d1d; }
#main .gi .gg-role__out.is-ok { background: #fff; border: 1px solid var(--ps-line); }
#main .gi .gg-role__res { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #0f2a4a; }
#main .gi .gg-role__res u { text-decoration: none; padding: 0 4px; border-radius: 6px; background: #e6f6e9; color: #14532d; }
#main .gi .gg-role__res u.pp { background: #e0e7ff; color: #312e81; }
#main .gi .gg-role__why { margin: 0 0 10px; color: var(--ps-ink-2); }
#main .gi .gg-role__end { margin: 10px 0 0; font-weight: 700; }

/* 줄이기 · 풀기 스위치 (.gg-switch[data-gg-switch]) */
#main .gi .gg-switch { margin: 14px 0 20px; padding: 14px 16px 12px; border: 1.5px solid var(--ps-line, #dfe5ee); border-radius: 16px; background: #fbfcfe; }
#main .gi .gg-switch__head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 6px; }
#main .gi .gg-switch__head b { font-size: 15px; }
#main .gi .gg-switch__head span { font-size: 13px; color: var(--ps-ink-3); }
#main .gi .gg-switch__line { text-align: left; margin: 6px 0 10px; font-size: 19px; line-height: 1.9; font-weight: 600; color: #0f2a4a; transition: transform .2s; }
#main .gi .gg-switch__line .sg { transition: opacity .35s, max-width .45s, background .3s, color .3s; }
#main .gi .gg-switch__line .sg.is-x { background: #f1f5f9; color: #64748b; border-radius: 6px; }
#main .gi .gg-switch__line .sg.is-p { background: #e6f6e9; color: #14532d; border-radius: 6px; padding: 0 2px; }
#main .gi .gg-switch__line .sg.is-r { display: none; background: #fef3c7; color: #78350f; border-radius: 6px; padding: 0 2px; }
#main .gi .gg-switch.is-reduced .gg-switch__line .sg.is-x { display: none; }
#main .gi .gg-switch.is-reduced .gg-switch__line .sg.is-r { display: inline; }
#main .gi .gg-switch__line.is-refuse { animation: gpShake .5s; }
@keyframes gpShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
#main .gi .gg-switch__note { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 14.5px; line-height: 1.6; }
#main .gi .gg-switch__note.is-ok { background: #f0fdf4; color: #14532d; }
#main .gi .gg-switch__note.is-no { background: #fef2f2; color: #7f1d1d; }
#main .gi .gg-switch__acts { display: flex; gap: 8px; }
#main .gi .gg-switch__legend i.x { background: #f1f5f9; border: 1px solid #94a3b8; }
#main .gi .gg-switch__legend i.r { background: #fef3c7; border: 1px solid #d97706; }

@media (max-width: 640px) {
    #main .gi .gg-lens__line, #main .gi .gg-switch__line { font-size: 17px; }
    #main .gi .gg-role__opt { font-size: 15.5px; }
}

/* 동명사 렌즈: 덩어리 · ~ing를 고른 말 · 자리 */
#main .gi .gg-lens__line .w.is-ger { background: #e6f6e9; color: #14532d; border-bottom-color: #16a34a; }
#main .gi .gg-lens__line .w.is-lead { background: #ede9fe; color: #4c1d95; border-bottom-color: #7c3aed; }
#main .gi .gg-lens__slot { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: #dcfce7; color: #14532d; font-size: 13px; font-weight: 800; }
#main .gi .gg-lens__legend i.g { background: #e6f6e9; border: 1px solid #16a34a; }
#main .gi .gg-lens__legend i.h { background: #e3f2ff; border: 1px solid #0b4a8a; }
#main .gi .gg-lens__legend i.l { background: #ede9fe; border: 1px solid #7c3aed; }
/* 자리 시험기 (.gg-probe) */
#main .gi .gg-probe, #main .gi .gg-time, #main .gi .gg-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 .gg-probe__head, #main .gi .gg-time__head, #main .gi .gg-dial__head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 8px; }
#main .gi .gg-probe__head b, #main .gi .gg-time__head b, #main .gi .gg-dial__head b { font-size: 15px; }
#main .gi .gg-probe__head span, #main .gi .gg-time__head span, #main .gi .gg-dial__head span { font-size: 13.5px; color: var(--ps-ink-3, #64748b); }
#main .gi .gg-probe__s { margin: 4px 0 10px; font-size: 19px; line-height: 1.7; font-weight: 600; color: #0f2a4a; }
#main .gi .gg-probe__s u { text-decoration: none; padding: 0 3px; border-radius: 6px; background: #fff7d6; box-shadow: inset 0 -3px 0 #f2b705; }
#main .gi .gg-probe__tests { display: grid; gap: 6px; margin: 0 0 12px; }
#main .gi .gg-probe__test { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#main .gi .gg-probe__res { padding: 4px 10px; border-radius: 8px; background: #fff; border: 1px dashed var(--ps-line-strong, #cbd5e1); font-size: 15px; }
#main .gi .gg-probe__pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#main .gi .gg-probe__opt, #main .gi .gg-time__card { 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 .gg-probe__opt:hover, #main .gi .gg-time__card:hover { border-color: var(--ps-ink, #0f172a); }
#main .gi .gg-probe__opt.is-ok, #main .gi .gg-time__card.is-ok { border-color: #16a34a; background: #f0fdf4; }
#main .gi .gg-probe__opt.is-no { border-color: #dc2626; background: #fef2f2; text-decoration: line-through; }
#main .gi .gg-probe__out, #main .gi .gg-time__out { margin-top: 10px; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.65; }
#main .gi .gg-probe__out.is-no, #main .gi .gg-time__out.is-no { background: #fef2f2; color: #7f1d1d; }
#main .gi .gg-probe__out.is-ok, #main .gi .gg-time__out.is-ok { background: #fff; border: 1px solid var(--ps-line, #dfe5ee); }
#main .gi .gg-probe__why, #main .gi .gg-time__why { margin: 0 0 8px; }
#main .gi .gg-probe__end, #main .gi .gg-time__end { margin: 10px 0 0; color: var(--ps-ink-2, #334155); font-weight: 600; }
/* 시간 순서 막대 (.gg-time) */
#main .gi .gg-time__ko { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
#main .gi .gg-time__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#main .gi .gg-time__card.is-no { border-color: #dc2626; background: #fef2f2; animation: gg-shake .5s; }
#main .gi .gg-time__bar { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: linear-gradient(90deg, #eef6ff, #fff7ed); }
#main .gi .gg-time__dot { padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 800; }
#main .gi .gg-time__dot.is-first { background: #dbeafe; color: #1e3a8a; }
#main .gi .gg-time__dot.is-later { background: #ffedd5; color: #7c2d12; }
#main .gi .gg-time__arrow { flex: 1; min-width: 24px; text-align: center; color: #64748b; font-weight: 800; letter-spacing: 2px; }
#main .gi .gg-time__res { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #0f2a4a; }
#main .gi .gg-time__res u, #main .gi .gg-dial__line u { text-decoration: none; padding: 0 3px; border-radius: 6px; background: #e6f6e9; box-shadow: inset 0 -3px 0 #16a34a; }
#main .gi .gg-time__tag { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; }
#main .gi .gg-time__tag.is-ing { background: #dbeafe; color: #1e3a8a; }
#main .gi .gg-time__tag.is-to { background: #ffedd5; color: #7c2d12; }
/* 모양 다이얼 (.gg-dial) */
#main .gi .gg-dial__sw { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
#main .gi .gg-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 .gg-dial__btn.is-on { border-color: #16a34a; background: #16a34a; color: #fff; box-shadow: 0 4px 12px rgba(22, 163, 74, .25); }
#main .gi .gg-dial__line { margin: 4px 0 6px; font-size: 19px; line-height: 1.7; font-weight: 600; color: #0f2a4a; transition: opacity .2s; }
#main .gi .gg-dial.is-none .gg-dial__line { color: #94a3b8; font-size: 15px; font-weight: 600; }
#main .gi .gg-dial__ko { margin: 0 0 6px; color: var(--ps-ink-2, #334155); font-size: 15px; }
#main .gi .gg-dial__note { margin: 8px 0 0; font-size: 13.5px; color: var(--ps-ink-3, #64748b); }
@keyframes gg-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { #main .gi .gg-time__card.is-no { animation: none; } }
@media (max-width: 600px) {
    #main .gi .gg-probe__pick { grid-template-columns: 1fr; }
    #main .gi .gg-probe__s, #main .gi .gg-dial__line { font-size: 17px; }
    #main .gi .gg-time__res { font-size: 16.5px; }
}