/* design-polish.css — 2026-10-01
   전 페이지 공통 다듬기 층. 위키 디자인 스킬(Apple design, Emil design-eng,
   Vercel web-interface-guidelines, Taste redesign, Fold7 학생메뉴 기록)의
   규칙 중 페이지마다 따로 빠져 있던 것만 모아 마지막에 덮는다.
   선택자는 대부분 :where()로 감싸 특이도 0 — 각 페이지가 직접 정한 값이 이긴다. */

:root {
  --dp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* Emil: 진입·반응 */
  --dp-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* 화면 안 이동 */
  --dp-press-ms: 140ms;
  --dp-header-offset: 96px;
  --dp-shadow-sm: 0 1px 2px rgba(74, 59, 42, 0.07), 0 2px 8px -2px rgba(74, 59, 42, 0.08);
  --dp-shadow-md: 0 1px 2px rgba(74, 59, 42, 0.06), 0 12px 28px -12px rgba(74, 59, 42, 0.22);
}

/* 1. 터치: 더블탭 확대 지연 제거, 탭 하이라이트는 학원 금색으로 은은하게 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(139, 105, 20, 0.14);
}
:where(a, button, summary, label, select, input[type="checkbox"], input[type="radio"],
       input[type="submit"], input[type="button"], [role="button"], [role="tab"]) {
  touch-action: manipulation;
}

/* 2. 고정 머리말에 앵커 제목이 가려지지 않게 */
:where([id]) { scroll-margin-top: var(--dp-header-offset); }
@media (max-width: 1099px) { :root { --dp-header-offset: 78px; } }

/* 3. 글자: 제목 줄바꿈 균형, 본문 외톨이 글자 방지, 큰 제목 자간 살짝 조임, 숫자 정렬 */
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li, dd, figcaption, blockquote) { text-wrap: pretty; }
:where(h1) { letter-spacing: -0.02em; }
:where(h2) { letter-spacing: -0.01em; }
:where(time, td, .count, [class*="-count"], [class*="-num"], [class*="number"], .price, [class*="-fee"]) {
  font-variant-numeric: tabular-nums;
}

/* 4. 누를 때 반응 (Apple·Emil: 누르는 즉시 0.97 축소).
   이미 :active 축소가 있는 버튼은 빼고, 반응이 전혀 없던 것만 골랐다.
   scale 속성이라 기존 transform(translate 등)을 지우지 않는다. */
.cover-cta:active, .cover-nav-cta:active, .cover-resume:active, .diagnosis-start:active,
.cover-method-link:active, .cover-motion-toggle:active, .cover-nav-toggle:active,
header.masthead .site-nav > a.nav-cta:active, div.top-bar .guide-nav > a.guide-nav-cta:active,
.nav-toggle:active, .intro-tabs a:active,
body.archive-page .archive-category-nav a:active,
.guide-picker button:not(:disabled):active,
.board-tabs .tab:active, .filter-chips .chip:active {
  scale: 0.97;
}

/* 5. 마우스가 없는 기기에서는 hover 들뜸(translate)이 눌린 채 남지 않게 */
@media (hover: none), (pointer: coarse) {
  .portal-shortcut-grid a:hover,
  .btn-writing-start:hover,
  .contact-btn:hover,
  .btn-next:hover,
  .about-steps a:hover,
  .filter-chip:hover,
  .homework-card:hover,
  .install-banner-btn:hover,
  .submission-attachment-add:hover,
  #landing .process-link:hover span,
  #landing .record-row:hover .record-arrow,
  #landing .guide-card:hover .guide-photo img,
  #landing .idx-rewrite-link:hover span {
    transform: none;
  }
}

/* 6. 키보드 초점: 어디서든 보이게 (마우스 클릭에는 표시 안 함) */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid #8B6914;
  outline-offset: 2px;
}

