/* 2026-10-17 to 부정사(단원 4): 기존 gi 화면을 유지하며 단원 4 전용 부품만 더한다. 모든 선택자는 #main .gi .gn-로 한정한다. */
#main .gi .gn-caption { padding: 0 0 10px; text-align: left; color: var(--ps-ink-2); font-size: 14px; font-weight: 600; }
#main .gi .gn-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 .gn-cell:focus-visible { outline: 3px solid var(--ps-brand, #2563eb); outline-offset: 4px; }
#main .gi .gn-rare { background: #fff8dc; }
#main .gi .gn-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; }

/* to []가 앉는 자리 표 (parts/infinitive_table.jsp) */
#main .gi .gn-slot { table-layout: fixed; width: 100%; }
#main .gi .gn-slot col.c-p { width: 22%; }
#main .gi .gn-slot col.c-s { width: 40%; }
#main .gi .gn-slot col.c-m { width: 20%; }
#main .gi .gn-slot col.c-o { width: 18%; }
#main .gi .gn-slot th { white-space: normal; }
#main .gi .gn-slot td.p { white-space: normal; }
#main .gi .gn-slot td.p small { display: block; margin-top: 3px; color: var(--ps-ink-3); font-size: 12.5px; font-weight: 500; }
#main .gi .gn-slot td.m, #main .gi .gn-slot td.o { white-space: normal; font-size: 14px; }
#main .gi .gn-slot td.en .s { display: block; font-weight: 700; line-height: 1.45; }
#main .gi .gn-slot td.en .s u { text-decoration: none; border-bottom: 3px solid var(--ps-brand, #2563eb); color: var(--ps-brand, #2563eb); }
#main .gi .gn-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(.gn-slot) { overflow-x: auto; }
    #main .gi .gn-slot { min-width: 640px; }
}

/* 짝과 to [] 를 색으로 보이는 문장 (장 본문): <p class="gn-chips"><span class="s">I</span> <span class="v">want</span> <span class="t">to leave</span> early.</p> */
#main .gi .gn-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 .gn-chips span { display: inline-block; margin: 0 2px; padding: 0 8px; border-radius: 6px; font-weight: 700; }
#main .gi .gn-chips .s { background: #e3f2ff; color: #0b4a8a; }
#main .gi .gn-chips .v { background: #ffe9d6; color: #8a3b00; }
#main .gi .gn-chips .t { background: #e6f6e9; color: #1b5e20; }
#main .gi .gn-chips .x { background: #ffe0e0; color: #9b1c1c; text-decoration: line-through; }
#main .gi .gn-chips small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ps-ink-3); font-weight: 500; }
#main .gi .gn-legend { margin: -6px 0 16px; font-size: 13px; color: var(--ps-ink-3); }
#main .gi .gn-legend i { display: inline-block; width: 12px; height: 12px; margin: 0 4px 0 10px; border-radius: 3px; vertical-align: -1px; }
#main .gi .gn-legend i.s { background: #e3f2ff; border: 1px solid #9cc7ee; }
#main .gi .gn-legend i.v { background: #ffe9d6; border: 1px solid #f0b98a; }
#main .gi .gn-legend i.t { background: #e6f6e9; border: 1px solid #9fd4a8; }

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