/* ============================================================
   ระบบสีและตัวอักษร — แก้ที่นี่ที่เดียว มีผลทั้งหน้าบ้านและหลังบ้าน
   ============================================================ */
:root{
  --ink:#17142B; --paper:#F3F1FF; --white:#fff;
  --grape:#6C4DF6; --pink:#FF4D8D; --lemon:#FFD23F; --mint:#2EE6A8; --sky:#46C6FF;
  --danger:#E23B3B;
  --border:3px solid var(--ink);
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --display:'Bai Jamjuree', system-ui, sans-serif;
  --body:'IBM Plex Sans Thai', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html, body{ overflow-x:clip; } /* กันของตกแต่งที่ยื่นออกนอกจอทำให้เกิดแถบเลื่อนแนวนอน */
body{
  font-family:var(--body); background:var(--paper); color:var(--ink); line-height:1.7;
  background-image:linear-gradient(rgba(23,20,43,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(23,20,43,.05) 1px,transparent 1px);
  background-size:28px 28px;
}
a{ color:inherit; }
img{ max-width:100%; height:auto; }
:focus-visible{ outline:3px solid var(--pink); outline-offset:3px; }
.wrap{ width:min(1080px,92vw); margin-inline:auto; }
.hidden{ display:none !important; }

/* ---------- ปุ่ม ---------- */
.btn{
  display:inline-block; text-decoration:none; font-family:var(--body);
  font-weight:600; font-size:.95rem; padding:.6rem 1.2rem; cursor:pointer;
  border:var(--border); box-shadow:var(--shadow); background:var(--white); color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn-primary{ background:var(--grape); color:#fff; }
.btn-sm{ padding:.25rem .7rem; font-size:.82rem; box-shadow:var(--shadow-sm); }
.btn-danger{ background:var(--danger); color:#fff; }

/* ---------- NAV ---------- */
.nav{ position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:var(--border); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; }
.nav-logo{ font-family:var(--mono); font-weight:600; background:var(--ink); color:var(--paper); padding:.25rem .6rem; text-decoration:none; }
.nav-links{ display:flex; gap:.4rem; flex-wrap:wrap; }
.nav-links a{ font-family:var(--mono); font-size:.85rem; text-decoration:none; padding:.25rem .6rem; border:2px solid transparent; border-radius:99px; }
.nav-links a:hover{ border-color:var(--ink); background:var(--lemon); }

/* ---------- SECTION ---------- */
.section{ padding:5rem 0; }
.eyebrow{ font-family:var(--mono); font-size:.85rem; font-weight:600; color:var(--grape); margin-bottom:.4rem; }
.section h2{ font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,5vw,2.9rem); line-height:1.15; margin-bottom:2rem; }
.section h2 mark{ background:var(--lemon); padding:0 .2em; color:inherit; }

/* ---------- HERO ---------- */
.hero{ padding:4.5rem 0 3rem; }
.hero-grid{ display:grid; gap:2.5rem; grid-template-columns:1.1fr .9fr; align-items:center; }
.hero-hi{ display:inline-block; font-family:var(--mono); font-size:.9rem; background:var(--mint); border:var(--border); box-shadow:var(--shadow-sm); padding:.2rem .7rem; margin-bottom:1.2rem; }
.hero h1{ font-family:var(--display); font-weight:700; font-size:clamp(2.6rem,8vw,4.4rem); line-height:1.05; letter-spacing:-.02em; margin-bottom:.8rem; }
.hero h1 em{ font-style:normal; background:linear-gradient(180deg,transparent 62%,var(--pink) 62%); }
.hero-role{ font-size:1.15rem; max-width:38ch; margin-bottom:1.6rem; }
.hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; }

.term{ border:var(--border); box-shadow:var(--shadow); background:var(--ink); color:#EDEBFF; font-family:var(--mono); font-size:.88rem; transform:rotate(-1.5deg); }
.term-bar{ display:flex; align-items:center; gap:.4rem; padding:.5rem .7rem; border-bottom:3px solid #3A3560; }
.dot{ width:12px; height:12px; border-radius:50%; }
.term-title{ margin-left:.5rem; font-size:.75rem; opacity:.6; }
.term-body{ padding:1rem; min-height:210px; }
.term-body p{ margin-bottom:.3rem; word-break:break-word; }
.term-prompt{ color:var(--mint); } .term-key{ color:var(--lemon); }
.caret{ display:inline-block; width:9px; height:1.05em; background:var(--mint); vertical-align:-2px; animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- ทักษะ ---------- */
.stickers{ display:flex; flex-wrap:wrap; gap:.6rem; }
.sticker{ font-family:var(--mono); font-size:.85rem; font-weight:500; padding:.35rem .8rem; border:var(--border); box-shadow:var(--shadow-sm); background:var(--white); }
.sticker:nth-child(4n+1){ background:var(--lemon); transform:rotate(-2deg); }
.sticker:nth-child(4n+2){ background:var(--mint); transform:rotate(1.5deg); }
.sticker:nth-child(4n+3){ background:var(--sky); transform:rotate(-1deg); }
.sticker:nth-child(4n+4){ background:var(--pink); color:#fff; transform:rotate(2deg); }

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; gap:2rem; grid-template-columns:1.2fr 1fr; align-items:start; }
.about-text p{ margin-bottom:1rem; max-width:60ch; white-space:pre-line; }
.panel{ border:var(--border); box-shadow:var(--shadow); background:var(--white); padding:1.4rem; }
.panel h3{ font-family:var(--mono); font-size:.9rem; font-weight:600; margin-bottom:1rem; color:var(--grape); }

/* ---------- TIMELINE ---------- */
.timeline{ position:relative; padding-left:2.2rem; }
.timeline::before{ content:''; position:absolute; left:7px; top:.6rem; bottom:.6rem; width:3px; background:var(--ink); }
.tl-item{ position:relative; margin-bottom:2.2rem; }
.tl-item:last-child{ margin-bottom:0; }
.tl-item::before{ content:''; position:absolute; left:-2.2rem; top:.45rem; width:17px; height:17px; border:var(--border); border-radius:50%; background:var(--lemon); }
.tl-item.is-edu::before{ background:var(--sky); }
.tl-date{ font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--grape); }
.tl-item h3{ font-family:var(--display); font-size:1.25rem; font-weight:700; }
.tl-org{ font-size:.95rem; opacity:.75; margin-bottom:.4rem; }
.tl-item ul{ padding-left:1.1rem; }

/* ---------- PROJECTS ---------- */
.proj-grid{ display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.card{ border:var(--border); box-shadow:var(--shadow); background:var(--white); display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease; }
.card:hover{ transform:translate(-4px,-4px); box-shadow:10px 10px 0 var(--ink); }
.card-top{ border-bottom:var(--border); padding:1.6rem 1.2rem; font-family:var(--mono); font-size:1.6rem; font-weight:600; }
.card:nth-child(3n+1) .card-top{ background:var(--mint); }
.card:nth-child(3n+2) .card-top{ background:var(--pink); color:#fff; }
.card:nth-child(3n+3) .card-top{ background:var(--sky); }
.card-body{ padding:1.2rem; flex:1; display:flex; flex-direction:column; }
.card-body h3{ font-family:var(--display); font-size:1.25rem; font-weight:700; margin-bottom:.3rem; }
.card-body p{ font-size:.95rem; margin-bottom:1rem; }
.tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:auto; margin-bottom:1rem; }
.tag{ font-family:var(--mono); font-size:.72rem; border:2px solid var(--ink); padding:.05rem .45rem; }
.card-link{ font-family:var(--mono); font-size:.85rem; font-weight:600; text-decoration:none; border-bottom:3px solid var(--lemon); align-self:flex-start; margin-right:.8rem; }
.card-link:hover{ border-bottom-color:var(--pink); }

/* ---------- ฟอร์ม ---------- */
.field{ margin-bottom:1rem; }
.field label{ display:block; font-family:var(--mono); font-size:.8rem; font-weight:600; margin-bottom:.25rem; }
.field input, .field textarea, .field select{
  width:100%; font-family:var(--body); font-size:.95rem; padding:.55rem .7rem;
  border:var(--border); background:var(--white); color:var(--ink);
}
.field textarea{ min-height:110px; resize:vertical; }
.field .hint{ font-size:.78rem; opacity:.65; margin-top:.2rem; }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.alert{ border:var(--border); box-shadow:var(--shadow-sm); padding:.7rem 1rem; margin-bottom:1rem; font-size:.9rem; }
.alert-error{ background:#FFE3E3; }
.alert-success{ background:var(--mint); }

/* ---------- CONTACT ---------- */
.contact{ border:var(--border); box-shadow:var(--shadow); background:var(--grape); color:#fff; padding:2.5rem; }
.contact h2{ color:#fff; }
.contact-grid{ display:grid; gap:2rem; grid-template-columns:1fr 1fr; align-items:start; }
.contact .field input, .contact .field textarea{ border-color:#fff; }
.contact .btn{ background:#fff; }
.contact .btn:hover{ background:var(--lemon); }
.contact-links{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; }

.footer{ border-top:var(--border); padding:1.6rem 0; font-family:var(--mono); font-size:.8rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* ---------- หลังบ้าน ---------- */
.admin-shell{ padding:2rem 0 4rem; }
.login-box{ max-width:400px; margin:6rem auto; border:var(--border); box-shadow:var(--shadow); background:var(--white); padding:2rem; }
.login-box h1{ font-family:var(--display); font-size:1.6rem; margin-bottom:1.2rem; }
.tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; border-bottom:var(--border); padding-bottom:1rem; }
.tab{ font-family:var(--mono); font-size:.85rem; font-weight:600; padding:.35rem .8rem; border:var(--border); background:var(--white); cursor:pointer; box-shadow:var(--shadow-sm); }
.tab[aria-selected="true"]{ background:var(--lemon); }
.admin-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.admin-head h2{ font-family:var(--display); font-size:1.5rem; }
.row-list{ display:flex; flex-direction:column; gap:.8rem; }
.row{ border:var(--border); box-shadow:var(--shadow-sm); background:var(--white); padding:.9rem 1rem; display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.row-main{ flex:1; min-width:220px; }
.row-title{ font-weight:600; }
.row-meta{ font-family:var(--mono); font-size:.78rem; opacity:.7; }
.row-actions{ display:flex; gap:.4rem; }
.row.is-unread{ background:#FFFBEA; }
.editor{ border:var(--border); box-shadow:var(--shadow); background:var(--white); padding:1.4rem; margin-bottom:1.5rem; }
.editor h3{ font-family:var(--display); font-size:1.2rem; margin-bottom:1rem; }
.grid-2{ display:grid; gap:0 1rem; grid-template-columns:1fr 1fr; }
.empty{ font-family:var(--mono); font-size:.9rem; opacity:.6; padding:1.5rem; text-align:center; border:3px dashed rgba(23,20,43,.3); }

/* ---------- แผงย่อลิงก์ ---------- */
.admin-layout{ display:grid; grid-template-columns:280px 1fr; gap:2rem; align-items:start; padding:2rem 0 4rem; }
.admin-layout .admin-shell{ padding:0; }
.links-side{ border:var(--border); box-shadow:var(--shadow); background:var(--white); padding:1.2rem; position:sticky; top:5rem; }
.links-side h3{ font-family:var(--display); font-size:1.05rem; margin-bottom:.8rem; }
.links-side .field{ margin-bottom:.6rem; }
.links-list{ margin-top:1rem; display:flex; flex-direction:column; gap:.6rem; }
.link-item{ border:2px solid var(--ink); box-shadow:var(--shadow-sm); padding:.5rem .6rem; font-size:.8rem; }
.link-item .short{ font-family:var(--mono); font-weight:600; word-break:break-all; }
.link-item .dest{ display:block; font-size:.72rem; opacity:.65; word-break:break-all; margin:.15rem 0 .4rem; }
.link-item .link-meta{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.link-item .clicks{ font-family:var(--mono); font-size:.72rem; opacity:.7; margin-left:auto; }

/* ---------- อนิเมชั่นหลังบ้าน ---------- */
.login-box{ animation:pop-in .4s cubic-bezier(.2,.9,.3,1.3) backwards; }
@keyframes pop-in{ from{ opacity:0; transform:scale(.94) translateY(var(--slide,14px)); } }
.panel-view:not(.hidden){ animation:panel-in .3s ease; }
@keyframes panel-in{ from{ opacity:0; transform:translateY(var(--slide,10px)); } }
.row, .link-item{ animation:row-in .35s ease backwards; }
.row:nth-child(2), .link-item:nth-child(2){ animation-delay:.05s; }
.row:nth-child(3), .link-item:nth-child(3){ animation-delay:.1s; }
.row:nth-child(4), .link-item:nth-child(4){ animation-delay:.15s; }
.row:nth-child(n+5), .link-item:nth-child(n+5){ animation-delay:.2s; }
@keyframes row-in{ from{ opacity:0; transform:translateX(calc(var(--slide,12px) * -1)); } }

/* ---------- REVEAL ---------- */
/* ระยะเลื่อนของอนิเมชั่นทั้งหมด — โหมดลดการเคลื่อนไหวตั้งเป็น 0 เหลือแค่ fade */
.reveal{ opacity:0; transform:translateY(var(--slide,22px)); transition:opacity .5s ease, transform .5s ease; }
.reveal.shown{ opacity:1; transform:none; }

@media (max-width:820px){
  .hero-grid,.about-grid,.contact-grid,.grid-2,.admin-layout{ grid-template-columns:1fr; }
  .links-side{ position:static; }
  .term{ transform:none; }
  .section{ padding:3.5rem 0; }
  .contact{ padding:1.6rem 1.2rem; }
  .nav-links a{ font-size:.78rem; padding:.2rem .45rem; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  /* ลด "การเคลื่อนที่" ตามเจตนาของ setting: ระยะเลื่อนเป็น 0 เหลือ fade สั้นๆ
     ส่วนอนิเมชั่นที่วนซ้ำต่อเนื่อง (marquee, glitch, ดาว) ปิดใน themes.css */
  :root{ --slide:0px; }
}