/* 7. 숨은 건너뛰기 링크의 그림자가 화면 위쪽에 번지지 않게 */
.skip-link:not(:focus):not(:focus-visible) { box-shadow: none !important; }

/* 7-1. hidden 속성은 언제나 숨김 — .status-panel{display:flex} 같은 규칙이
   hidden을 덮어 '로그인 확인 중'·관리자 링크가 계속 보이던 문제(recordings) */
[hidden]:not([hidden="until-found"]) { display: none !important; }

/* 8. 접근성 설정 존중 — 움직임 줄이기: 이동 대신 즉시 전환 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  :where(*, *::before, *::after) {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  *:active { scale: none !important; }
}

/* 9. 투명도 줄이기: 유리(blur) 머리말을 불투명 면으로 */
@media (prefers-reduced-transparency: reduce) {
  html body header.topbar,
  html body header.masthead,
  html body div.top-bar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: #FBF6EE !important;
  }
}

/* 10. 고대비 설정: 옅은 선을 한 단계 진하게 */
@media (prefers-contrast: more) {
  :where(hr) { border-color: #4A3B2A; }
  :where(a, button, input, select, textarea):focus-visible { outline-width: 3px; }
}

/* ---------------------------------------------------------------
   11. 구역별 다듬기 (2026-10-01, 아스트라·솔·루트 구역 검수 반영)
   --------------------------------------------------------------- */
/* 학원 안내 05 상담: 상자 위 여백 0이라 제목이 테두리에 붙던 문제 */
#academy-consultation > .chapter-consult.cta-band { padding: clamp(24px, 4vw, 40px) clamp(18px, 4vw, 36px) !important; }
/* 원고 질문 5가지 목록이 제목과 다른 선(가운데)에서 시작하던 문제 */
.director-questions { margin: 20px 0 0 !important; }
/* 02 수업: 세로로 쌓인 두 번째 카드에만 왼쪽 선이 남던 문제 */
#recommendation-fit .method-grid .story-card + .story-card { border-left: 0; border-top: 1px solid var(--line, #E8DCC8); }
/* '…됩니 / 다' 한 글자 줄바꿈 */
.inquiry-panel > strong { word-break: keep-all; text-wrap: balance; }
/* 강연과 수업 현장: 8+4 / 4+4 비대칭으로 오른쪽 아래가 비던 문제 → 2×2 */
@media (min-width: 761px) {
  #representative-photos .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; }
  #representative-photos .photo-card:nth-child(n) { grid-column: auto !important; margin-top: 0 !important; padding-top: 0 !important; }
  #representative-photos .photo-card:nth-child(n) img { aspect-ratio: 16 / 10 !important; }
}
/* 태블릿 원장 사진이 왼쪽에 혼자 떠 있던 문제 */
@media (min-width: 721px) and (max-width: 980px) { .director-v2 .director-portrait { margin-inline: auto; } }
/* 자료실 상담 버튼 세 개가 간격 없이 붙던 문제 */
.consult-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) { .consult-actions { display: grid; grid-template-columns: 1fr; } }

/* 홈 04 시스템: 태블릿 2열에서 마지막 '백일장'만 반쪽에 남던 문제 */
@media (min-width: 768px) and (max-width: 1024px) {
  #landing .system-grid li:last-child { grid-column: 1 / -1; border-right: 0 !important; }
}

