:root{
    --ink:#1f1c1a; --ink-soft:#5b544e; --line:#ddd6cc;
    --paper:#faf7f2; --accent:#8c2b2b; --accent-soft:#f2ece3;
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html,body{height:100%}
  body{
    background:var(--paper); color:var(--ink);
    font-family:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    line-height:1.6; word-break:keep-all; overflow-wrap:break-word;
    -webkit-text-size-adjust:100%; overflow:hidden;   /* 기본(카드) 상태 = 스크롤 없음 */
  }
  [lang="ja"]{word-break:normal; line-break:strict}

  /* 한 화면에 카드 1장. 100dvh(동적 뷰포트)로 주소창 접힘 대응, 100vh 폴백 먼저. */
  .card{
    height:100vh; height:100dvh; max-width:560px; margin:0 auto;
    display:flex; flex-direction:column; overflow:hidden; background:var(--paper);
  }
  /* 사진 = 축소 1순위(flex 로 먼저 줄어듦). 카드형은 통일 프레임+cover, 잘리는 위치는
     photo_focus(object-position). 원본 비율 풀뷰는 탭(오버레이). 가이드 문서는 별도 풀프레임. */
  .card-photo{
    flex:1 1 auto; min-height:96px; max-height:46dvh; width:100%;
    padding:0; border:0; overflow:hidden; position:relative;
    background:var(--accent-soft); cursor:zoom-in;
  }
  .card-photo picture{display:block; width:100%; height:100%}
  .card-photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:center 50%}
  /* 확대 힌트 = 아이콘 칩. 어두운 반투명 원 + 흰 아이콘이라 밝은/어두운 사진 모두에서 보이고,
     고정 크기라 프레임 경계에서 글자 잘림이 없다(텍스트 라벨 폐기). */
  .card-photo .hint{
    position:absolute; right:10px; bottom:10px; width:30px; height:30px; border-radius:50%;
    background:rgba(31,28,26,.55); display:flex; align-items:center; justify-content:center; pointer-events:none;
  }
  .card-photo .hint svg{width:15px; height:15px; fill:#fff}
  /* 본문 = 항상 보인다(축소 마지막). 한 줄 리드 + 음성 버튼은 끝까지 지킨다. */
  .card-body{
    flex:0 0 auto; padding:13px 20px calc(14px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; gap:7px; overflow:hidden;
  }
  .card.nophoto .card-body{flex:1 1 auto; justify-content:center}
  .eyebrow{font-size:11.5px; letter-spacing:.14em; color:var(--accent); font-weight:700}
  h1{font-size:clamp(18px,5.2vw,23px); line-height:1.35; font-weight:700; letter-spacing:-.01em}
  .h1-ja{font-size:clamp(11px,3vw,13px); color:var(--ink-soft); font-weight:400; word-break:normal; line-break:strict}
  .lead{font-size:clamp(14px,3.8vw,16.5px); line-height:1.6; margin-top:2px}
  .card-audio{margin-top:4px}
  .voice-toggle{display:flex; gap:7px; margin-bottom:8px}
  .voice-toggle .vbtn{
    flex:1; padding:9px 10px; font-size:13.5px; font-weight:600;
    font-family:inherit; color:var(--ink-soft); word-break:keep-all;
    background:#fff; border:1px solid var(--line); border-radius:4px; cursor:pointer;
  }
  .voice-toggle .vbtn.is-active{background:var(--accent); color:#fff; border-color:var(--accent)}
  /* 네이티브 audio = JS 실패 시 폴백(그때만 보임). JS 켜지면 숨기고 커스텀 플레이어를 쓴다. */
  audio{display:block; width:100%; height:40px}
  /* 커스텀 재생 컨트롤(카드 톤): 여성/남성=선택 위, 여기=재생. 역할이 눈으로 구분된다. */
  .player{display:none; align-items:center; gap:10px; margin-top:2px}
  .player.on{display:flex}
  .pp{flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
    background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center}
  .pp svg{width:15px; height:15px; fill:#fff}
  .pp .ic-pause{display:none}
  .pp.playing .ic-play{display:none}
  .pp.playing .ic-pause{display:inline}
  .seek{flex:1 1 auto; min-width:0; height:24px; accent-color:var(--accent); cursor:pointer}
  .time{flex:0 0 auto; font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap}
  .more-btn{
    margin-top:9px; padding:11px; font-size:14px; font-weight:600; font-family:inherit;
    color:var(--accent); background:#fff; border:1px solid var(--line); border-radius:4px;
    cursor:pointer; width:100%; word-break:keep-all;
  }
  /* 오버레이 공통 */
  .sheet, .photo-view{position:fixed; inset:0; z-index:20; display:none}
  .sheet.open, .photo-view.open{display:block}
  .sheet .backdrop, .photo-view .backdrop{position:absolute; inset:0; background:rgba(31,28,26,.5)}
  /* 전문 시트 — 펼치면 스크롤 허용(기본 카드가 무스크롤이면 요건 충족) */
  .sheet .panel{
    position:absolute; left:0; right:0; bottom:0; max-height:88dvh; overflow:auto;
    background:var(--paper); border-radius:14px 14px 0 0;
    padding:18px 20px calc(24px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch;
  }
  .sheet .sheet-h{display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-bottom:12px; position:sticky; top:0; background:var(--paper)}
  .sheet .sheet-h h2{font-size:16px; font-weight:700}
  .close-btn{font-size:14px; font-family:inherit; color:var(--ink-soft); background:#fff;
    border:1px solid var(--line); border-radius:4px; padding:6px 12px; cursor:pointer; white-space:nowrap}
  .sheet .full p{font-size:16px; line-height:1.8; margin-bottom:13px}
  .sheet .ja{margin-top:22px; padding-top:16px; border-top:2px solid var(--line)}
  .sheet .ja h3{font-size:12px; letter-spacing:.14em; color:var(--accent); font-weight:700; margin-bottom:9px}
  .sheet .ja-box{background:#fff; border:1px solid var(--line); border-radius:4px; padding:14px;
    font-size:14px; line-height:1.85; font-family:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif}
  .sheet .ja-box p{margin-bottom:11px}
  .sheet .foot{margin-top:20px; padding-top:12px; border-top:1px solid var(--line);
    font-size:11.5px; color:var(--ink-soft)}
  /* 하단 안내 링크(목록·기업탐방·개인정보) — 카드 아래 한 줄, 터치 44px 확보 */
  .page-foot{max-width:560px; margin:14px auto 0; padding:6px 16px calc(10px + env(safe-area-inset-bottom));
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 8px;
    font-size:12px; line-height:1.5; color:var(--ink-soft)}
  .page-foot a{color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; padding:10px 2px; display:inline-block}
  /* 사진 풀뷰 — 원본 비율 전체보기(크롭 없음) */
  .photo-view .backdrop{background:rgba(31,28,26,.92)}
  .photo-view .pv-img{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px}
  .photo-view img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
  .photo-view .close-btn{position:absolute; top:calc(12px + env(safe-area-inset-top)); right:12px; z-index:2}
  /* 짧은 화면(가로 폰 등) = 더 조인다: 사진 프레임 -> 여백 -> 폰트 순서로 축소 */
  @media (max-height:480px){
    .card-photo{max-height:38dvh; min-height:70px}
    .card-body{padding:9px 18px}
    h1{font-size:clamp(16px,4.6vw,20px)}
    .lead{font-size:clamp(12.5px,3.2vw,15px)}
    audio{height:36px}
  }