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

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

/* 문장 해부 (js/ps2-relative.js): 평소에는 보통 글, 켜면 설명을 받는 명사 · 관계사절 · 관계사 · 빈자리 · 짝이 보인다 */
#main .gi .ga-x { cursor: pointer; border-radius: 6px; transition: background .15s; }
#main .gi .ga-x:hover, #main .gi .ga-x:focus-visible { background: #f3f6fb; outline: none; }
#main .gi .ga-x b.ga-n, #main .gi .ga-x i.ga-c, #main .gi .ga-x u.ga-g, #main .gi .ga-x .ga-v { font-weight: inherit; font-style: inherit; text-decoration: none; }
#main .gi .ga-x em.ga-0 { display: none; font-style: normal; }
#main .gi .ga-dissect .ga-x b.ga-n, #main .gi .ga-x.is-on b.ga-n { background: #e3f2ff; color: #0b4a8a; border-bottom: 3px solid #0b4a8a; border-radius: 3px 3px 0 0; }
#main .gi .ga-dissect .ga-x i.ga-c, #main .gi .ga-x.is-on i.ga-c { background: #edf8ef; border-radius: 4px; padding: 0 2px; }
#main .gi .ga-dissect .ga-x i.ga-c::before, #main .gi .ga-x.is-on i.ga-c::before { content: "["; color: #1b5e20; font-weight: 800; margin-right: 1px; }
#main .gi .ga-dissect .ga-x i.ga-c::after, #main .gi .ga-x.is-on i.ga-c::after { content: "]"; color: #1b5e20; font-weight: 800; margin-left: 1px; }
#main .gi .ga-dissect .ga-x u.ga-g, #main .gi .ga-x.is-on u.ga-g { background: #fff3c4; color: #7a5200; font-weight: 800; border-radius: 3px; padding: 0 3px; }
#main .gi .ga-dissect .ga-x em.ga-0, #main .gi .ga-x.is-on em.ga-0 { display: inline-block; min-width: 1em; margin: 0 1px; color: #c0392b; font-weight: 800; text-align: center; }
#main .gi .ga-dissect .ga-x em.ga-0::before, #main .gi .ga-x.is-on em.ga-0::before { content: "∅"; }
#main .gi .ga-dissect .ga-x .ga-v, #main .gi .ga-x.is-on .ga-v { border-bottom: 2px dotted #8a3b00; color: #8a3b00; font-weight: 700; }
#main .gi .ga-dissect-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 18px; padding: 10px 14px; border: 1px dashed var(--ps-line-strong); border-radius: 12px; background: #fbfcfe; font-size: 13px; color: var(--ps-ink-3); line-height: 1.6; }
#main .gi .ga-dissect-legend b { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 4px; font-size: 12px; font-weight: 700; }
#main .gi .ga-dissect-legend b.k-n { background: #e3f2ff; color: #0b4a8a; border-bottom: 2px solid #0b4a8a; }
#main .gi .ga-dissect-legend b.k-c { background: #edf8ef; color: #1b5e20; }
#main .gi .ga-dissect-legend b.k-g { background: #fff3c4; color: #7a5200; }
#main .gi .ga-dissect-legend b.k-0 { color: #c0392b; background: #fff0f0; }
#main .gi .ga-dissect-legend b.k-v { color: #8a3b00; border-bottom: 2px dotted #8a3b00; }