/* 실기 가이드 선택 결과: 카드마다 '담기' 버튼 높이가 달랐던 문제 */
.picker-card { display: flex; flex-direction: column; }
.picker-card > .picker-card-actions { margin-top: auto; }
.picker-card dl { margin-bottom: 12px; }
/* 백일장 소개 링크만 기본 파란색이던 문제 */
.bkj-cal > p a { color: #6B4F0B; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bkj-cal > p a:hover, .bkj-cal > p a:focus-visible { color: #493707; }
.past-data-note { color: #6F604B; }

/* 문학상담 Q&A 태블릿 첫 화면: 제목 위가 비고 좌우가 엇갈리던 문제 */
@media (min-width: 701px) and (max-width: 900px) {
  .archive-hero .hero-folio { grid-template-columns: 1fr !important; gap: 20px !important; align-items: start !important; }
}

/* 먼저 읽을 글 목차: 휴대폰 터치 높이 22px → 44px */
@media (max-width: 760px) {
  .rf-toc li { margin: 0; }
  .rf-toc a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; border-bottom: 1px solid #F0E6D6; }
}

/* 기사 목록 카드: 금색 선+테두리+그림자 3중 장식 → 테두리 하나 */
.article-preview { box-shadow: none !important; border-left-width: 1px !important; }

/* 개인정보 두 번째 표: '맡기는 일' 칸이 73px로 좁던 문제 */
@media (max-width: 760px) {
  .policy table:nth-of-type(2) { table-layout: fixed; }
  .policy table:nth-of-type(2) th:nth-child(1), .policy table:nth-of-type(2) td:nth-child(1) { width: 25%; min-width: 0; }
  .policy table:nth-of-type(2) th:nth-child(2), .policy table:nth-of-type(2) td:nth-child(2) { width: 29%; }
  .policy table:nth-of-type(2) td { padding: 8px 6px; line-height: 1.65; overflow-wrap: break-word; }
}

/* ---------------------------------------------------------------
   12. 휴대폰 다듬기 (2026-10-01, 루트 측정 + 아스트라 360/390/414 검수)
   --------------------------------------------------------------- */
@media (max-width: 760px) {
  /* 터치 높이 44px로 통일(메뉴 버튼 42, 칩 40, 단독 링크 17~39) */
  html body .topbar .nav-toggle, html body .top-bar .nav-toggle,
  body.archive-page .archive-category-nav a, .category-toggle,
  .recordings-page .site-nav a, header .site-nav a { min-height: 44px !important; min-width: 44px; }
  .category-toggles { gap: 8px; }
  /* 바닥글 링크: 줄 높이는 그대로 두고 누르는 영역만 위아래로 넓힘(문장 속 링크 줄만 벌어지던 문제) */
  :is(.site-legal, .footer, .site-footer, .closing-legal, .closing-links) a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  /* 한 줄에 하나씩 쌓인 바닥글 링크(홈·가이드)는 음수 여백을 빼 위아래 링크의 누르는 영역이 겹치지 않게 함 */
  :is(.closing-legal, .site-footer) div > a { margin-block: 0; }
  :is(.research-card, .record-card, .archive-featured-records article) > a,
  .glance-contact a, .archive-reading-list a, #internal-blog > a,
  .archive-year-grid li > a, .award-list a, .source-link { display: inline-flex !important; align-items: center; min-height: 44px; }
  ol.archive-list > li > a { display: block; padding-block: 9px; }
  #main-content > nav > a { display: inline-flex; align-items: center; min-height: 44px; }

  /* 실기 가이드: 8~11px로 눌린 옛 비교 자료 글자 */
  .bl { width: 88px !important; font-size: 12px !important; line-height: 1.5; }
  .bv { width: 62px !important; font-size: 12px !important; }
  .bi { gap: 8px !important; min-height: 28px; }
  .note { font-size: 13px !important; line-height: 1.7; }
  .coverage-list li { font-size: 14px !important; padding: 0 !important; }
  .coverage-list a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; }
  .chart-caption, .legend, #guide-sources span { font-size: 12px !important; }
  .admission-master { min-width: 1040px !important; }
  .admission-master td { font-size: 13px !important; }
  .picker-card dt { font-size: 12px; }
  .picker-card dd { font-size: 14px; line-height: 1.65; }
  /* '내 목록' 떠 있는 버튼이 본문 오른쪽을 가리던 문제 → 바로 위 '내 목록' 접기와 같은 기능이라 숨김 */
  .guide-picker .picker-floating { display: none !important; }

  /* 홈 첫 화면 하단 작은 안내 */
  .cover-proof, .cover-note { font-size: 12px !important; line-height: 1.6; }
  .cover-note { color: rgba(253, 248, 240, .7) !important; }

  /* 학원 안내 활동 사진: 세로·가로 사진을 한 비율로 잘라 절반이 잘리던 문제 → 사진 본래 비율 */
  #representative-photos .photo-card:nth-child(n) img { aspect-ratio: auto !important; height: auto !important; object-fit: contain !important; }
}

/* ---------------------------------------------------------------
   §13 스킬 재점검(2026-10-01): Hallmark·Vercel·Emil 기준 남은 것
   --------------------------------------------------------------- */
/* 가이드 '가장 많이 찾는 4가지' 버튼: 9~11px 글자 → 12~13px */
.student-route-btn { font-size: 13px !important; }
.student-route-btn span { font-size: 12px !important; }
.student-route-label { font-size: 12px !important; }
/* 자료실 분류 개수·Q&A 출처/분류 표시: 11.5~11.8px → 12px */
.nav-count, .qna-source, .qna-category { font-size: 12px !important; }
/* 가이드 경쟁률 표 연도 칸(9~10px)·범위 안내 속 작은 글자 → 12px */
.cp .cy { font-size: 12px !important; padding: 3px 6px; }
.note span { font-size: inherit !important; }
.skip-link { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------------------------------------------------------------
   §14 홈 표지(2026-10-01): 제목 글꼴·영상 움직임
   --------------------------------------------------------------- */
/* 나눔명조 800은 획이 뭉툭해 무거워 보임 → 획이 가는 본명조(Noto Serif KR) 500. 제목 글자만 받아 옴(index.html) */
#landing .cover-title {
  font-family: 'Noto Serif KR', 'Nanum Myeongjo', 'Batang', Georgia, serif;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.16;
}
/* 표지 영상은 펜 끝만 움직여(화면 변화 약 1%) 멈춘 그림처럼 보임 → 천천히 다가가는 카메라 움직임.
   '움직임 멈춤'·기기의 동작 줄이기 설정에서는 멈춘다. */
@keyframes cover-drift {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.6%, -1.2%, 0); }
}
.cover-video.is-playing {
  transform-origin: 42% 46%;
  animation: cover-drift 16s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
.motion-off .cover-video { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cover-video.is-playing { animation: none !important; }
}
/* 터치 기기에서 hover 이동이 눌린 뒤 남지 않게(Emil: hover는 마우스에서만) */
@media (hover: none) {
  .about-steps a:hover { transform: none; }
  #landing .idx-rewrite-link:hover:not(:focus-visible) span { transform: none; }
}
@media (max-width: 760px) {
  /* 가이드 머리글 학원 이름 링크 39px → 44px */
  .top-bar .brand { display: inline-flex; align-items: center; min-height: 44px; }
  /* 숙제 로그인 '아이디 찾기·비밀번호 찾기'가 두 줄로 꺾이던 문제 */
  .login-recovery-actions .btn-prev { padding-inline: 10px; white-space: nowrap; }
}

/* ---------------------------------------------------------------
   §15 모바일 끝까지 재점검(2026-10-01): 아스트라·직접 측정 결과
   --------------------------------------------------------------- */
/* 색을 지정하지 않은 링크가 브라우저 기본 파란색으로 나오던 곳(가이드 출처 표·모집요강 링크 등).
   :where()라 다른 규칙이 하나라도 있으면 그쪽이 이긴다. */
:where(a:any-link) { color: #6B4F0B; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(a:any-link):hover { color: #493707; }

@media (max-width: 760px) {
  /* 홈 바닥글: 두 줄로 꺾이면 위아래 링크 터치 영역이 16px 겹치고, '소개'·'자료실'은 폭이 26·39px */
  html body #landing .closing-links { row-gap: 0; column-gap: 14px; }
  html body #landing .closing-links a {
    display: inline-flex; align-items: center; justify-content: flex-start;
    min-height: 44px; min-width: 44px; padding-block: 0; margin-block: 0;
  }
  /* 문장 속 링크는 줄 간격을 그대로 두고 위아래 누르는 영역만 넓힌다 */
  #landing .visit-line a,
  .detail-text-contact a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  /* 한 줄짜리 작은 링크들 17~23px → 44px */
  .rf-back a,
  .my-map-competition-link a,
  .article-meta a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .rf-back a { padding-inline: 8px; }
  .faq-index a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; }
  /* 가이드 출처 표 링크 39px */
  table td a { display: inline-flex; align-items: center; min-height: 44px; }
  /* 공통 메뉴(펼침)·가이드 메뉴·수업 녹화 학생 메뉴 42px → 44px */
  html body .topbar .nav a,
  .guide-nav a,
  html body .site-nav a { min-height: 44px; }
  /* 숙제 앱 설치 안내 11.5px → 12.5px */
  html body .install-banner-hint { font-size: 0.8rem; }
  /* 기사 상담 제목 끝 '요.'만 다음 줄에 남던 것 */
  .selection-cta strong { word-break: keep-all; text-wrap: balance; }
}

