/*
 * 수능 · 모의평가 문제 화면의 공부 도구 (2026-11-11, patch515). 부르는 곳: sat/template/main_each.jsp(한 문제씩) · sat_main_core.jsp(전체 풀이)의 <div class="ps-qtools">.
 * 선생님 11-11: "확인 뒤의 버튼들은 아래로 · 보기에 좋게 · 한 줄로 · 요즘 스타일로" → "다 안 보여" → "AI Feedback 과 내 문장 사다리를 가장 먼저 — 가장 중요하니까"
 *              → "AI Feedback 만 모양이 특이해 — 방법을 정리해서 일관성 있게".
 * 모양 규칙(앱 한 문제 화면 app/satq.tsx 와 같음):
 *   모든 도구 = 모서리 14px 둥근 네모 · 연한 바탕 · 테두리 없음 · 그림 + 이름.
 *   가장 중요한 둘(AI Feedback · 내 문장 사다리) = 같은 모양 · 초록 바탕 큰 단추, 맨 앞에 반씩.
 *   나머지(출처 · 해설 · 번역 · 퀴즈 · 음성 · 영상) = 같은 모양 · 회색 바탕 칸, 넷씩(휴대폰) — 모두 한눈에.
 *   넓은 화면(760px 이상) = 모두 한 줄. 진한 단추는 [확인] 하나(도구가 아니라 답을 내는 행동).
 * 근거: 일관성(Nielsen 휴리스틱 4) · 유사성 · 근접(게슈탈트 — Palmer 1992), 옆으로 밀기는 놓치기 쉬움(NN/g 가로 스크롤 연구) · 알아보기(Nielsen 6),
 *       가장 중요한 것을 첫 자리에(계열 위치 효과 — Murdock 1962), 그림 + 이름(Wiedenbeck 1999), 누름 칸 높이 48px 이상(WCAG 2.5.5 · Fitts 1954).
 */
#main .ps-qtools {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    margin: 14px 0 8px; padding: 0; overflow: visible;
}
#main .ps-qtools > button,
#main .ps-qtools > button.w3-btn,
#main .ps-qtools > button.sk-fbbtn {
    width: 100%; height: auto; min-height: 58px; min-width: 0; margin: 0 !important; padding: 5px 4px !important;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 2px solid transparent !important; border-radius: 14px !important;
    background: #f6f8f7 !important; color: #3b4658 !important; box-shadow: none !important; filter: none;
    font-size: 13.5px !important; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
    /* 칸이 좁으면 이름을 자르지 않고 칸 안에서 줄을 바꾼다(낱말 단위 — WCAG 1.4.10 · 1.4.12 글이 잘리지 않게) */
    white-space: normal; word-break: keep-all; overflow-wrap: anywhere; text-align: center;
    transition: background-color .15s, transform .15s; cursor: pointer;
}
#main .ps-qtools > button:hover { background: #eef1f0 !important; }
#main .ps-qtools > button:active { transform: scale(.97); }
#main .ps-qtools > button:focus-visible { outline: 3px solid rgba(14, 138, 67, .45); outline-offset: 2px; }
/* 가장 중요한 둘: 같은 모양 · 같은 초록 바탕 · 가로 두 칸씩 */
#main .ps-qtools > button.sk-fbbtn,
#main .ps-qtools > button.ps-qt-ladder {
    grid-column: span 2; min-height: 52px; flex-direction: row; gap: 8px;
    background: #e4f3ea !important; color: #0b7d3c !important; font-size: 15px !important; font-weight: 800;
}
#main .ps-qtools > button.sk-fbbtn:hover,
#main .ps-qtools > button.ps-qt-ladder:hover { background: #d5ecdf !important; }
/* 그림(Font Awesome 4 — 이 화면이 이미 부르는 글꼴) */
#main .ps-qtools > button::before { font-family: FontAwesome; font-size: 17px; line-height: 1; font-weight: normal; }
#main .ps-qtools > button.sk-fbbtn::before { content: "\f0d0"; }          /* magic */
#main .ps-qtools > button.ps-qt-ladder::before { content: "\f201"; }      /* line-chart */
#main .ps-qtools > button[id^="ref"]::before { content: "\f02d"; }        /* book */
#main .ps-qtools > button[id^="expl_txt"]::before { content: "\f0eb"; }   /* lightbulb-o */
#main .ps-qtools > button#translatebtn::before,
#main .ps-qtools > button[id^="trsbtn"]::before { content: "\f1ab"; }     /* language */
#main .ps-qtools > button[id^="tEnbtn"]::before { content: "\f0ae"; }     /* tasks */
#main .ps-qtools > button[id^="gttsbtn"]::before { content: "\f028"; }    /* volume-up */
/* 영상 해설 · 한 문장씩: 단추 안의 옛 꼬리표 모양을 지우고 그림 + 글만 */
#main .ps-qtools > button .w3-tag { background: none !important; border: 0 !important; padding: 0 !important; color: inherit !important; font-size: inherit; }
#main .ps-qtools > button .w3-tag strong { font-weight: 700; }
#main .ps-qtools > button .fa-youtube-play { font-size: 17px; color: #3b4658; }
/* 넓은 화면: 모두 한 줄. 단추는 줄어들지 않는다(글이 잘리지 않게) — 막대가 모자라면(예: 1280px 화면의 도구 7개) 남는 단추만 다음 줄로.
   폭 재기(11-11): 도구 막대 667px(1280) · 718px(1366 이상), 도구 7개 = 680px → 1366 이상은 7개도 한 줄. */
@media (min-width: 760px) {
    #main .ps-qtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
    #main .ps-qtools > button,
    #main .ps-qtools > button.w3-btn,
    #main .ps-qtools > button.sk-fbbtn { flex: 0 0 auto; width: auto; height: 46px; min-height: 0; flex-direction: row; gap: 6px; padding: 0 12px !important; font-size: 14.5px !important; white-space: nowrap; }
    #main .ps-qtools > button.sk-fbbtn,
    #main .ps-qtools > button.ps-qt-ladder { height: 46px; padding: 0 16px !important; }
}