/* タイ語ドリル：1本の細めの列。ヘッダー（ロゴ・検索・メニュー）→ パンくず → 本文 → フッター（全ページへのリンク） */
:root{
  --bg:#ffffff; --surface:#ffffff; --sunk:#f4f5f9; --ink:#1f2333; --muted:#5f6577; --line:#e4e7ef;
  --jade:#d6336b; --jade-dark:#a8234b; --jade-soft:#ffe8ef; --on-jade:#ffffff; --saffron:#6741d9; --saffron-soft:#efeaff;
  --fill:var(--jade); --on-fill:var(--on-jade);
  --gold:#ffb020; --gold-dark:#1f2333; --deep:#1f2333; --deep-2:#2a2f45; --on-deep:#ffffff; --on-deep-muted:#c3c7d6;
  --c1:#c2410c; --c2:#c2255c; --c3:#6741d9; --c3l:#6741d9; --c4:#0b7285; --c5:#1864ab; --c6:#9c4a00; --card-ink:#1f2333;
  --edge:#1f2333; --pop:5px 5px 0 var(--edge);
  --ok:#2b8a3e; --ok-bg:#e3f6e7; --bad:#c92a2a; --bad-bg:#ffe5e5; --mark:#ffe58a;
  --f-thai-display:"Mitr",sans-serif;
  --f-thai:"Mitr","M PLUS Rounded 1c",sans-serif;
  --f-ja:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  --f-head:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
  --f-num:"Archivo Black","Arial Black",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:12px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#14162a; --surface:#1c1f38; --sunk:#181a31; --ink:#f1f1f6; --muted:#a6a9c0; --line:#2e3252;
  --jade:#ff7aa0; --jade-dark:#c2416b; --jade-soft:#3a2030; --on-jade:#14162a; --saffron:#b4a0ff; --saffron-soft:#2a2448;
  --fill:var(--jade); --on-fill:var(--on-jade);
  --gold:#ffc24d; --gold-dark:#0b0c18; --deep:#0b0c18; --deep-2:#1c1f38; --on-deep:#f1f1f6; --on-deep-muted:#a6a9c0;
  --c1:#ff8a4c; --c2:#ff7aa0; --c3:#a78bfa; --c3l:#a78bfa; --c4:#3bc9db; --c5:#74c0fc; --c6:#ffb347; --card-ink:#f1f1f6;
  --edge:#0b0c18; --pop:5px 5px 0 var(--edge);
  --ok:#7fd093; --ok-bg:#1a3222; --bad:#ff8f8f; --bad-bg:#3a1e1e; --mark:#6b5a12; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#14162a; --surface:#1c1f38; --sunk:#181a31; --ink:#f1f1f6; --muted:#a6a9c0; --line:#2e3252;
  --jade:#ff7aa0; --jade-dark:#c2416b; --jade-soft:#3a2030; --on-jade:#14162a; --saffron:#b4a0ff; --saffron-soft:#2a2448;
  --fill:var(--jade); --on-fill:var(--on-jade);
  --gold:#ffc24d; --gold-dark:#0b0c18; --deep:#0b0c18; --deep-2:#1c1f38; --on-deep:#f1f1f6; --on-deep-muted:#a6a9c0;
  --c1:#ff8a4c; --c2:#ff7aa0; --c3:#a78bfa; --c3l:#a78bfa; --c4:#3bc9db; --c5:#74c0fc; --c6:#ffb347; --card-ink:#f1f1f6;
  --edge:#0b0c18; --pop:5px 5px 0 var(--edge);
  --ok:#7fd093; --ok-bg:#1a3222; --bad:#ff8f8f; --bad-bg:#3a1e1e; --mark:#6b5a12; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ja);font-size:15px;line-height:1.7}
.wrap{max-width:860px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--jade)}
a:hover{text-decoration-thickness:2px}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--surface);padding:6px 10px;z-index:10}
h1{font-size:1.7rem;line-height:1.3;margin:6px 0 8px}
.th{font-family:var(--f-thai)}
.rom{font-family:var(--f-ja);color:var(--muted);font-size:.88em;letter-spacing:.01em}
.mono{font-family:var(--f-mono)}
.muted{color:var(--muted)} .small{font-size:.85rem}
.nowrap{white-space:nowrap}
.lead{color:var(--muted);margin:0 0 18px;max-width:62ch}
.kicker{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--saffron)}
.kicker a{color:inherit;text-decoration:none}
.sec-h{font-size:1.05rem;margin:32px 0 12px;display:flex;align-items:baseline;gap:8px}
.sec-h small{font-family:var(--f-mono);color:var(--muted);font-weight:500;font-size:.8rem}
mark{background:var(--mark);color:inherit;border-radius:2px}

