/* 보관 콘텐츠 가독성 — owner: codex-astra-readability, 2026-10-02.
 * 정본: .agents/design/2026-10-02-readability-contract.md (R2~R7).
 * 선택자 근거: src/data/pages/{tengachaya,namba}-{ko,en,ja}-*.json의 html,
 * 해당 public/styles/<page>.css 및 public/original/*.css를 읽기 전용 대조.
 * 모바일만 글자 크기/터치 영역/정렬 변경. PC 글자 크기는 변경하지 않는다.
 * 브라우저 실행·포트 바인딩이 샌드박스에서 차단되어 전후 실측은 미완료.
 */

/* R3 · 문제 5: 소개의 인라인 line-height:1.2와 게시글 본문을 보완한다.
 * !important: 원본 p/span 인라인 줄간격 및 ID 기반 위젯 규칙보다 우선해야 한다.
 * 1.6은 KO/JA 기준과 EN의 최소 1.5를 함께 충족한다. 제목은 제외한다. */
.cocone-original .text-table p:not([style*="line-height: 2"]),
.cocone-original .text-table p:not([style*="line-height: 2"]) :is(span, strong, em),
.cocone-original .board_txt_area :is(p, li, td, span) {
  line-height: 1.6 !important;
}

/* R3 · 문제 5: 요약·날짜의 원본 1.2 줄간격을 보완한다.
 * !important: 원본 #위젯 .type_grid .card 계열의 높은 특이성을 이긴다. */
.cocone-original .list-style-card :is(.text-block, .card-summary .tools),
.cocone-original .board_summary {
  line-height: 1.6 !important;
}

/* R4 · 문제 2: 비활성 객실 탭 #aaa → #666 (흰 배경 5.74:1).
 * !important: 원본 #위젯 .nav li a의 색 지정. active/hover 브랜드 상태는 보존한다. */
.cocone-original .sub-menu li > a:not(.active):not(:hover) {
  color: #666 !important;
}

/* R4 · 문제 2: 흰 카드의 요약·메타 #898989 → #666 (5.74:1).
 * !important: 원본 #위젯 .type_grid.grid_03의 색 지정.
 * 사진 위 흰 글자를 쓰는 grid_01/04에는 적용하지 않는다. */
.cocone-original .type_grid.grid_03 :is(.text-block, .card-summary .tools small, .card-summary .writer),
.cocone-original .li_table .text-block,
.cocone-original .li_board .li_body > :is(.name, .time, .read, .like),
.cocone-original .board_summary :is(.write, .date, .board_name) {
  color: #666 !important;
}

/* R4 · 문제 2: 원본 #b66954 버튼 배경 유지, 무채색 글자만 #111로 조정.
 * #111/#b66954 = 4.62:1. hover의 원본 브랜드색 글자는 변경하지 않는다.
 * 브랜드 hover 글자(#b66954/흰색, 4.09:1)는 계약 조정 검토 대상으로 남긴다.
 * !important: 페이지별 #section .btn-primary의 흰 글자 지정에 우선한다. */
.cocone-original a.btn-primary:not(:hover) {
  color: #111 !important;
}

/* R4 · 문제 2: Notice 사진 배너의 기존 Reservation 버튼은 #b66954 배경에
 * 인라인 #626262 글자가 놓여 1.49:1. 글자만 같은 무채색 #111로 보완한다.
 * !important: 원본 span의 인라인 color를 이긴다. */
.cocone-original .text-table a.btn > span[style*="color: rgb(98, 98, 98)"] {
  color: #111 !important;
}

/* R7 · 문제 6: 실제 사진 배경이 있는 이야기·관광지·Q&A·Notice 배너만 보호.
 * 아래 ID는 2지점×3언어 보관 HTML에서 확인. 이미 어두운 푸터 사진은 제외.
 * 기존 section_bg_color를 사용하므로 새 레이어나 구조·높이 변경이 없다.
 * !important: 원본 ID별 배경색 규칙에 우선하는 0.28 불투명도 스크림. */
.cocone-original :is(
  #s20230926c441c79397796, #s20230926f478e2d2b3feb, #s2023092662f4884f6d27d, #s202309261b6be45576038,
  #s202311030dd1996edd8bd, #s2023110344e7161b4c9fd, #s202311038cfca7d7b00d0, #s20231103722a8a60238b7,
  #s20231108093e6d93420d7, #s202311083fbe8b5b721af, #s202311081b296a3362cdc, #s2023110883e1e0bbe1ac8,
  #s20241212f7666b4ae2029, #s202412125f916404598de, #s2024121289d09d2bb27d6, #s202412125657278db3ccb,
  #s20241218cde1fe868e7c6, #s2024121847e3e6d84b724, #s20241218731a1a6c0c213, #s202412185a767721534fb,
  #s2024121825d03e77921df, #s20241218160b2bb6e5e5a, #s202412189d71d1078e620, #s202412182a30dd880966f
) > .section_bg_color {
  background-color: rgb(0 0 0 / 28%) !important;
}

