/* Alice in App — สไตล์หลัก · ไม่โหลดอะไรจากนอกเว็บ · ฟอนต์จากเครื่องผู้ชม */
:root {
  --cream: #FFFDF4;
  --cream-2: #FBF3DC;
  --navy: #1C3557;
  --gold: #D9A93D;
  --hair: #F3C84B;
  --sky: #8FB3D6;
  --muted: #3E5575;
  --surface: #FFFFFF;
  --header-bg: rgba(255,253,244,.96);
  --on-gold: #1C3557;
  --foot-bg: #1C3557;
  --foot-fg: #FFFDF4;
  --plate: #FFFDF4;
  --radius: 16px;
  --font: "Sukhumvit Set", "Thonburi", "Noto Sans Thai", "Leelawadee UI", "Tahoma", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.7;
  color: var(--navy); background: var(--cream); overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .5em; color: var(--navy); }
h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--navy); color: var(--cream); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); border-bottom: 2px solid var(--gold); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 48px; height: 48px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-size: 1.2rem; }
.brand-text small { font-size: .9rem; color: var(--muted); }
.site-nav ul { display: flex; gap: 4px; list-style: none; flex-wrap: wrap; }
.site-nav a { display: block; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.site-nav a:hover { background: var(--cream-2); }
.menu-toggle { display: none; align-items: center; gap: 10px; font: inherit; font-weight: 600; color: var(--navy); background: var(--cream-2); border: 2px solid var(--gold); border-radius: 12px; padding: 8px 14px; cursor: pointer; }
.menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after { display: block; width: 20px; height: 2px; background: var(--navy); position: relative; content: ""; }
.menu-toggle-bars::before { position: absolute; top: -6px; }
.menu-toggle-bars::after { position: absolute; top: 6px; }

/* hero */
.hero { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%); padding: 48px 0 56px; }
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.tagline-pill { display: inline-block; margin-bottom: 16px; padding: 6px 16px; border: 2px solid var(--gold); border-radius: 999px; background: var(--cream); font-weight: 700; letter-spacing: .02em; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 36em; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.hero-figure { margin: 0; }
.hero-figure img { width: 100%; max-width: 520px; margin-inline: auto; border-radius: 24px; border: 3px solid var(--gold); box-shadow: 0 12px 30px rgba(28,53,87,.15); }

.btn { display: inline-block; padding: 12px 26px; border-radius: 999px; font: inherit; font-weight: 700; text-decoration: none; border: 2px solid var(--gold); }
.btn-primary { background: var(--gold); color: var(--on-gold); }
.btn-primary:hover { background: var(--hair); }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--cream-2); }

/* sections */
.section { padding: 64px 0; }
.section-tint { background: var(--cream-2); }
.eyebrow { margin: 0 0 4px; font-weight: 700; color: var(--navy); letter-spacing: .08em; text-transform: uppercase; font-size: .95rem; }
.eyebrow::after { content: ""; display: block; width: 48px; height: 3px; background: var(--gold); margin-top: 6px; }
.section-lead { color: var(--muted); max-width: 40em; }

.card-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 28px; }
.card-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
@media (min-width: 900px) { .card-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--surface); border: 2px solid var(--cream-2); border-top: 4px solid var(--gold); border-radius: var(--radius); padding: 22px; box-shadow: 0 4px 14px rgba(28,53,87,.06); }
.card p { margin: 0; color: var(--muted); }
.card p + p { margin-top: .6em; }
.card-en { font-size: .9rem; color: var(--muted) !important; margin-bottom: .3em !important; }
.nowrap { white-space: nowrap; }