/* ---- header（ロゴ・メニュー・検索を1行に。スマホでは2段） ---- */
.site-header{background:var(--surface);border-bottom:1px solid var(--line)}
.site-header .wrap,.site-footer .wrap{max-width:1040px}
.head-row{display:flex;align-items:center;gap:20px;min-height:64px;padding-top:8px;padding-bottom:8px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.logo i{font-style:normal;display:grid;place-items:center;height:36px;padding:0 9px;border-radius:12px;background:var(--fill);color:var(--on-fill);font-family:"Noto Sans Thai Looped",var(--f-thai);font-size:.9rem;font-weight:700;line-height:1;border:2px solid var(--edge)}
.logo b{font-family:var(--f-head);font-size:1.2rem;font-weight:800;letter-spacing:.02em}
.header-search{position:relative;flex:0 1 340px;margin-left:auto;display:flex}
.header-search input{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:7px 40px 7px 14px;font-size:.88rem;min-width:0}
.header-search button{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;width:32px;height:32px;display:grid;place-items:center;color:var(--muted)}
.header-search svg{width:18px;height:18px}
.main-nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.main-nav::-webkit-scrollbar{display:none}
.main-nav a{padding:6px 10px;text-decoration:none;color:var(--muted);font-weight:700;font-size:.9rem;white-space:nowrap;border-bottom:2px solid transparent}
.main-nav a:hover{color:var(--ink)}
.main-nav a[aria-current]{color:var(--ink);border-bottom:3px solid var(--jade)}
@media (max-width:760px){
  .head-row{flex-wrap:wrap;gap:8px 12px;padding-bottom:0}
  .header-search{order:2;flex:1 1 180px}
  .main-nav{order:3;flex-basis:100%;justify-content:space-between;margin:0 -6px;border-top:1px solid var(--line)}
  .main-nav a{padding:9px 6px 10px;font-size:.86rem}
}
@media (max-width:420px){.logo b{display:none}}

/* ---- autocomplete ---- */
.ac{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:20;overflow:hidden;text-align:left}
.ac a{display:flex;align-items:baseline;gap:10px;padding:8px 12px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.ac a:hover,.ac a.on{background:var(--jade-soft)}
.ac-th{font-size:1.05rem;flex:none;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-ja{flex:1;min-width:0;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-tag{font-size:.7rem;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 5px;flex:none}
.ac a.ac-all{border-bottom:0;font-size:.85rem;color:var(--jade);font-weight:700;justify-content:center}
.ac-none{margin:0;padding:10px 12px;font-size:.85rem;color:var(--muted)}

/* ---- breadcrumb / footer ---- */
.breadcrumb{font-size:.8rem;color:var(--muted);padding-top:14px}
.breadcrumb a{color:var(--muted)}
.site-footer{margin-top:64px;background:var(--deep);color:var(--on-deep-muted);padding:32px 0 20px;font-size:.88rem}
.foot-brand{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.foot-brand b{font-family:var(--f-head);color:var(--on-deep);font-size:1.15rem}
.foot-brand .th{color:var(--gold);font-size:.85rem}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.foot-grid h3{font-size:.78rem;letter-spacing:.06em;color:var(--gold);margin:0 0 6px}
.foot-grid a{display:block;color:var(--on-deep);text-decoration:none;padding:2px 0}
.foot-grid a:hover{color:var(--gold);text-decoration:underline}
.foot-note{font-size:.75rem;color:var(--on-deep-muted);margin-top:24px;opacity:.8}

/* ---- buttons / chips ---- */
.btn{display:inline-block;border:0;border-radius:var(--r);padding:9px 18px;font-weight:700;background:var(--fill);color:var(--on-fill);text-decoration:none;font-size:.92rem}
.btn.ghost{background:var(--sunk);color:var(--ink)}
.btn[hidden]{display:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips a{display:inline-flex;align-items:baseline;gap:6px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);text-decoration:none;color:var(--ink);font-size:.88rem}
.chips a:hover{border-color:var(--jade);color:var(--jade)}
.chips a[aria-current]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.chips small{font-family:var(--f-mono);color:var(--muted);font-size:.72rem}
.tag{font-size:.72rem;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 6px;text-decoration:none;white-space:nowrap}
.tag:hover{color:var(--jade);border-color:var(--jade)}
.play{border:1px solid var(--line);background:var(--surface);border-radius:999px;width:36px;height:36px;display:inline-grid;place-items:center;color:var(--jade);flex:none;padding:0}
.play svg{width:16px;height:16px}
.play:disabled{opacity:.35;cursor:not-allowed}
.play.lg{width:52px;height:52px}.play.lg svg{width:22px;height:22px}

/* ---- home（案3：明るいグラデーションのヒーロー、黒い太線と影のカード。番号は大きく、カードの枠に少し見切れる） ---- */
.home .wrap,.home-sec{max-width:1040px;margin-left:auto;margin-right:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff3c4 0%,#ffd9e3 55%,#d9e6ff 100%);color:#1f2333;padding:60px 0 60px;border-bottom:3px solid var(--edge)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.hero.has-art .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.hero .kicker{color:#a8234b;font-size:.85rem;margin-bottom:8px}
.hero h1{font-family:var(--f-head);font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.3;font-weight:800;margin:0 0 16px;letter-spacing:.01em}
.hero h1 em{font-style:normal;color:#d6336b}
.hero-lead{color:#4a5066;margin:0 0 24px;max-width:36em}
.hero-search{position:relative;display:flex;gap:10px;max-width:540px}
.hero-search input{flex:1;min-width:0;border:3px solid #1f2333;border-radius:999px;padding:12px 20px;font-size:1.02rem;background:#fff;color:#1f2333}
.hero-search button{border:3px solid #1f2333;border-radius:999px;background:#d6336b;color:#fff;font-weight:800;padding:0 24px;box-shadow:0 4px 0 #1f2333}
.hero-search button:active{transform:translateY(3px);box-shadow:0 1px 0 #1f2333}
.hero-hint{font-size:.8rem;color:#4a5066;margin:10px 0 14px}
.hero .chips a{background:#fff;color:#1f2333;border:2px solid #1f2333}
.hero .chips a:hover{background:#1f2333;color:#fff}
.hero-art{position:relative;min-height:340px}
/* スマホでは飾りを文字の後ろに薄く敷く（本文の幅をせばめない） */
@media (max-width:760px){
  .hero{padding:40px 0 44px}
  .hero.has-art .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-art{position:absolute!important;z-index:-1;inset:auto -16px -40px auto;width:min(82%,380px);height:auto;aspect-ratio:1/1;min-height:0!important;opacity:.3}
}
.home-sec{padding-top:60px}
.home-sec h2{font-family:var(--f-head);font-size:1.5rem;font-weight:800;margin:0 0 6px}
.home-band{margin-top:60px;padding-bottom:60px;background:var(--sunk);box-shadow:0 0 0 100vmax var(--sunk);clip-path:inset(0 -100vmax)}
.typelabel{font-size:.8rem;font-weight:800;letter-spacing:.08em;color:var(--muted);margin:22px 0 10px}
/* 3つの入口 */
.entries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.entry{position:relative;overflow:hidden;background:var(--surface);border:3px solid var(--edge);border-radius:16px;padding:22px 22px 14px;display:flex;flex-direction:column;box-shadow:var(--pop)}
.entry:nth-child(1){--nc:var(--c1)}.entry:nth-child(2){--nc:var(--c3)}.entry:nth-child(3){--nc:var(--c4)}
.entry{border-color:var(--nc);box-shadow:5px 5px 0 var(--nc)}
.entry-head{position:relative;display:block;text-decoration:none;color:var(--ink);padding-right:64px;margin-bottom:14px}
.entry-head b{display:block;font-family:var(--f-head);font-weight:800;font-size:1.25rem;margin-top:2px}
.entry-head span:not(.no){display:block;color:var(--muted);font-size:.86rem;line-height:1.6;margin-top:4px}
.entry-head:hover b{color:var(--jade);text-decoration:underline}
.no{position:absolute;top:-.36em;right:.02em;font-family:var(--f-num);font-weight:400;font-size:7rem;line-height:1;color:var(--nc,var(--jade));pointer-events:none;user-select:none}
.entry .no{top:calc(-22px - .2em);right:calc(-22px - .08em)}
.entry ul{position:relative;list-style:none;margin:auto 0 0;padding:0;border-top:2px dashed var(--line)}
.entry li a{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:2px dashed var(--line);text-decoration:none;color:var(--ink);font-size:.92rem;font-weight:500}
.entry li:last-child a{border-bottom:0}
.entry li a:hover{color:var(--jade)}
.entry li small{font-family:var(--f-mono);color:var(--muted);font-size:.75rem}
@media (max-width:760px){.entries{grid-template-columns:minmax(0,1fr)}}
/* テーマ（色つきカード・代表のタイ語） */
.home .theme-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
/* 背景は白。色はタイ語・番号・上の線だけに使う（白地での文字のコントラスト 4.6〜6.3） */
.home .theme-card,.steps a{--tc:var(--c1);background:var(--surface);color:var(--ink)}
.home .theme-card{border:3px solid var(--edge);border-radius:16px;box-shadow:0 5px 0 var(--edge);padding:14px 16px}
.home .theme-card:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--edge)}
.home .theme-card:nth-child(6n+1){--tc:var(--c1)}.home .theme-card:nth-child(6n+2){--tc:var(--c2)}.home .theme-card:nth-child(6n+3){--tc:var(--c3l)}
.home .theme-card:nth-child(6n+4){--tc:var(--c4)}.home .theme-card:nth-child(6n+5){--tc:var(--c5)}.home .theme-card:nth-child(6n){--tc:var(--c6)}
.home .theme-card{border-color:var(--tc);box-shadow:0 5px 0 var(--tc)}
.home .theme-card:hover{border-color:var(--tc);box-shadow:0 7px 0 var(--tc)}
.home .theme-card .tw{color:var(--tc)}
.home .theme-card b{color:var(--ink)}
.home .theme-card small{color:var(--muted);font-weight:700}
.theme-card .tw{display:block;font-family:var(--f-thai-display);font-size:1.5rem;line-height:1.35;color:var(--jade);margin-bottom:2px}
/* 5つのステップ（階段） */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:s;align-items:end}
.steps li{counter-increment:s}
.steps a{position:relative;overflow:hidden;display:block;border:3px solid var(--tc);border-radius:16px;padding:14px 16px 18px;text-decoration:none;box-shadow:0 5px 0 var(--tc)}
.steps a::before{content:counter(s);position:absolute;right:-.08em;bottom:-.3em;font-family:var(--f-num);font-size:6rem;line-height:1;color:var(--tc);opacity:1;pointer-events:none}
.steps b{position:relative;display:block;font-size:1.02rem;font-weight:800}
.steps span{position:relative;display:block;font-size:.8rem;font-weight:500;line-height:1.5;margin-top:2px}
.steps li:nth-child(1) a{min-height:120px;--tc:var(--c6)}
.steps li:nth-child(2) a{min-height:140px;--tc:var(--c1)}
.steps li:nth-child(3) a{min-height:160px;--tc:var(--c2)}
.steps li:nth-child(4) a{min-height:180px;--tc:var(--c3l)}
.steps li:nth-child(5) a{min-height:200px;--tc:var(--c4)}
.steps a:hover b{text-decoration:underline}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.steps a{min-height:110px!important}}
/* 練習の2枚 */
.practice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pcard{background:var(--surface);border:3px solid var(--edge);border-radius:16px;padding:20px 22px;box-shadow:var(--pop)}
.pcard h3{font-family:var(--f-head);font-weight:800;margin:0 0 4px;font-size:1.2rem}
.pcard p{margin:0 0 14px;color:var(--muted);font-size:.9rem}
@media (max-width:760px){.practice{grid-template-columns:minmax(0,1fr)}}
.today-card{display:flex;align-items:center;gap:18px;background:var(--surface);border:3px solid var(--edge);border-radius:16px;padding:20px 24px;flex-wrap:wrap;box-shadow:6px 6px 0 var(--gold)}
.today-main{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);flex:1;min-width:0}
.today-ja{font-weight:800;font-size:1.05rem}

/* ---- page head / tables ---- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.page-head .lead{margin-bottom:6px}
.head-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tbl-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:10px 0 16px}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:left;padding:7px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
thead th{font-size:.72rem;letter-spacing:.06em;color:var(--muted);font-weight:700;background:var(--sunk)}
td.mono{white-space:nowrap;font-variant-numeric:tabular-nums}
td .th,td.th{font-size:1.05rem}
td.p{width:44px;padding-right:4px}
td.p .play{width:30px;height:30px}
td.tone{color:var(--saffron);font-size:1.1rem}
.band{color:var(--saffron);font-weight:700;font-size:.8rem;white-space:nowrap}
.tlink{text-decoration:none;color:var(--ink);font-size:1.1rem}
.tlink:hover{color:var(--jade);text-decoration:underline}
table.words tbody tr:hover{background:var(--jade-soft)}

/* ---- theme / guide cards ---- */
.theme-grid,.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.theme-card,.guide-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.theme-card:hover,.guide-card:hover{border-color:var(--jade)}
.theme-card b,.guide-card b{font-size:1rem}
.theme-card small{font-family:var(--f-mono);color:var(--saffron);font-size:.72rem}
.theme-card span,.guide-card span{font-size:.8rem;color:var(--muted);margin-top:4px;line-height:1.5}
.side-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.side-link{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;text-decoration:none;color:var(--ink)}
.side-link span{font-size:.78rem;color:var(--muted);line-height:1.5}
.side-link:hover{border-color:var(--jade)}
.side-link.accent{background:var(--surface);border-color:var(--edge);border-width:3px}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:14px;border-top:1px solid var(--line);font-size:.9rem}
.pager a{text-decoration:none}

/* ---- word page ---- */
.word{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px clamp(16px,4vw,28px);margin-top:12px}
.word-main{display:flex;align-items:center;gap:16px;margin-top:6px}
.big-th{font-family:var(--f-thai-display);font-weight:500;font-size:clamp(2rem,7vw,2.8rem);line-height:1.3;margin:0;overflow-wrap:anywhere}
.word-rom{margin:0;font-size:1.05rem}
.word-ja{font-size:1.25rem;font-weight:700;margin:14px 0 4px}
.word-note{margin:6px 0 0;padding:10px 14px;background:var(--saffron-soft);border-radius:10px;font-size:.9rem}
.word-actions{margin-top:16px}
.wchips{display:flex;flex-wrap:wrap;gap:6px}
.wchip{display:inline-flex;align-items:baseline;gap:8px;padding:5px 12px;border:1px solid var(--line);background:var(--surface);border-radius:10px;text-decoration:none;color:var(--ink)}
.wchip .th{font-size:1.02rem}
.wchip-ja{font-size:.78rem;color:var(--muted)}
.wchip:hover{border-color:var(--jade)}

/* ---- guide prose ---- */
.toc{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.85rem;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;margin:6px 0 10px}
.toc a{text-decoration:none}
.toc a::before{content:"› ";color:var(--muted)}
.prose{max-width:70ch}
.prose h2{font-size:1.2rem;margin:30px 0 8px;padding-top:8px;scroll-margin-top:12px}
.prose ul{padding-left:1.3em}
.prose li{margin:4px 0}
.prose .tip{background:var(--jade-soft);border-radius:10px;padding:10px 14px;font-size:.9rem}
.prose .tbl-wrap{max-width:none}
.inline-word{display:inline-flex;align-items:baseline;gap:4px;text-decoration:none;border-bottom:1px dashed var(--jade);color:var(--ink);padding:0 2px}
.inline-word .th{font-size:1.05em}
.inline-word small{font-size:.72em;color:var(--muted)}
.inline-word:hover{background:var(--jade-soft)}

/* ---- search page ---- */
.search-form{display:grid;gap:10px;margin:8px 0 6px}
.search-main{display:flex;gap:8px}
.search-main input{flex:1;min-width:0;border:2px solid var(--jade);border-radius:12px;padding:10px 14px;font-size:1.05rem;background:var(--surface)}
.search-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:6px 11px;cursor:pointer;font-size:.88rem;border-right:1px solid var(--line)}
.seg label:last-child span{border-right:0}
.seg input:checked + span{background:var(--saffron-soft);color:var(--saffron);font-weight:700}
.seg input:focus-visible + span{outline:2px solid var(--saffron);outline-offset:-2px}
.seg input:disabled + span{opacity:.4;cursor:not-allowed}
select{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:6px 8px}
.search-summary{font-size:.88rem;color:var(--muted);min-height:1.5em;margin:4px 0 8px}
.search-hint h2{font-size:.9rem;margin:22px 0 8px}
.howto{padding-left:1.2em;font-size:.88rem;color:var(--muted)}
.howto b{color:var(--ink)}
.res-group h2{font-size:.95rem;margin:22px 0 8px;display:flex;gap:8px;align-items:baseline}
.res-group h2 small{font-family:var(--f-mono);color:var(--muted);font-weight:500}
.hits{list-style:none;margin:0 0 10px;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.hit{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr) auto;align-items:center;gap:6px 12px;padding:8px 12px;border-bottom:1px solid var(--line)}
.hit:last-child{border-bottom:0}
.hit .play{width:32px;height:32px}
.hit-main{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);min-width:0}
.hit-th{font-size:1.15rem;line-height:1.35}
.hit-main:hover .hit-th{color:var(--jade);text-decoration:underline}
.hit-ja{font-size:.9rem}
@media (max-width:560px){
  .hit{grid-template-columns:auto minmax(0,1fr) auto}
  .hit-ja{grid-column:2/4;grid-row:2;margin-top:-4px}
}
.guide-hits{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.guide-hits a{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--saffron);border-radius:10px;padding:8px 14px;text-decoration:none;color:var(--ink)}
.guide-hits span{font-size:.8rem;color:var(--muted)}
.instant{background:var(--surface);border:2px solid var(--jade);border-radius:14px;padding:14px 18px;margin:8px 0 12px}
.instant-label{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--jade)}
.instant .big-num{font-family:var(--f-mono);font-size:1.8rem}
.card-ja{font-size:1.3rem;font-weight:700}
.instant-th{display:flex;align-items:center;gap:12px;margin:6px 0}
.instant .big-th{font-size:clamp(1.5rem,5vw,2rem)}
.more-link{font-size:.88rem;font-weight:700}
.theme-hit{display:block;background:var(--jade-soft);border-radius:10px;padding:10px 14px;margin:8px 0;text-decoration:none;color:var(--ink)}
.drill-cta{margin-top:18px}

/* ---- drill ---- */
.setup{padding-block:6px 4px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.label{font-size:.72rem;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:6px 0 6px}
.cats{display:flex;flex-wrap:wrap;gap:6px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:flex;flex-direction:column;align-items:flex-start;padding:5px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);line-height:1.3;cursor:pointer;font-size:.9rem}
.chip small{font-size:.68rem;color:var(--muted);font-family:var(--f-mono)}
.chip input:checked + span{border-color:var(--fill);background:var(--fill);color:var(--on-fill)}
.chip input:checked + span small{color:var(--on-jade);opacity:.8}
.chip input:focus-visible + span{outline:2px solid var(--saffron);outline-offset:2px}
.chip input:disabled + span{opacity:.45;cursor:not-allowed}
.row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end}
.toggle{display:flex;align-items:center;gap:6px;font-size:.88rem;padding-block:6px}
.voice-note{font-size:.78rem;color:var(--muted);margin:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px clamp(16px,4vw,26px) 22px;margin-block:14px 8px;max-width:680px}
.qhead{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.qhead b{color:var(--ink)}
.bar{height:4px;background:var(--sunk);border-radius:4px;margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--fill);transition:width .3s}
.ask{margin:18px 0 4px;font-size:.85rem;color:var(--muted)}
.prompt{display:flex;align-items:center;gap:14px;min-height:96px;flex-wrap:wrap}
.prompt .main{min-width:0;flex:1}
.big-ja{font-size:clamp(1.5rem,5.5vw,2rem);font-weight:700;line-height:1.35}
.big-num{font-family:var(--f-mono);font-size:clamp(2rem,8vw,3rem);letter-spacing:.02em;line-height:1.2}
.prompt .rom{font-size:1rem;margin-top:2px}
.listen-btn{width:84px;height:84px;border-radius:50%;border:0;background:var(--fill);color:var(--on-fill);display:grid;place-items:center}
.listen-btn svg{width:34px;height:34px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
@media (max-width:480px){.choices{grid-template-columns:1fr}}
.choice{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:var(--r);padding:11px 12px;min-width:0}
.choice:hover:not(:disabled){border-color:var(--jade)}
.choice .k{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 5px;margin-top:3px;flex:none}
.choice .t{min-width:0;overflow-wrap:anywhere}
.choice .t .th{font-size:1.15rem;line-height:1.35;display:block}
.choice .t .num{font-family:var(--f-mono);font-size:1.2rem}
.choice .t .rom{display:block}
.sub{display:block;font-family:var(--f-mono);font-size:.8rem;color:var(--muted);margin-top:2px}
.fb .sub{display:inline;font-family:inherit}
.choice:disabled{cursor:default}
.choice.right{border-color:var(--ok);background:var(--ok-bg)}
.choice.wrong{border-color:var(--bad);background:var(--bad-bg)}
.choice.dim{opacity:.55}
.feedback{margin-top:14px}
.fb{border-radius:var(--r);padding:12px 14px;display:flex;gap:12px;align-items:flex-start}
.fb.ok{background:var(--ok-bg)} .fb.ng{background:var(--bad-bg)}
.fb .verdict{font-weight:700;font-size:.85rem}
.fb.ok .verdict{color:var(--ok)} .fb.ng .verdict{color:var(--bad)}
.fb .ans{min-width:0;flex:1}
.fb .ans .th{font-size:1.25rem;font-weight:500}
.fb .note{font-size:.82rem;color:var(--muted);margin-top:4px}
.note-link{font-size:.8rem;font-weight:700}
.actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.hint{font-size:.75rem;color:var(--muted)}
.result-score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:6px}
.result-score .n{font-family:var(--f-mono);font-size:3rem;line-height:1}
.result-score .n small{font-size:1.2rem}
.result-score .msg{color:var(--muted)}
.review-link{font-size:.9rem;font-weight:700}
.misslist{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.misslist li{display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:8px}
.misslist .w{min-width:0;flex:1;text-decoration:none;color:var(--ink)}
.misslist .w:hover .th{color:var(--jade);text-decoration:underline}
.misslist .th{font-size:1.1rem}
.misslist .ja{display:block;font-size:.88rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- practice tabs（フラッシュカード／4択ドリル） ---- */
.ptabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:460px;margin:12px 0 4px;background:var(--sunk);padding:4px;border-radius:12px}
.ptabs a{display:flex;flex-direction:column;align-items:center;padding:6px 10px;border-radius:9px;text-decoration:none;color:var(--muted);line-height:1.35}
.ptabs a b{font-size:.92rem}.ptabs a span{font-size:.7rem}
.ptabs a[aria-current]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ptabs a[aria-current] span{color:var(--saffron)}
.word-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---- flashcards ---- */
.fc-stage{max-width:560px;margin-top:14px}
.fc-wrap{perspective:1200px;margin:14px 0 10px}
.fc{display:block;width:100%;height:clamp(230px,42vh,300px);border:0;padding:0;background:none;cursor:pointer;touch-action:pan-y;transition:transform .15s;-webkit-tap-highlight-color:transparent}
.fc-inner{position:relative;display:block;width:100%;height:100%;transition:transform .45s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.fc.flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 2px 10px rgba(0,0,0,.06);backface-visibility:hidden;-webkit-backface-visibility:hidden;text-align:center;overflow:hidden}
.fc-back{transform:rotateY(180deg);border-color:var(--jade)}
.fc:focus-visible{outline:none}.fc:focus-visible .fc-face{outline:2px solid var(--saffron);outline-offset:2px}
.fc-wrap{position:relative}
.fc-wrap.lean-ok .fc-face{border-color:var(--ok)}
.fc-wrap.lean-again .fc-face{border-color:var(--bad)}
.fc{position:relative}
.fc-stamp{position:absolute;top:16px;z-index:5;padding:4px 14px;border:3px solid currentColor;border-radius:999px;background:var(--surface);font-weight:800;font-size:1.15rem;opacity:0;pointer-events:none}
.fc-stamp.ok{left:16px;color:var(--ok);transform:rotate(-10deg)}
.fc-stamp.again{right:16px;color:var(--bad);transform:rotate(10deg)}
.fc-wrap.lean-ok .fc-stamp.ok,.fc-wrap.lean-again .fc-stamp.again{opacity:1}
@media (hover:hover) and (pointer:fine){.fc-hint b{font-weight:400}}
@media (pointer:coarse){.fc-keys{display:none}}
.fc-label{position:absolute;top:12px;left:16px;font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.fc-back .fc-label{color:var(--jade)}
.fc-badge{position:absolute;top:10px;right:12px;font-size:.7rem;color:var(--saffron);background:var(--saffron-soft);border-radius:999px;padding:1px 8px}
.fc-th{font-family:var(--f-thai-display);font-weight:500;font-size:clamp(2rem,8vw,3rem);line-height:1.3;overflow-wrap:anywhere;color:var(--ink)}
.fc-ja{font-size:clamp(1.4rem,5.5vw,2rem);font-weight:700;line-height:1.4;color:var(--ink)}
.fc-th,.fc-ja,.fc-rom,.fc-sub,.fc-note{display:block}
.fc-rom{font-size:1.05rem}
.fc-sub .th{font-size:1.2rem;color:var(--ink)}
.fc-note{font-size:.8rem;color:var(--muted);max-width:40ch;margin-top:6px;line-height:1.5}
.fc-tools{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fc-link{font-size:.82rem}
.fc-actions{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-top:12px;align-items:stretch}
.fc-actions .btn{padding:12px 10px;font-size:1rem}
.fc-actions .btn:disabled{opacity:.4;cursor:not-allowed}
.fc-again{grid-column:1}.fc-flip{grid-column:2}.fc-ok{grid-column:3}
.fc-flip[hidden]{display:block;visibility:hidden}
.fc-ok{background:var(--ok);color:var(--on-jade)}
.fc-actions span{opacity:.7}
.fc-hint{text-align:center;margin-top:12px}
.fc-empty{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
@media (prefers-reduced-motion:reduce){.fc-inner{transition:none}}
.fc-opts summary{cursor:pointer;font-size:.85rem;color:var(--muted);font-weight:700;width:max-content}
.fc-opts[open] summary{margin-bottom:6px}
@media (max-width:600px){
  #fc-cats{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
  #fc-cats::-webkit-scrollbar{display:none}
  #fc-cats .chip span{white-space:nowrap}
  .page-drill h1{font-size:1.4rem;margin:4px 0}
}
@media (max-width:600px){.fc{height:clamp(180px,27vh,260px)}.fc-wrap{margin:10px 0 8px}.ptabs{margin-top:8px}}
.fc-theme{position:absolute;bottom:12px;left:0;right:0;font-size:.72rem;color:var(--muted)}
.fc-stop{border:0;background:none;color:var(--muted);font-size:.8rem;text-decoration:underline;padding:4px}
.fc-tools .fc-link{margin-left:auto}
.fc-tools .fc-stop{margin-left:0}

/* ---- 案3「トゥクトゥク・ポップ」の共通の仕上げ：黒い太線・ずらした影・丸いボタン ---- */
h1,.prose h2,.sec-h{font-family:var(--f-head);font-weight:800}
.btn{border:2px solid var(--edge);border-radius:999px;box-shadow:0 3px 0 var(--edge);font-weight:800}
.btn.ghost{background:var(--surface);color:var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}
.fc-ok{background:var(--ok)}
.theme-card,.guide-card,.side-link,.word,.card,.fc-empty,.instant,.hits,.tbl-wrap{border:2px solid var(--edge);border-radius:14px}
.word,.card,.fc-empty,.instant{border-width:3px;box-shadow:var(--pop)}
.theme-card,.guide-card,.side-link{box-shadow:0 4px 0 var(--edge)}
.theme-card:hover,.guide-card:hover,.side-link:hover{border-color:var(--edge);transform:translateY(-2px);box-shadow:0 6px 0 var(--edge)}
.toc{border:2px solid var(--edge);border-radius:12px}
.kicker{color:var(--saffron)}
.chips a{border-radius:999px;border-width:2px}
.wchip{border:2px solid var(--line);border-radius:999px}
.wchip:hover{border-color:var(--edge)}
.fc-face{border:3px solid var(--edge);border-radius:18px;box-shadow:none}
.fc-back{border-color:var(--jade)}
.big-th,.fc-th{font-weight:500}
.hero-search input:focus,.search-main input:focus{outline:3px solid var(--gold);outline-offset:2px}
.search-main input{border:3px solid var(--edge);border-radius:999px;padding-left:18px}
.choice{border:2px solid var(--line);border-radius:12px}
.choice:hover:not(:disabled){border-color:var(--edge)}
.ptabs{border:2px solid var(--edge)}
.site-header{border-bottom:3px solid var(--edge)}
.site-footer .foot-brand b{font-weight:800}
.tlink{font-family:var(--f-thai)}


/* ---- 小さなイラスト（トゥクトゥク・象）：見出しの右の空いたところに ---- */
.page-head.with-illust{align-items:center;flex-wrap:nowrap}
.page-head.with-illust > div{min-width:0}
.illust{flex:none;display:block;width:150px;margin:0 4px 0 auto}
.illust.sm{width:110px}
.illust svg{display:block;width:100%;height:auto}
.illust .k{stroke:var(--edge);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.page-search .page-head.with-illust{margin-top:6px}
.page-search .page-head h1{margin:0}
@media (max-width:600px){.illust{width:88px}.illust.sm{width:72px}}

/* ---------- 表示の設定：読み（IPA／簡易ローマ字）とタイ文字（ループなし／あり） ---------- */
html[data-rs="ipa"] .rs, html:not([data-rs="ipa"]) .ri{display:none}
/* ロゴとトップのステッカーは自分で Noto Sans Thai Looped を指定しているので、ここでは変わらない */
html[data-thai-font="looped"]{--f-thai-display:"Noto Sans Thai Looped","Mitr",sans-serif;--f-thai:"Noto Sans Thai Looped","M PLUS Rounded 1c",sans-serif}
.viewsw{display:flex;flex-wrap:wrap;gap:4px 18px;margin:12px 0}
.smp{font-style:normal;font-size:1rem;margin-left:4px}
.smp-loop{font-family:"Noto Sans Thai Looped",sans-serif}
.smp-noloop{font-family:"Mitr",sans-serif}

/* ---------- 単語の内訳（パーツごとのタイ語・読み・意味）。カードの中は白、色はタイ語と縁だけ ---------- */
.parts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.part{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:56px;max-width:100%;padding:6px 12px;
  background:var(--surface);border:2px solid var(--edge);border-radius:12px;box-shadow:3px 3px 0 var(--edge)}
.part .pth{font-size:1.3rem;line-height:1.35;color:var(--jade);overflow-wrap:anywhere}
.part .prom{font-size:.74rem;color:var(--muted)}
.part .pja{font-size:.82rem;font-weight:700;color:var(--ink);margin-top:2px}
.parts .plus{font-weight:800;color:var(--muted)}
.parts .whole{font-weight:800}
.word-parts{margin-top:16px}
.word-parts .sec-h{margin-bottom:10px}
.breakdown{margin-top:14px}
.feedback .note{font-size:.84rem;color:var(--muted);margin:10px 0 0}
.chosen{margin-top:16px;padding-top:12px;border-top:2px dashed var(--line)}
.chosen .crow{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.chosen .ans{flex:1;min-width:0}
.chosen .part{box-shadow:none;border-width:1.5px;border-color:var(--line)}
.fc-parts{display:block;margin-top:12px}
.fc-parts .parts{justify-content:center}

/* ---------- レベル（初級・初中級・中級） ---------- */
.lv-h{font-family:var(--f-head);font-weight:800;font-size:1.5rem;margin:30px 0 2px;padding-bottom:4px;border-bottom:3px solid var(--edge)}
.lv-h small{font-family:var(--f-mono);font-size:.75rem;font-weight:500;color:var(--muted);margin-left:10px}
.lvgroup{display:flex;gap:10px;align-items:flex-start;flex-basis:100%;min-width:0}
.lvgroup .glabel{flex:none;width:4.2em;padding-top:8px;font-size:.72rem;font-weight:700;color:var(--muted)}
.lvgroup .cchips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
@media (max-width:480px){.lvgroup{flex-direction:column;gap:4px}.lvgroup .glabel{padding-top:0}}

/* ---- トップの「テーマからさがす」：分野ごとの行＋チップ。アイコンは content/icons/（線は紺、1か所だけ分野の色） ---- */
.lv{display:inline-block;font-size:.66rem;font-weight:800;line-height:1.4;border:2px solid currentColor;border-radius:999px;padding:0 6px;margin-right:6px;white-space:nowrap}
.lv1{color:var(--c4)}.lv2{color:var(--c5)}.lv3{color:var(--c3)}
.home-sec .lead .lv{margin:0 2px}
.tg{border-top:2px solid var(--line)}
.tg-row{display:grid;grid-template-columns:230px minmax(0,1fr);gap:10px 16px;align-items:start;padding:14px 0;border-bottom:2px solid var(--line)}
.tg-head{display:flex;align-items:center;gap:10px;padding-top:2px}
.tg-head b{font-size:1.02rem;font-weight:800}
.tg-head small{color:var(--muted);font-size:.75rem;font-family:var(--f-mono)}
.tg-ic{display:grid;place-items:center;width:42px;height:42px;flex:none;border:2px solid var(--edge);border-radius:12px;background:var(--surface);color:var(--edge);box-shadow:0 3px 0 var(--tc)}
.tg-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tg-ic .ac{fill:var(--tc);fill-opacity:.35;stroke:currentColor}
.tg-chips{display:flex;flex-wrap:wrap;gap:8px}
.tg-chip{display:inline-flex;align-items:center;border:2px solid var(--edge);border-radius:999px;padding:5px 12px;text-decoration:none;color:var(--ink);background:var(--surface);font-weight:700;font-size:.9rem;line-height:1.4}
.tg-chip small{margin-left:6px;color:var(--muted);font-weight:500;font-size:.72rem;font-family:var(--f-mono)}
.tg-chip:hover{border-color:var(--tc);color:var(--ink);box-shadow:0 3px 0 var(--tc)}
@media (max-width:760px){
  .tg-row{grid-template-columns:minmax(0,1fr)}
  .tg-chip{font-size:.86rem;padding:4px 10px}
}