/* 2026-10-19 분사(단원 7): 기존 gi 화면을 유지하며 단원 7 전용 부품만 더한다. 모든 선택자는 #main .gi .gp-로 한정한다. 설계 D:\PeshareGrammarPart\SPEC.md */
#main .gi .gp-caption { padding: 0 0 10px; text-align: left; color: var(--ps-ink-2); font-size: 14px; font-weight: 600; }
#main .gi .gp-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 .gp-cell:focus-visible { outline: 3px solid var(--ps-brand, #2563eb); outline-offset: 4px; }
#main .gi .gp-rare { background: #fff8dc; }
#main .gi .gp-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 .gp-slot { table-layout: fixed; width: 100%; }
#main .gi .gp-slot col.c-p { width: 22%; }
#main .gi .gp-slot col.c-s { width: 40%; }
#main .gi .gp-slot col.c-m { width: 20%; }
#main .gi .gp-slot col.c-o { width: 18%; }
#main .gi .gp-slot th { white-space: normal; }
#main .gi .gp-slot td.p { white-space: normal; }
#main .gi .gp-slot td.p small { display: block; margin-top: 3px; color: var(--ps-ink-3); font-size: 12.5px; font-weight: 500; }
#main .gi .gp-slot td.m, #main .gi .gp-slot td.o { white-space: normal; font-size: 14px; }
#main .gi .gp-slot td.en .s { display: block; font-weight: 700; line-height: 1.45; }
#main .gi .gp-slot td.en .s u { text-decoration: none; border-bottom: 3px solid var(--ps-brand, #2563eb); color: var(--ps-brand, #2563eb); }
#main .gi .gp-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(.gp-slot) { overflow-x: auto; }
    #main .gi .gp-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 .gp-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 .gp-chips span { display: inline-block; margin: 0 2px; padding: 0 8px; border-radius: 6px; font-weight: 700; }
#main .gi .gp-chips .s { background: #e3f2ff; color: #0b4a8a; }
#main .gi .gp-chips .v { background: #ffe9d6; color: #8a3b00; }
#main .gi .gp-chips .t { background: #e6f6e9; color: #1b5e20; }
#main .gi .gp-chips .n { background: #e3f2ff; color: #0b4a8a; }
#main .gi .gp-chips .c { background: #e6f6e9; color: #1b5e20; }
#main .gi .gp-chips .g { background: #fff3c4; color: #7a5200; }
#main .gi .gp-chips .x { background: #ffe0e0; color: #9b1c1c; text-decoration: line-through; }
#main .gi .gp-chips small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ps-ink-3); font-weight: 500; }
#main .gi .gp-legend { margin: -6px 0 16px; font-size: 13px; color: var(--ps-ink-3); }
#main .gi .gp-legend i { display: inline-block; width: 12px; height: 12px; margin: 0 4px 0 10px; border-radius: 3px; vertical-align: -1px; }
#main .gi .gp-legend i.s { background: #e3f2ff; border: 1px solid #9cc7ee; }
#main .gi .gp-legend i.v { background: #ffe9d6; border: 1px solid #f0b98a; }
#main .gi .gp-legend i.t { background: #e6f6e9; border: 1px solid #9fd4a8; }
#main .gi .gp-legend i.n { background: #e3f2ff; border: 1px solid #9cc7ee; }
#main .gi .gp-legend i.c { background: #e6f6e9; border: 1px solid #9fd4a8; }
#main .gi .gp-legend i.g { background: #fff3c4; border: 1px solid #e5c76b; }

/* 두 모양을 나란히 견주는 표의 작은 설명 */
#main .gi .gi-table td small.gp-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 .gp-chips { font-size: 15px; }
}

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

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

/* 줄이기 · 풀기 스위치 (.gp-switch[data-gp-switch]) */
#main .gi .gp-switch { margin: 14px 0 20px; padding: 14px 16px 12px; border: 1.5px solid var(--ps-line, #dfe5ee); border-radius: 16px; background: #fbfcfe; }
#main .gi .gp-switch__head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 6px; }
#main .gi .gp-switch__head b { font-size: 15px; }
#main .gi .gp-switch__head span { font-size: 13px; color: var(--ps-ink-3); }
#main .gi .gp-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 .gp-switch__line .sg { transition: opacity .35s, max-width .45s, background .3s, color .3s; }
#main .gi .gp-switch__line .sg.is-x { background: #f1f5f9; color: #64748b; border-radius: 6px; }
#main .gi .gp-switch__line .sg.is-p { background: #e6f6e9; color: #14532d; border-radius: 6px; padding: 0 2px; }
#main .gi .gp-switch__line .sg.is-r { display: none; background: #fef3c7; color: #78350f; border-radius: 6px; padding: 0 2px; }
#main .gi .gp-switch.is-reduced .gp-switch__line .sg.is-x { display: none; }
#main .gi .gp-switch.is-reduced .gp-switch__line .sg.is-r { display: inline; }
#main .gi .gp-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 .gp-switch__note { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 14.5px; line-height: 1.6; }
#main .gi .gp-switch__note.is-ok { background: #f0fdf4; color: #14532d; }
#main .gi .gp-switch__note.is-no { background: #fef2f2; color: #7f1d1d; }
#main .gi .gp-switch__acts { display: flex; gap: 8px; }
#main .gi .gp-switch__legend i.x { background: #f1f5f9; border: 1px solid #94a3b8; }
#main .gi .gp-switch__legend i.r { background: #fef3c7; border: 1px solid #d97706; }

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