/* ป้ายต้นแบบ · คำเตือน · จุดสีความมั่นใจ */
.badge { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 12px; border: 2px solid var(--gold); border-radius: 999px; background: var(--cream-2); color: var(--navy); font-size: .85rem; font-weight: 700; line-height: 1.5; }
.badge-live { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.card-sub { font-weight: 600; color: var(--navy) !important; margin-bottom: .5em !important; }
.warn { margin-top: 12px !important; padding: 10px 12px; border-left: 4px solid var(--navy); background: var(--cream-2); border-radius: 8px; color: var(--navy) !important; }
.conf-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-weight: 600; font-size: .95rem; }
.conf-legend li { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--navy); display: inline-block; }
.dot-green { background: #3FA34D; }
.dot-yellow { background: var(--hair); }
.dot-blue { background: var(--sky); }
.dot-red { background: #D64545; }

.concept-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
.concept-figure { margin: 0; }
.concept-figure img { display: block; width: 100%; max-width: none; margin: 0; border-radius: 50%; }
/* ✏️ 2026-11-08 พี่: ย้ายรูปอลิสสีน้ำ (เดิมส่วนบน) มาที่แนวคิด ⇒ ทำขอบวงทอง-ฟ้า-ทองแบบตราเดิม · ขนาด/ระยะย้ายมาไว้ที่ .concept-art (ห่อรูป+ควัน) */
.concept-art { position: relative; width: calc(100% - 28px); max-width: 392px; margin: 14px auto; }
.concept-art img { border: 5px solid var(--gold); box-shadow: 0 0 0 9px var(--sky), 0 0 0 14px var(--gold); }

/* ควันกาแฟ (CSS ล้วน) ลอยจากปากถ้วย ≈ x51% y63.5% ของรูป · จางก่อนถึงคาง (y≈47%) · ขาวนุ่ม + เงาเทาอุ่นให้เห็นบนเสื้อครีม */
.steam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
/* เส้นควันรูปตัว S แบบภาพวาด: ครึ่งบนโค้ง ")" (::before) ครึ่งล่างโค้ง "(" (::after) · ขาวนวล + เงาเทาอุ่นบาง ๆ ตัดกับเสื้อครีม · blur ≤ 1.2px */
.steam-wisp { position: absolute; top: 49.5%; width: 6.5%; height: 14%; opacity: 0; transform-origin: 50% 100%; animation: steam-rise 4.4s ease-in-out infinite; filter: drop-shadow(0 0 1.2px rgba(120,100,85,.7)) drop-shadow(0 0 .5px rgba(120,100,85,.6)); }
.steam-wisp::before, .steam-wisp::after { content: ""; position: absolute; left: 0; width: 100%; height: 50%; box-sizing: border-box; border: 0 solid #fffdf7; }
.steam-wisp::before { top: 0; border-right-width: 4px; border-radius: 0 100% 100% 0 / 0 100% 100% 0; }
.steam-wisp::after { bottom: 0; border-left-width: 4px; border-radius: 100% 0 0 100% / 100% 0 0 100%; }
.steam-wisp:nth-child(1) { left: 45%; animation-delay: 0s; }
.steam-wisp:nth-child(2) { left: 49%; animation-delay: 1.5s; animation-duration: 4.8s; }
.steam-wisp:nth-child(3) { left: 53%; animation-delay: 2.9s; animation-duration: 4s; }
@keyframes steam-rise {
  0%   { transform: translate(0, 12%) scale(.8, .8); opacity: 0; }
  15%  { opacity: .9; }
  45%  { transform: translate(14%, 4%) scale(.9, .95); opacity: .9; }
  70%  { transform: translate(-12%, -2%) scale(1, 1); opacity: .5; }
  100% { transform: translate(6%, -6%) scale(1.08, 1.05); opacity: 0; }
}

/* ส่วนบน: ฉากอลิสตามช่วงเวลา (เวลาเครื่องผู้ชม · ตามหน้าต่างเจ้าหญิง) · ฉากนิ่งขยับช้า ๆ · ฉาก day/relax-work เป็นวิดีโอวน */
.hero-scene { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin-inline: auto; border-radius: 24px; overflow: hidden; border: 3px solid var(--gold); box-shadow: 0 12px 30px rgba(28,53,87,.15); background: var(--cream-2); }
.hero-scene .scene-art { position: absolute; inset: 0; display: block; transform-origin: 50% 40%; }
.hero-scene .scene-img, .hero-scene .scene-video { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; }
.hero-scene .scene-video[hidden], .hero-scene.is-video .scene-img { display: none; }
/* ✏️ 2026-11-08 00:35 พี่: "ไม่เห็นมีภาพไหนซูมเข้าออกเลย" ⇒ เดิม 14 วิ · 7% เบาเกินจนดูเหมือนนิ่ง ⇒ 7 วิ · 15% + เลื่อนเล็กน้อย */
.hero-scene:not(.is-video) .scene-art { animation: scene-drift 7s ease-in-out infinite alternate; }
@keyframes scene-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.15) translate(-2%, -3%); } }