@media (max-width: 767px) {
  /* R2/R3 · 문제 3·5: 본문·게시글을 최소 15px로 읽을 수 있게 한다.
   * !important: 원본 ID 기반 모바일 본문 크기 및 인라인 작은 본문 크기.
   * max(15px,1em)은 부모의 더 큰 크기를 유지하며 큰 제목 span은 보존한다. */
  .cocone-original .text-table p:not([style*="line-height: 2"]),
  .cocone-original .board_txt_area :is(p, li, td),
  .cocone-original .li_board .list_text_title,
  .cocone-original .li_table .list_text_title,
  .cocone-original .li_table .title_link .text-block,
  .cocone-original .list-style-card .text-block {
    font-size: max(15px, 1em) !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere;
  }

  /* R2 · 문제 3: 실제 존재하는 본문 인라인 14px만 15px로 올린다.
   * !important: 보관 편집기의 인라인 font-size를 이기기 위해 필요하다.
   * 큰 제목·이미지·본문의 인라인 링크 구조는 유지한다. */
  .cocone-original :is(.text-table, .board_txt_area) [style*="font-size: 14px"] {
    font-size: 15px !important;
  }

  /* R2/R3 · 문제 3·5: 약관의 원본 1.9 줄간격은 유지하고 최소 15px 확보.
   * !important: 보관 약관의 font-size 지정에 우선한다. */
  .cocone-original .cocone-policy {
    font-size: max(15px, 1em) !important;
    line-height: 1.9;
    overflow-wrap: anywhere;
  }

  /* R2/R3 · 문제 3: 게시판 날짜 11~12px·작성자 메타를 13px로 보완한다.
   * !important: 원본 #위젯 small / .li_board ul.li_body li 규칙에 우선한다. */
  .cocone-original .card-summary .tools :is(small, .writer),
  .cocone-original .li_board .li_body > :is(.name, .time, .read, .like),
  .cocone-original .li_table :is(.time, .author),
  .cocone-original .board_summary :is(.write, .board_name, .date) {
    font-size: 13px !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere;
  }

  /* R2/R3 · 문제 3·5: 법정 푸터는 원본 12px 이상 크기를 유지하고 줄간격 확보.
   * !important: 원본 #doz_footer의 모바일 크기·줄간격 규칙에 우선한다. */
  .cocone-original #doz_footer .footer-company-info,
  .cocone-original #doz_footer .footer-company-info__item {
    font-size: max(12px, 1em) !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere;
  }

  /* R5 · 문제 4: 객실 탭 27~28px → 최소 44px, 라벨은 줄바꿈으로 수용한다.
   * !important: 원본 #위젯 .nav li a의 display/padding/font-size 지정. */
  .cocone-original .sub-menu li > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    max-width: 100%;
    padding: 10px 8px !important;
    font-size: 15px !important;
    line-height: 1.6;
    white-space: normal;
  }

  /* R5 · 문제 4: 페이지네이션 24×24 → 44×44. 페이지 수가 많으면 줄바꿈한다. */
  .cocone-original .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  /* R5 · 문제 4: 페이지 번호·이전/다음 버튼 실제 클릭 영역을 확장한다.
   * !important: 원본 .pagination > li > a의 고특이성 크기/여백 지정. */
  .cocone-original .pagination > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 8px !important;
    margin: 0 !important;
    line-height: 1.6 !important;
  }

  /* R5 · 문제 4: Q&A 목록 16px·게시글 목록 돌아가기 링크·푸터 22px·버튼 32px.
   * !important: 원본 ID 및 #doz_footer .footer-section a의 크기/줄간격.
   * 일반 문단 속 인라인 링크에는 적용하지 않는다. */
  .cocone-original .li_board a.list_text_title,
  .cocone-original .li_table a.title_link,
  .cocone-original .board_summary .board_name > a,
  .cocone-original .board_view .btn,
  .cocone-original a.btn,
  .cocone-original #doz_footer .policy_menu a {
    display: inline-block;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    max-width: 100%;
    height: auto !important;
    line-height: 1.6 !important;
    white-space: normal;
  }

  /* R6 · 문제 5: 소개의 긴 설명 문장과 오시는 길의 긴 주소만 왼쪽 정렬.
   * HTML의 위젯 ID·문단 위치·내용을 대조해 선정했으며 제목/짧은 캡션 제외.
   * 네 줄 여부는 폰트·R1 통합 폭에 의존하므로 최종 브라우저 실측 필요.
   * !important: 원본 p의 인라인 text-align:center를 이긴다. */
  .cocone-original #text_w20230926b12af622c26e9 p:is(:nth-child(3), :nth-child(4), :nth-child(8), :nth-child(9), :nth-child(11), :nth-child(12), :nth-child(13), :nth-child(14)),
  .cocone-original #text_w202311038f0768b117fee p:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(10), :nth-child(11), :nth-child(12)),
  .cocone-original #text_w2023110800abe7091a27c p:is(:nth-child(5), :nth-child(7)),
  .cocone-original #text_w202412123cbfac2339b5a p:is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(8)),
  .cocone-original #text_w20241218a223e05ce6dbf p:nth-child(4),
  .cocone-original #text_w20230926f3f6ed6821965 p,
  .cocone-original #text_w2023110884dd761a9d30b p {
    text-align: left !important;
  }
}

/* 통합 검수 수정(총괄, 2026-10-02): Q&A 목록 메타(작성자·날짜·조회수·좋아요)가 table-cell이라 모바일 13px 상향 후
 * "cocone2617@naver.co/m", "2025-09-/23"처럼 단어 중간에서 끊김(390px 실측). 항목 단위로 줄바꿈되게 한다. 768px에서도 끊김 실측 → 991px까지. */
@media (max-width: 991px) {
  .cocone-original .li_board ul.li_body > li:is(.name, .time, .read, .like) {
    display: inline-flex !important; /* !important: 원본 table-cell 규칙을 이긴다 */
    align-items: center;
    width: auto !important;
    white-space: nowrap;
    margin: 0 12px 4px 0;
    vertical-align: middle;
  }
}