/* 관계사절 조립기 (js/ps2-relative.js, [data-gl-build]) */
#main .gi .ga-build { margin: 14px 0 20px; padding: 16px 18px; border: 1px solid var(--ps-line); border-radius: 16px; background: linear-gradient(180deg, #fbfcff, #f4f7fc); }
#main .gi .ga-build__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
#main .gi .ga-build__head b { font-size: 15px; }
#main .gi .ga-build__head span { color: var(--ps-ink-3); font-size: 13px; }
#main .gi .ga-build__stage { min-height: 84px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--ps-line); }
#main .gi .ga-build__line { margin: 4px 0; font-family: var(--ps-serif); font-size: 18px; line-height: 2; }
#main .gi .ga-build__line .w { display: inline-block; padding: 0 4px; border-radius: 6px; transition: background .25s, color .25s, transform .25s; }
#main .gi .ga-build__line .w.is-n { background: #e3f2ff; color: #0b4a8a; border-bottom: 3px solid #0b4a8a; }
#main .gi .ga-build__line .w.is-g { background: #fff3c4; color: #7a5200; font-weight: 800; transform: translateY(-2px); }
#main .gi .ga-build__line .w.is-0 { color: #c0392b; font-weight: 800; }
#main .gi .ga-build__clause { display: inline; background: #edf8ef; border-radius: 6px; padding: 0 2px; }
#main .gi .ga-build__clause .br { color: #1b5e20; font-weight: 800; }
#main .gi .ga-build__ko { margin: 2px 0 0; color: var(--ps-ink-2); font-size: 14px; }
#main .gi .ga-build__note { margin: 10px 0 8px; font-size: 14px; line-height: 1.7; color: var(--ps-ink-1, #121826); }
#main .gi .ga-build__acts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { #main .gi .ga-build__line { font-size: 16px; } }

/* 자리 옮기기 (js/ps2-adjective.js, .ga-move[data-ga-move]) 2026-10-18 */
#main .gi .ga-move { margin: 14px 0 18px; padding: 14px 16px 12px; border: 1.5px solid var(--ps-line, #dfe5ee); border-radius: 14px; background: #f8fafc; }
#main .gi .ga-move__head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 8px; }
#main .gi .ga-move__head b { font-size: 15px; }
#main .gi .ga-move__head span { font-size: 13px; color: var(--ps-ink-3, #64748b); }
#main .gi .ga-move__line { margin: 6px 0 8px; font-size: 20px; line-height: 1.9; font-weight: 600; color: #0f2a4a; }
#main .gi .ga-move__line .w { display: inline-block; padding: 1px 4px; border-radius: 6px; }
#main .gi .ga-move__line .w.is-adv { padding: 2px 8px; border: 2px solid; font-weight: 800; }
#main .gi .ga-move__line .w.is-adv.is-ok { border-color: #16a34a; background: #dcfce7; color: #14532d; }
#main .gi .ga-move__line .w.is-adv.is-mid { border-color: #d97706; background: #fef3c7; color: #78350f; }
#main .gi .ga-move__line .w.is-adv.is-no { border-color: #dc2626; background: #fee2e2; color: #7f1d1d; text-decoration: line-through; }
#main .gi .ga-move__note { margin: 4px 0 8px; padding: 8px 12px; border-radius: 10px; font-size: 14.5px; line-height: 1.6; }
#main .gi .ga-move__note.is-ok { background: #f0fdf4; color: #14532d; }
#main .gi .ga-move__note.is-mid { background: #fffbeb; color: #78350f; }
#main .gi .ga-move__note.is-no { background: #fef2f2; color: #7f1d1d; }
#main .gi .ga-move__slots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
#main .gi .ga-move__dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid; font-size: 12px; font-weight: 800; cursor: pointer; background: #fff; }
#main .gi .ga-move__dot.is-ok { border-color: #16a34a; color: #14532d; }
#main .gi .ga-move__dot.is-mid { border-color: #d97706; color: #78350f; }
#main .gi .ga-move__dot.is-no { border-color: #dc2626; color: #7f1d1d; }
#main .gi .ga-move__dot.is-here { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); }
#main .gi .ga-move__acts { display: flex; gap: 8px; }
#main .gi .ga-build__t { border-collapse: collapse; margin: 0 0 8px; font-size: 14px; }
#main .gi .ga-build__t th, #main .gi .ga-build__t td { border: 1px solid var(--ps-line, #dfe5ee); padding: 4px 10px; text-align: center; }
#main .gi .ga-build__t th { background: #eef2ff; font-weight: 700; }
@media (max-width: 640px) { #main .gi .ga-move__line { font-size: 17px; } }