/* กะพริบตา (CSS ล้วน · พี่ขอ 2026-11-08 07:57): เปลือกตาสีผิว + เส้นขนตาปิด ลงจากบน · ~190ms · วน 11 วิ มีกะพริบ 4 ครั้ง (ห่าง 3.7 / 0.5 / 3.0 / 3.8 วิ) · แต่ละที่ใช้รอบ/ดีเลย์ต่างกัน ไม่พร้อมกัน */
.blink { position: absolute; inset: 0; display: block; pointer-events: none; }
.concept-art .blink { inset: 5px; }
.concept-art { --lash: 2.4px; --blink-dur: 11s; --blink-delay: -3s; }
.bc-art { --lash: 1px; --blink-dur: 12.7s; --blink-delay: -7.4s; }
.hero-scene { --lash: 1.3px; --blink-dur: 9.7s; --blink-delay: -1.1s; }
.eyelid { position: absolute; display: block; opacity: 0; transform: scaleY(0); transform-origin: 50% 0; background: linear-gradient(to bottom, var(--lid-a) 0%, var(--lid-b) 100%); border-radius: 45% 45% 50% 50% / 40% 40% 60% 60%; box-shadow: 0 0 3px 1px var(--lid-a); animation: blink-lid var(--blink-dur, 11s) linear var(--blink-delay, 0s) infinite; }
.eyelid::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: 0; height: 45%; border-bottom: var(--lash) solid #4b2e22; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
@keyframes blink-lid {
  0% { transform: scaleY(0); opacity: 0; }
  13.45% { transform: scaleY(0); opacity: 0; }
  13.64% { transform: scaleY(0); opacity: 1; }
  14.27% { transform: scaleY(1); opacity: 1; }
  14.45% { transform: scaleY(1); opacity: 1; }
  15.36% { transform: scaleY(0); opacity: 1; }
  15.45% { transform: scaleY(0); opacity: 0; }
  47.09% { transform: scaleY(0); opacity: 0; }
  47.27% { transform: scaleY(0); opacity: 1; }
  47.91% { transform: scaleY(1); opacity: 1; }
  48.09% { transform: scaleY(1); opacity: 1; }
  49.00% { transform: scaleY(0); opacity: 1; }
  49.09% { transform: scaleY(0); opacity: 0; }
  51.64% { transform: scaleY(0); opacity: 0; }
  51.82% { transform: scaleY(0); opacity: 1; }
  52.45% { transform: scaleY(1); opacity: 1; }
  52.64% { transform: scaleY(1); opacity: 1; }
  53.55% { transform: scaleY(0); opacity: 1; }
  53.64% { transform: scaleY(0); opacity: 0; }
  78.91% { transform: scaleY(0); opacity: 0; }
  79.09% { transform: scaleY(0); opacity: 1; }
  79.73% { transform: scaleY(1); opacity: 1; }
  79.91% { transform: scaleY(1); opacity: 1; }
  80.82% { transform: scaleY(0); opacity: 1; }
  80.91% { transform: scaleY(0); opacity: 0; }
  100% { transform: scaleY(0); opacity: 0; }
}
/* ตำแหน่ง/เอียง/สีผิวเปลือกตา วัดจากรูปจริง (% ของกรอบรูป) · แนวคิด+นามบัตรใช้ชุดเดียวกัน (รูปเดียวกัน) · ฉากส่วนบน 8 ฉาก */
.concept-art .eyelid-l, .bc-art .eyelid-l { left: 41.0%; top: 31.0%; width: 8.3%; height: 5.2%; rotate: 3deg; --lid-a: rgb(254, 207, 161); --lid-b: rgb(254, 195, 149); }
.concept-art .eyelid-r, .bc-art .eyelid-r { left: 52.3%; top: 29.5%; width: 9.5%; height: 5.6%; rotate: -13deg; --lid-a: rgb(254, 207, 161); --lid-b: rgb(254, 194, 148); }
.hero-scene[data-scene="morning-work"] .eyelid-l { left: 42.2%; top: 27.6%; width: 7.0%; height: 4.6%; rotate: 3deg; --lid-a: rgb(253, 209, 170); --lid-b: rgb(248, 197, 158); }
.hero-scene[data-scene="morning-work"] .eyelid-r { left: 52.9%; top: 25.9%; width: 8.3%; height: 4.6%; rotate: -10deg; --lid-a: rgb(253, 209, 170); --lid-b: rgb(254, 192, 155); }
.hero-scene[data-scene="day"] .eyelid-l { left: 42.2%; top: 27.6%; width: 7.0%; height: 4.6%; rotate: 3deg; --lid-a: rgb(253, 210, 168); --lid-b: rgb(255, 196, 154); }
.hero-scene[data-scene="day"] .eyelid-r { left: 52.9%; top: 25.9%; width: 8.3%; height: 4.6%; rotate: -10deg; --lid-a: rgb(253, 210, 168); --lid-b: rgb(250, 191, 151); }
.hero-scene[data-scene="morning-holiday"] .eyelid-l { left: 42.8%; top: 29.9%; width: 7.0%; height: 4.3%; rotate: 6deg; --lid-a: rgb(252, 209, 163); --lid-b: rgb(254, 192, 141); }
.hero-scene[data-scene="morning-holiday"] .eyelid-r { left: 53.6%; top: 26.5%; width: 7.8%; height: 4.6%; rotate: -10deg; --lid-a: rgb(252, 209, 163); --lid-b: rgb(255, 191, 145); }
.hero-scene[data-scene="evening-work"] .eyelid-l { left: 39.2%; top: 27.5%; width: 6.6%; height: 4.9%; rotate: 8deg; --lid-a: rgb(253, 195, 144); --lid-b: rgb(251, 178, 124); }
.hero-scene[data-scene="evening-work"] .eyelid-r { left: 49.4%; top: 25.2%; width: 7.5%; height: 4.6%; rotate: -10deg; --lid-a: rgb(253, 195, 144); --lid-b: rgb(253, 180, 129); }
.hero-scene[data-scene="evening-holiday"] .eyelid-l { left: 39.5%; top: 29.8%; width: 7.5%; height: 4.9%; rotate: 5deg; --lid-a: rgb(254, 200, 152); --lid-b: rgb(254, 184, 137); }
.hero-scene[data-scene="evening-holiday"] .eyelid-r { left: 51.4%; top: 27.6%; width: 7.5%; height: 4.6%; rotate: -10deg; --lid-a: rgb(254, 200, 152); --lid-b: rgb(249, 188, 133); }
.hero-scene[data-scene="relax-work"] .eyelid-l { left: 44.0%; top: 21.0%; width: 4.5%; height: 3.3%; rotate: 8deg; --lid-a: rgb(255, 210, 172); --lid-b: rgb(248, 197, 156); }
.hero-scene[data-scene="relax-work"] .eyelid-r { left: 51.6%; top: 20.2%; width: 6.8%; height: 3.8%; rotate: 8deg; --lid-a: rgb(255, 210, 172); --lid-b: rgb(251, 192, 152); }
.hero-scene[data-scene="relax-holiday"] .eyelid-l { left: 41.5%; top: 25.7%; width: 6.3%; height: 4.9%; rotate: 8deg; --lid-a: rgb(255, 201, 155); --lid-b: rgb(251, 179, 141); }
.hero-scene[data-scene="relax-holiday"] .eyelid-r { left: 51.4%; top: 22.8%; width: 6.8%; height: 4.1%; rotate: -12deg; --lid-a: rgb(255, 201, 155); --lid-b: rgb(252, 189, 147); }
.hero-scene[data-scene="night"] .eyelid-l { left: 38.2%; top: 29.7%; width: 7.0%; height: 4.6%; rotate: 5deg; --lid-a: rgb(248, 193, 141); --lid-b: rgb(249, 170, 125); }
.hero-scene[data-scene="night"] .eyelid-r { left: 49.1%; top: 25.2%; width: 7.8%; height: 4.9%; rotate: -12deg; --lid-a: rgb(248, 193, 141); --lid-b: rgb(246, 179, 136); }

