/* ===========================================================
   PAK PAK — タイ料理店の多言語メニュー
   言語切替・カテゴリ絞り込みは隠しラジオ+CSSのみ(JS不使用)。
   JSはメニューデータの描画だけ(シート由来 or モック)。
   配色=hero写真の実測: タイル緑 #416F43 / 明タイル #8F975E / オレンジ #DA6A3D
   =========================================================== */
:root{
  --tile:#3F6B42;        /* タイルの緑(実測) */
  --tile-deep:#2C4A2F;
  --tile-lite:#8F975E;   /* 明るいタイル(実測) */
  --nam:#DA6A3D;         /* ナムプリックのオレンジ(実測・差し色) */
  --paper:#F6F2E7;       /* 生成りの紙 */
  --card:#FFFDF6;
  --ink:#1C2418;
  --mute:#87816F;
  --line:rgba(28,36,24,.14);
  --en:"Anton", system-ui, sans-serif;
  --jp:"Noto Sans JP", system-ui, sans-serif;
  --th:"Noto Sans Thai", "Noto Sans JP", sans-serif;
}
*{ box-sizing:border-box; margin:0; }
[hidden]{ display:none !important; }
html,body{ overflow-x:clip; }
body{
  font-family:var(--jp); background:var(--paper); color:var(--ink);
  line-height:1.85; letter-spacing:.02em; -webkit-font-smoothing:antialiased; font-size:15px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
input.sw{ display:none; }

/* ---------- HERO ---------- */
.hero{ position:relative; height:64svh; min-height:420px; overflow:hidden; background:var(--tile-deep); }
.hero__img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,30,18,.62) 0%, rgba(20,30,18,.10) 45%, rgba(20,30,18,.18) 100%); }
.hero__text{ position:absolute; left:0; right:0; bottom:0; padding:0 22px 26px; color:#fff; z-index:1; }
.hero__eyebrow{ font-family:var(--en); font-size:13px; letter-spacing:.3em; opacity:.9; }
.hero__logo{ font-family:var(--en); font-size:clamp(64px,17vw,130px); line-height:.95; letter-spacing:.02em; font-weight:400; margin-top:2px; }
.hero__sub{ margin-top:10px; font-size:13.5px; font-weight:700; letter-spacing:.14em; }

/* ---------- 言語バー ---------- */
.langwrap{ background:var(--tile); padding:18px 16px 20px; position:relative;
  /* タイル目地の表現 */
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:56px 56px;
}
.langwrap__label{ text-align:center; color:#DCE8D5; font-size:12px; letter-spacing:.12em; margin-bottom:10px; font-weight:500; }
.langbar{ display:flex; gap:8px; max-width:560px; margin:0 auto; }
.langbar label{
  flex:1; text-align:center; padding:11px 0; font-size:14px; font-weight:700;
  border:1.5px solid rgba(255,255,255,.45); border-radius:999px; color:#EAF2E4; cursor:pointer;
  transition:.15s; display:block; background:rgba(0,0,0,.10);
}

/* ---------- カテゴリ ---------- */
.catbar{
  display:flex; gap:20px; overflow-x:auto; padding:10px 18px 0; background:var(--paper);
  position:sticky; top:0; z-index:9; border-bottom:1px solid var(--line);
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.catbar::-webkit-scrollbar{ display:none; }
.catbar label{
  white-space:nowrap; padding:9px 2px 11px; font-size:13.5px; font-weight:700;
  color:var(--mute); cursor:pointer; display:block;
  border-bottom:3px solid transparent; margin-bottom:-1px;
}

/* ---------- メニュー ---------- */
main{ padding:10px 16px 8px; max-width:560px; margin:0 auto; }
.sec{ display:none; }
.cat-title{
  font-family:var(--en); font-size:15px; color:var(--tile); letter-spacing:.22em;
  margin:26px 4px 12px; display:flex; align-items:center; gap:10px;
}
.cat-title::after{ content:""; flex:1; height:3px; background:var(--tile-lite); opacity:.5; border-radius:2px; }
.cat-title .jp{ font-family:var(--jp); font-size:12px; font-weight:700; color:var(--mute); letter-spacing:.1em; }

.item{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:15px 16px; margin-bottom:10px; display:flex; gap:13px; align-items:flex-start;
}
.item .emoji{ font-size:29px; line-height:1.25; flex:none; }
.item .body{ flex:1; min-width:0; }
.item .row1{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.item .name{ font-size:15.5px; font-weight:700; }
.item .price{ font-size:16px; font-weight:900; color:var(--nam); white-space:nowrap; font-family:var(--jp); }
.item .desc{ font-size:12.5px; color:var(--mute); margin-top:4px; line-height:1.6; }
.badges{ margin-top:8px; display:flex; gap:5px; flex-wrap:wrap; }
.badge{
  font-size:10.5px; padding:2px 9px; border-radius:999px; background:#EDEFE0;
  color:#5F6A42; border:1px solid #D7DCBE; font-weight:500;
}
.badge.spicy{ background:#FBE7DC; color:var(--nam); border-color:#F2CDB8; }
.badge.rec{ background:var(--tile); color:#fff; border-color:var(--tile); }

/* 写真バンド */
.photoband{ display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:22px 0 6px; }
.photoband figure{ border-radius:12px; overflow:hidden; }
.photoband img{ width:100%; height:170px; object-fit:cover; }

.note{ text-align:center; font-size:11.5px; color:var(--mute); margin:28px 16px 10px; line-height:1.9; text-wrap:balance; }

/* ---------- footer ---------- */
.foot{ text-align:center; padding:34px 22px 52px; background:var(--tile);
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:56px 56px;
  color:#EAF2E4; margin-top:34px;
}
.foot__brand{ font-family:var(--en); font-size:22px; letter-spacing:.08em; }
.foot__sub{ margin:12px auto 20px; font-size:12px; color:#C9D8BF; max-width:420px; line-height:1.9; text-wrap:balance; }
.foot__print{ margin:0 0 18px; }
.foot__print a{ display:inline-block; font-size:13px; font-weight:700; color:var(--tile-deep); background:#fff; padding:9px 22px; border-radius:999px; }
.foot__making{ font-size:12px; color:#EAF2E4; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:2px; }
.foot__demo{ margin:24px 0 0; font-size:11px; color:#AEC3A3; letter-spacing:.04em; }

/* ---------- 言語切替(CSSのみ・JS不使用) ---------- */
.t{ display:none; }
.t.th{ font-family:var(--th); }
#l-ja:checked ~ .page .t.ja{ display:inline; }
#l-en:checked ~ .page .t.en{ display:inline; }
#l-zh:checked ~ .page .t.zh{ display:inline; }
#l-th:checked ~ .page .t.th{ display:inline; }
#l-ja:checked ~ .page label[for=l-ja],
#l-en:checked ~ .page label[for=l-en],
#l-zh:checked ~ .page label[for=l-zh],
#l-th:checked ~ .page label[for=l-th]{
  background:#fff; color:var(--tile-deep); border-color:#fff; font-weight:900;
}

/* ---------- カテゴリ絞り込み(CSSのみ) ---------- */
#c-all:checked ~ .page .sec{ display:block; }
#c-all:checked ~ .page .photoband{ display:grid; }
#c-1:checked ~ .page .sec.c1{ display:block; }
#c-2:checked ~ .page .sec.c2{ display:block; }
#c-3:checked ~ .page .sec.c3{ display:block; }
#c-4:checked ~ .page .sec.c4{ display:block; }
#c-all:checked ~ .page label[for=c-all],
#c-1:checked ~ .page label[for=c-1],
#c-2:checked ~ .page label[for=c-2],
#c-3:checked ~ .page label[for=c-3],
#c-4:checked ~ .page label[for=c-4]{
  color:var(--ink); font-weight:900; border-bottom-color:var(--nam);
}

@media (min-width:720px){
  .hero{ height:70svh; }
  .hero__text{ padding:0 40px 36px; }
  .photoband img{ height:230px; }
}