/* 상세 소개: 그림 속 전화·카카오톡 알약이 버튼처럼 보이는데 눌리지 않던 것 → 투명 링크를 그 위에 */
.detail-flow > .detail-hotspots { position: relative; }
.detail-hotspots picture, .detail-hotspots img { display: block; width: 100%; height: auto; }
.detail-hotspot { position: absolute; border-radius: 999px; -webkit-tap-highlight-color: rgba(240, 208, 140, .25); }
.detail-hotspot:focus-visible { outline: 3px solid #F0D08C; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .detail-hotspot:hover { background: rgba(255, 255, 255, .06); } }
/* 글씨가 작은 화면 캡처 이미지: 휴대폰에서 '눌러서 크게 보기' 표시 */
.detail-flow > .detail-zoom { position: relative; }
.detail-flow > .detail-zoom picture { display: block; }
@media (max-width: 640px) {
  .detail-flow > .detail-zoom::after {
    content: "눌러서 크게 보기"; position: absolute; right: 10px; bottom: 10px;
    padding: 6px 10px; border-radius: 999px; background: rgba(44, 36, 22, .78);
    color: #FDF8F0; font-size: 12px; font-weight: 700; line-height: 1.2; pointer-events: none;
  }
}

@media (max-width: 760px) {
  /* 학원 안내 첫 사진: 오른쪽 아래 장식선이 캡션 글자를 가림 → 휴대폰에서는 장식선 두 개 모두 뺀다 */
  .hero-figure::before, .hero-figure::after { display: none; }
  /* 개인정보 표: 320px에서 'Anthropic'이 'Anthropi / c'로 끊김 → 낱말 안에서는 끊지 않게 */
  .policy th, .policy td { overflow-wrap: break-word; word-break: keep-all; }
}
@media (max-width: 400px) {
  /* 개인정보 둘째 표 첫 칸 25%(320px에서 72px)로는 'Anthropic'이 안 들어감 → 32% */
  .policy table:nth-of-type(2) th:nth-child(1), .policy table:nth-of-type(2) td:nth-child(1) { width: 32%; }
  .policy table:nth-of-type(2) th:nth-child(2), .policy table:nth-of-type(2) td:nth-child(2) { width: 27%; }
  /* 상담 기록 페이지 번호: 320px에서 '152 다음'만 둘째 줄로 → 번호 한 줄, 이전·다음은 아랫줄 */
  .pagination { gap: 6px; }
  .pagination::after { content: ""; flex-basis: 100%; order: 1; height: 0; }
  .pagination > button:first-child, .pagination > button:last-child { order: 2; min-width: 96px; }
  .pagination button { padding-inline: 6px; }
}