/* ซ่อนเปลือกตา: ส่วนบนยังไม่มี JS (ยังไม่มี data-scene) · ตอนเล่นวิดีโอ (วิดีโอมีหลับตาในตัว) */
.hero-scene .blink { display: none; }
.hero-scene[data-scene]:not(.is-video) .blink { display: block; }
.hero-scene.is-video .blink { display: none; }
.principles { list-style: none; counter-reset: p; margin-top: 20px; display: grid; gap: 16px; }
.principles li { counter-increment: p; position: relative; padding-left: 56px; }
.principles li::before { content: counter(p); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-weight: 800; display: grid; place-items: center; }
.principles p { margin: 0; color: var(--muted); }

/* business card */
.card-section { text-align: center; }
.card-section .eyebrow::after { margin-inline: auto; }
.card-section .section-lead { margin-inline: auto; }
.bizcard { display: block; margin: 28px auto 12px; padding: 0; width: min(420px, 100%); aspect-ratio: 7 / 4; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; perspective: 1000px; }
.bizcard-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s; }
.bizcard[aria-pressed="true"] .bizcard-inner { transform: rotateY(180deg); }
.bizcard-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px; border-radius: 18px; border: 3px solid var(--gold); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 12px 28px rgba(28,53,87,.2); }
/* ✏️ 2026-11-07 23:23 พี่: "ด้านหน้าเป็นอลิส ด้านหลังเป็น Logo" ⇒ หน้า = อลิส (กรมท่า) · หลัง = โลโก้บริษัท (ครีม) */
.bizcard-front { background: var(--navy); color: var(--cream); }
.bizcard-back { background: var(--cream); transform: rotateY(180deg); }
.bc-logo { width: 64px; height: 64px; }
.bc-name { font-size: 1.5rem; font-weight: 800; color: var(--navy); }
.bc-company { font-size: .95rem; color: var(--muted); }
.bc-rule { display: block; width: 64px; height: 3px; background: var(--gold); margin: 6px 0; }
.bc-quote { font-style: italic; font-weight: 600; border: 2px solid var(--sky); border-radius: 12px; padding: 4px 14px; color: var(--navy); }
.bc-person { font-size: 1.4rem; font-weight: 800; }
.bc-person-en { color: var(--hair); font-weight: 600; }
.bc-role { font-size: .95rem; }
.bc-mail { font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.bc-company-en { font-size: .9rem; color: var(--sky); }
/* ด้านอลิส: รูปซ้าย ข้อความขวา (การ์ดเตี้ย 7:4 · จอแคบสูงไม่พอเรียงแนวตั้ง) */
.bc-has-avatar { flex-direction: row; gap: 16px; text-align: left; }
/* รูปใหญ่ (alice-hero) ครอปเป็นวงกลมเฉพาะช่วงหน้า: ขยาย 190% แล้วเลื่อนให้หน้าอยู่กลางวง (พี่เสนอ 2026-11-07 23:21) */
.bc-avatar { position: relative; display: block; width: 32%; max-width: 110px; aspect-ratio: 1; flex: none; border-radius: 50%; overflow: hidden; border: 3px solid var(--gold); background: var(--cream-2); }
.bc-art { position: absolute; display: block; width: 190%; left: -45%; top: -20%; }
.bc-art img { display: block; width: 100%; max-width: none; height: auto; }
.bc-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
/* จอแคบ: ด้านโลโก้สูงเกินการ์ดราว 11px ที่กว้าง 360 (วัด 2026-11-07) ⇒ ย่อโลโก้/ชื่อ */
@media (max-width: 420px) {
  .bc-logo { width: 44px; height: 44px; }
  .bc-name { font-size: 1.25rem; }
}
.bizcard:focus-visible { outline: 3px solid var(--navy); outline-offset: 6px; border-radius: 20px; }
.hint { color: var(--muted); font-size: .95rem; }

.contact-inner { text-align: center; }
.contact-inner .eyebrow::after { margin-inline: auto; }
.contact-inner .section-lead { margin-inline: auto; }
.mail-line { margin-top: 14px; font-weight: 600; }

/* footer */
.site-footer { background: var(--foot-bg); color: var(--foot-fg); padding: 32px 0; }
.footer-inner { display: flex; gap: 20px; align-items: center; }
.footer-inner img { background: var(--plate); border-radius: 12px; padding: 4px; flex: none; }
.footer-inner p { margin: 0 0 4px; font-size: .95rem; }
.f-name { font-weight: 700; font-size: 1.05rem !important; }
.f-tag { color: var(--hair); font-weight: 700; }

/* responsive */
/* ปุ่มเปลี่ยนภาษา (ลิงก์ธรรมดา) */
.lang-switch ul { display: flex; gap: 4px; list-style: none; flex-wrap: wrap; }
.lang-switch a { display: block; padding: 4px 12px; border: 2px solid var(--cream-2); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem; line-height: 1.6; }
.lang-switch a:hover { background: var(--cream-2); }
.lang-switch a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: var(--cream); }

@media (max-width: 800px) {
  .hero-inner, .concept-inner { grid-template-columns: 1fr; }
  .hero-figure { order: -1; }
  .hero-figure img { max-width: 340px; }
  .hero-scene { max-width: 340px; }
  .section { padding: 48px 0; }
  .js .menu-toggle { display: inline-flex; }
  .js .site-nav { display: none; width: 100%; }
  .js .site-nav.is-open { display: block; }
  .js .site-nav ul { flex-direction: column; padding-bottom: 8px; }
  .lang-switch { width: 100%; }
  .footer-inner { flex-direction: column; text-align: center; }
}

/* ปุ่มเสียงอลิสมุมขวาล่างของนามบัตร (แยกจากปุ่มพลิกบัตร) + วงแหวนกระเพื่อมตอนพูด (พี่ขอ 2026-11-07 23:34 · 23:37) */
.bizcard-wrap { --cream: #FFFDF4; --cream-2: #FBF3DC; --navy: #1C3557; --muted: #3E5575; position: relative; width: min(420px, 100%); margin: 28px auto 12px; }
.bizcard-wrap .bizcard { margin: 0; width: 100%; }
.voice-btn { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 2px solid var(--gold); background: var(--cream); color: var(--navy); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(28,53,87,.25); }
.voice-btn[hidden] { display: none; }
.voice-btn svg { width: 22px; height: 22px; fill: currentColor; }
.voice-btn .ico-wave { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.voice-btn .ico-stop, .voice-btn[aria-pressed="true"] .ico-play { display: none; }
.voice-btn[aria-pressed="true"] .ico-stop { display: block; }
.voice-btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.bc-avatar-ring { position: relative; display: block; width: 32%; max-width: 110px; flex: none; }
.bc-avatar-ring .bc-avatar { width: 100%; max-width: none; }
.bc-avatar-ring::before, .bc-avatar-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--gold); opacity: 0; pointer-events: none; }
.is-speaking .bc-avatar-ring::before { animation: alice-ripple 1.6s ease-out infinite; }
.is-speaking .bc-avatar-ring::after { animation: alice-ripple 1.6s ease-out .8s infinite; }
@keyframes alice-ripple { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.55); opacity: 0; } }
/* จอแคบ: รูปชิดขอบบัตร ⇒ วงแหวนขยายน้อยลงไม่ให้ล้นขอบ (ภาพจริงที่ 360 · 2026-11-07) */
@keyframes alice-ripple-sm { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.3); opacity: 0; } }
@media (max-width: 420px) {
  .is-speaking .bc-avatar-ring::before, .is-speaking .bc-avatar-ring::after { animation-name: alice-ripple-sm; }
}
.voice-script { width: min(420px, 100%); margin: 6px auto 0; text-align: left; color: var(--muted); }
.voice-script summary { cursor: pointer; color: var(--navy); font-weight: 600; }
.voice-script p { margin: 8px 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bizcard-inner { transition: none; }
  .is-speaking .bc-avatar-ring::before, .is-speaking .bc-avatar-ring::after { animation: none; }
  .is-speaking .bc-avatar { box-shadow: 0 0 0 4px var(--hair), 0 0 18px 6px rgba(243,200,75,.7); }
  .hero-scene:not(.is-video) .scene-art { animation: none; }
  .blink { display: none; }
  .steam { display: none; }
}

/* คำถามที่พบบ่อย */
.faq-list { display: grid; gap: 16px; margin-top: 24px; max-width: 820px; }
.faq-item { background: var(--surface); border: 2px solid var(--cream-2); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 16px 20px; }
.faq-item h3 { margin: 0 0 .4em; }
.faq-item p { margin: 0; color: var(--muted); }
.section-tint + .section-tint { border-top: 2px solid var(--gold); }
h1 { text-wrap: balance; }


/* ===== ธีมสีตามช่วงเวลา (assets/time.js ตั้ง <html data-time> · เปลี่ยนพร้อมฉากส่วนบน) · day = ชุด :root ด้านบน ===== */
:root { color-scheme: light; }
:root[data-time="morning"] { --cream: #F5FBFD; --cream-2: #E2F0F6; --navy: #1C3557; --muted: #38506F; --surface: #FDFFFF; --header-bg: rgba(245,251,253,.96); }
:root[data-time="evening"] { --cream: #FFF2E1; --cream-2: #FAE0C0; --navy: #2A2C4F; --muted: #4B4560; --surface: #FFF9F0; --header-bg: rgba(255,242,225,.96); }
:root[data-time="relax"] { --cream: #F2E6D2; --cream-2: #E6D3B5; --navy: #26304A; --muted: #4A3E33; --surface: #F9F0E1; --header-bg: rgba(242,230,210,.96); }
:root[data-time="night"] { color-scheme: dark; --cream: #0F1C30; --cream-2: #182A45; --navy: #F7EEDA; --muted: #C4D0E2; --surface: #1A2D4A; --header-bg: rgba(15,28,48,.96); --foot-bg: #091322; --foot-fg: #F7EEDA; }
/* โหมดมืด: โลโก้หัวเว็บวางบนแผ่นครีมให้เห็นชัด · ขอบการ์ดใช้เส้นทองบาง ๆ */
:root[data-time="night"] .brand img { background: var(--plate); border-radius: 12px; padding: 3px; }
html { transition: none; }

/* หัวข้อค่อย ๆ ขึ้นทีละคำ (มีเฉพาะเมื่อ JS ทำงาน: time.js ใส่ .js) · ใช้ opacity ⇒ ความสูงไม่กระโดด
   failsafe: ถ้า site.js ไม่ทำงาน หัวข้อจะโผล่เองใน 2.5 วิ (ไม่ซ่อนถาวร) */
.js .type-reveal:not(.type-ready) { opacity: 0; animation: type-failsafe 0s 2.5s forwards; }
@keyframes type-failsafe { to { opacity: 1; } }
.js .type-reveal .type-w { opacity: 0; transition: opacity .18s ease-out; }
.js .type-reveal .type-w.is-on { opacity: 1; }
.type-caret { display: inline-block; position: relative; width: 0; height: 1em; vertical-align: text-bottom; }
.type-caret::before { content: ""; position: absolute; left: 3px; top: .1em; bottom: .05em; width: 3px; background: var(--gold); animation: type-caret 0.8s steps(1) infinite; }
@keyframes type-caret { 50% { opacity: 0; } }

/* ปุ่มคัดลอกอีเมล + กล่องข้อความอลิส (ล่างกลางจอ · มุมขวาล่างเว้นไว้ให้อลิสตัวเล็ก) */
.copy-mail { display: none; margin-left: 10px; padding: 4px 16px; font: inherit; font-size: .95rem; font-weight: 700; color: var(--navy); background: transparent; border: 2px solid var(--gold); border-radius: 999px; cursor: pointer; }
.js .copy-mail { display: inline-block; }
.copy-mail:hover { background: var(--cream-2); }
.alice-toast { position: fixed; left: 50%; bottom: 20px; z-index: 80; width: max-content; max-width: min(92vw, 460px); padding: 12px 20px; border: 2px solid var(--gold); border-radius: 16px; background: var(--navy); color: var(--cream); font-weight: 600; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .25s, transform .25s, visibility 0s .25s; pointer-events: none; }
.alice-toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s, transform .25s, visibility 0s; }
@media (prefers-reduced-motion: reduce) {
  .type-reveal, .type-reveal .type-w { opacity: 1 !important; animation: none !important; transition: none !important; }
  .type-caret { display: none; }
  .alice-toast, .alice-toast.is-show { transition: none; transform: translate(-50%, 0); }
}

/* ===== รอบ B · อลิสตัวเล็กมุมขวาล่าง "เดินตามผู้ชม" (พี่อนุมัติ 2026-11-08 08:15) ===== */
/* ข้อความในฟองเป็นไกด์ที่เตรียมไว้ ไม่ใช่แชทสด (ป้าย .guide-label) · ไม่มี JS ⇒ ซ่อน · z-index ต่ำกว่า .alice-toast (80) */
.alice-guide { position: fixed; right: 14px; bottom: 14px; z-index: 60; display: none; flex-direction: row-reverse; align-items: flex-end; gap: 14px; max-width: calc(100vw - 28px); pointer-events: none; }
.js .alice-guide { display: flex; }
.guide-art { --lash: 1px; --blink-dur: 7.3s; --blink-delay: -2.2s; position: relative; flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--cream-2); box-shadow: 0 0 0 3px var(--gold), 0 6px 16px rgba(0,0,0,.25); animation: guide-float 4.5s ease-in-out infinite alternate; }
.guide-img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transition: opacity .2s ease; }
.alice-guide.is-swap .guide-img { opacity: 0; }
.guide-art .blink { border-radius: 50%; }
@keyframes guide-float { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.guide-bubble { position: relative; width: max-content; max-width: min(270px, calc(100vw - 130px)); padding: 10px 14px 9px; border: 2px solid var(--gold); border-radius: 16px; background: var(--surface); color: var(--navy); box-shadow: 0 6px 18px rgba(0,0,0,.2); pointer-events: auto; }
.guide-bubble::after { content: ""; position: absolute; right: -8px; bottom: 24px; width: 12px; height: 12px; background: var(--surface); border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); rotate: 45deg; }
.guide-status { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 2px 10px; border-radius: 999px; background: var(--cream-2); color: var(--navy); font-size: .78rem; font-weight: 700; line-height: 1.4; transition: opacity .2s ease; }
.guide-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: guide-dot 1.6s ease-in-out infinite; }
@keyframes guide-dot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.guide-line { display: block; margin: 0; font-size: .92rem; line-height: 1.5; transition: opacity .2s ease; }
.alice-guide.is-swap .guide-status, .alice-guide.is-swap .guide-line { opacity: 0; }
.guide-label { display: block; margin: 6px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.guide-toggle { position: absolute; top: -10px; right: -8px; z-index: 1; width: 28px; height: 28px; padding: 0; border: 2px solid var(--gold); border-radius: 50%; background: var(--cream); color: var(--navy); font: inherit; font-size: 1.1rem; font-weight: 700; line-height: 1; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.guide-toggle::before { content: ""; position: absolute; inset: -8px; }
.guide-toggle:hover { background: var(--cream-2); }
.guide-toggle:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.alice-guide.is-collapsed .guide-bubble { display: none; }
.alice-guide.is-collapsed .guide-art::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); border: 2px solid var(--surface); animation: guide-dot 1.6s ease-in-out infinite; }
.js .site-footer { padding-bottom: 84px; }
/* ตำแหน่ง/เอียง/สีผิวเปลือกตาของอลิสตัวเล็ก 7 ท่า · วัดจากรูปที่ครอปแล้ว (assets/guide/<ท่า>.jpg · % ของกรอบวงกลม) */
.alice-guide [data-state="speaking"] .eyelid-l { left: 42.8%; top: 46.5%; width: 10%; height: 6%; rotate: -12deg; --lid-a: rgb(255, 196, 155); --lid-b: rgb(251, 192, 151); }
.alice-guide [data-state="speaking"] .eyelid-r { left: 63%; top: 43.5%; width: 10.5%; height: 6%; rotate: -10deg; --lid-a: rgb(255, 190, 150); --lid-b: rgb(252, 186, 146); }
.alice-guide [data-state="tool"] .eyelid-l { left: 35.5%; top: 44.5%; width: 9%; height: 6%; rotate: 10deg; --lid-a: rgb(255, 204, 166); --lid-b: rgb(253, 200, 162); }
.alice-guide [data-state="tool"] .eyelid-r { left: 55%; top: 48.2%; width: 10%; height: 5.5%; rotate: -3deg; --lid-a: rgb(255, 194, 156); --lid-b: rgb(254, 190, 152); }
.alice-guide [data-state="thinking"] .eyelid-l { left: 39.4%; top: 46.8%; width: 9.5%; height: 5.5%; rotate: -8deg; --lid-a: rgb(252, 189, 147); --lid-b: rgb(248, 185, 143); }
.alice-guide [data-state="thinking"] .eyelid-r { left: 58.5%; top: 42.5%; width: 11%; height: 6%; rotate: -14deg; --lid-a: rgb(255, 189, 147); --lid-b: rgb(254, 185, 143); }
.alice-guide [data-state="web"] .eyelid-l { left: 43%; top: 47%; width: 9.5%; height: 5.5%; rotate: 8deg; --lid-a: rgb(255, 195, 153); --lid-b: rgb(254, 191, 149); }
.alice-guide [data-state="web"] .eyelid-r { left: 63%; top: 51.5%; width: 10%; height: 5.5%; rotate: 8deg; --lid-a: rgb(255, 186, 145); --lid-b: rgb(252, 182, 141); }
.alice-guide [data-state="writing"] .eyelid-l { left: 44.2%; top: 47%; width: 11%; height: 6.5%; rotate: 5deg; --lid-a: rgb(255, 193, 147); --lid-b: rgb(254, 189, 143); }
.alice-guide [data-state="writing"] .eyelid-r { left: 65.3%; top: 44.8%; width: 9.5%; height: 6%; rotate: -10deg; --lid-a: rgb(231, 169, 118); --lid-b: rgb(227, 165, 114); }
.alice-guide [data-state="ask"] .eyelid-l { left: 42.5%; top: 50%; width: 11.3%; height: 6%; rotate: 3deg; --lid-a: rgb(255, 190, 143); --lid-b: rgb(251, 186, 139); }
.alice-guide [data-state="ask"] .eyelid-r { left: 63.5%; top: 44%; width: 10%; height: 5.8%; rotate: -10deg; --lid-a: rgb(255, 188, 142); --lid-b: rgb(252, 184, 138); }
.alice-guide [data-state="agent"] .eyelid-l { left: 38%; top: 45%; width: 9.5%; height: 5.5%; rotate: 8deg; --lid-a: rgb(255, 197, 159); --lid-b: rgb(251, 193, 155); }
.alice-guide [data-state="agent"] .eyelid-r { left: 54.8%; top: 41.5%; width: 10%; height: 5.3%; rotate: -10deg; --lid-a: rgb(252, 191, 153); --lid-b: rgb(248, 187, 149); }
@media (max-width: 599px) {
  .alice-guide { right: 10px; bottom: 10px; gap: 12px; }
  .guide-art { width: 56px; height: 56px; }
  .guide-bubble { max-width: calc(100vw - 110px); }
}
@media (prefers-reduced-motion: reduce) {
  .alice-guide, .guide-art, .guide-img, .guide-status, .guide-line { animation: none !important; transition: none !important; }
  .guide-status::before, .alice-guide.is-collapsed .guide-art::after { animation: none; opacity: 1; }
}

/* ===== เนื้อหารายวัน (alice-daily · AI เขียน + AI ตรวจ) · ฟองบันทึก · การ์ดเรื่อง · สมุด · หน้าเรื่อง/คลัง ===== */
/* ใช้ตัวแปรสีเดิม ⇒ ทำงานกับธีมตามเวลา (:root[data-time=…]) · ไม่มี style= ในหน้า */
.hero-diary { position: relative; margin: 4px 0 20px; padding: 12px 16px; max-width: 36em; border: 2px solid var(--gold); border-radius: 18px; background: var(--surface); color: var(--navy); font-size: .98rem; line-height: 1.6; box-shadow: 0 4px 14px rgba(28,53,87,.08); animation: diary-in .5s ease-out both; }
.hero-diary::before { content: ""; position: absolute; left: 28px; top: -9px; width: 14px; height: 14px; background: var(--surface); border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); rotate: 45deg; }
.hero-diary-tag { display: inline-block; margin-right: 6px; padding: 1px 10px; border-radius: 999px; background: var(--cream-2); font-size: .82rem; font-weight: 700; }
.hero-diary-text { overflow-wrap: anywhere; }
@keyframes diary-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; margin-top: 24px; }
@media (min-width: 900px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news-card { display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--cream-2); border-top: 4px solid var(--gold); border-radius: var(--radius); padding: 20px; box-shadow: 0 4px 14px rgba(28,53,87,.06); }
.news-meta { margin: 0 0 8px; color: var(--muted); font-size: .92rem; }
.news-meta .badge { margin-left: 0; margin-right: 6px; }
.news-card h3 { margin: 0 0 .4em; font-size: 1.1rem; overflow-wrap: anywhere; }
.news-card h3 a { color: var(--navy); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.news-snippet { margin: 0; color: var(--muted); font-size: .95rem; overflow-wrap: anywhere; }
.news-more { margin: 24px 0 0; }

.diary-list { display: grid; gap: 14px; margin-top: 24px; max-width: 820px; }
.diary-entry { background: var(--surface); border: 2px solid var(--cream-2); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 14px 18px; }
.diary-meta { margin: 0 0 4px; color: var(--muted); font-size: .88rem; font-weight: 600; }
.diary-text { margin: 0; overflow-wrap: anywhere; }

.story-wrap { padding: 32px 0 64px; max-width: 820px; }
.story-crumbs { margin: 0 0 20px; color: var(--muted); font-size: .95rem; }
.news-story h1, .news-archive h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); overflow-wrap: anywhere; }
.news-story h2, .news-archive h2 { margin-top: 1.6em; font-size: clamp(1.25rem, 3vw, 1.5rem); }
.ai-note { margin: 0 0 1.2em; padding: 8px 14px; border-left: 4px solid var(--gold); background: var(--cream-2); border-radius: 8px; color: var(--navy); font-size: .95rem; }
.story-todo { margin: 0; padding-left: 1.4em; }
.story-todo li { margin: 0 0 .5em; overflow-wrap: anywhere; }
.story-source { overflow-wrap: anywhere; }
.archive-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.archive-item { padding: 10px 14px; background: var(--surface); border: 2px solid var(--cream-2); border-radius: 12px; overflow-wrap: anywhere; }
.archive-item .badge { margin-left: 0; }
@media (max-width: 400px) {
  .hero-diary { padding: 10px 12px; font-size: .94rem; }
  .news-card, .diary-entry { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-diary { animation: none; }
}