/* =========================================================
   FOUND — Lost & Found, โรงเรียนขลุงรัชดาภิเษก
   Design concept: the physical claim tag / luggage tag.
   Every record is a "tag" — a spine with a punched grommet,
   a body with the details, and a torn ticket-stub ID.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --paper:      #EDE6D6;
  --paper-dark: #D9CBA3;
  --white:      #FBF8F0;
  --ink:        #262420;
  --ink-soft:   #5B564C;
  --navy:       #1F3A5A;
  --navy-dark:  #152941;
  --mustard:    #D6A233;
  --lost:       #B8442B;
  --found:      #3F7A5E;
  --matched:    #7A5C99;
  --returned:   #5B6B73;

  --radius-tag: 4px 14px 14px 4px;
  --shadow-tag: 3px 4px 0 rgba(38,36,32,.14);
  --shadow-tag-hover: 4px 6px 0 rgba(38,36,32,.18);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Kanit', sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(38,36,32,.05) 1px, transparent 0);
  background-size: 22px 22px;
}

h1,h2,h3,h4{
  font-family:'Kanit', sans-serif;
  margin:0 0 .4em;
  color:var(--navy-dark);
  letter-spacing:.2px;
}
a{ color:inherit; }
.mono{ font-family:'JetBrains Mono', monospace; }

.wrap{ max-width:1120px; margin:0 auto; padding:0 20px; }

/* -------------------- focus / motion -------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--mustard);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* -------------------- top nav -------------------- */
.site-header{
  background:var(--navy);
  color:var(--white);
  position:sticky; top:0; z-index:40;
  border-bottom:3px dashed var(--mustard);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:66px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Kanit', sans-serif; font-weight:800; font-size:1.35rem;
  text-decoration:none; color:var(--white);
}
.brand__mark{
  width:34px; height:34px; border-radius:4px 10px 10px 4px;
  background:var(--mustard);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy-dark); font-weight:800; font-size:.95rem;
  box-shadow: 2px 2px 0 rgba(0,0,0,.25);
}
.brand__sub{
  display:block; font-family:'Kanit',sans-serif; font-weight:400;
  font-size:.68rem; color:#C9D5E0; letter-spacing:.3px;
}
nav.main-nav{ display:flex; gap:2px; }
nav.main-nav a{
  text-decoration:none; color:#DCE4EC;
  font-weight:600; font-size:.86rem;
  padding:9px 10px; border-radius:6px;
  white-space:nowrap;
}
nav.main-nav a:hover{ background:rgba(255,255,255,.08); color:var(--white); }
nav.main-nav a.active{ background:var(--mustard); color:var(--navy-dark); }
.nav-toggle{ display:none; }

@media (max-width:760px){
  nav.main-nav{
    position:absolute; top:66px; left:0; right:0;
    background:var(--navy-dark); flex-direction:column;
    padding:8px; gap:2px; display:none;
    border-bottom:3px dashed var(--mustard);
  }
  nav.main-nav.open{ display:flex; }
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; background:none; border:2px solid #3A5776;
    border-radius:8px; color:var(--white); font-size:1.2rem; cursor:pointer;
  }
}

/* -------------------- hero -------------------- */
.hero{
  padding:56px 0 40px;
  position:relative;
  overflow:hidden;
}
.hero .wrap{
  display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;
}
.hero__eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:.78rem; color:var(--lost);
  background:var(--white); border:1px dashed var(--ink-soft);
  display:inline-block; padding:4px 10px; border-radius:20px;
  margin-bottom:14px;
}
.hero h1{
  font-size:clamp(2rem, 4vw, 3.1rem);
  line-height:1.15;
}
.hero h1 em{
  font-style:normal; color:var(--lost);
  text-decoration: underline wavy var(--mustard) 3px;
  text-underline-offset:6px;
}
.hero p.lede{
  color:var(--ink-soft); font-size:1.08rem; max-width:46ch;
  margin-bottom:26px;
}
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* hanging tag illustration */
.hero__tag{
  justify-self:center;
  width:230px; aspect-ratio:1/1.25;
  position:relative;
  transform:rotate(-4deg);
}
.hero__tag::before{
  /* string */
  content:''; position:absolute; left:50%; top:-34px;
  width:2px; height:40px; background:var(--ink-soft);
  transform:translateX(-50%) rotate(6deg);
}
.hero__tag-body{
  background:var(--white);
  border-radius:16px;
  box-shadow:6px 8px 0 rgba(38,36,32,.18);
  height:100%; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--paper-dark);
  padding:18px;
}
.hero__tag-hole{
  width:20px; height:20px; border-radius:50%;
  background:var(--paper);
  box-shadow:0 0 0 4px var(--white), 0 0 0 5px var(--paper-dark);
  margin-bottom:14px;
}
.hero__tag-body .big{
  font-family:'Kanit',sans-serif; font-weight:800; font-size:2.6rem; color:var(--navy);
}
.hero__tag-body .small{
  font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--ink-soft);
  text-align:center; margin-top:6px;
}

@media (max-width:820px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero__tag{ order:-1; width:170px; margin:0 auto 10px; }
}

/* -------------------- buttons -------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Kanit',sans-serif; font-weight:700; font-size:.96rem;
  padding:12px 20px; border-radius:8px;
  border:2px solid transparent; cursor:pointer;
  text-decoration:none;
  position:relative; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn::after{
  content:'';
  position:absolute; top:0; left:-75%;
  width:45%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg);
  transition:left .55s ease;
  pointer-events:none;
}
.btn:hover{ transform:translateY(-3px); box-shadow:4px 5px 0 rgba(38,36,32,.22); }
.btn:hover::after{ left:130%; }
.btn:active{ transform:translateY(-1px); }

.btn--lost{
  background:var(--lost); color:var(--white);
  box-shadow:3px 3px 0 rgba(38,36,32,.25);
}
.btn--found{
  background:var(--found); color:var(--white);
  box-shadow:3px 3px 0 rgba(38,36,32,.25);
}
.btn--ghost{
  background:var(--white); color:var(--navy);
  border-color:var(--navy);
}
.btn--ghost:hover{ background:var(--navy); color:var(--white); }
.btn--small{ padding:7px 12px; font-size:.82rem; border-radius:6px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* -------------------- stat strip -------------------- */
.stat-strip{
  background:var(--white);
  border-top:3px dashed var(--paper-dark);
  border-bottom:3px dashed var(--paper-dark);
  padding:26px 0;
}
.stat-strip .wrap{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.stat{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; padding:10px 8px; border-right:1px dashed var(--paper-dark);
  text-decoration:none; color:inherit; cursor:pointer;
}
.stat:last-child{ border-right:none; }
.stat .num{
  font-family:'Kanit',sans-serif; font-weight:800; font-size:2.1rem; color:var(--navy);
  line-height:1;
}
.stat .label{ font-size:.85rem; color:var(--ink-soft); }
@media (max-width:700px){
  .stat-strip .wrap{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-right:none; border-bottom:1px dashed var(--paper-dark); padding-bottom:16px; }
}

/* -------------------- section headings -------------------- */
.section{ padding:44px 0; }
.section__head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:22px; gap:10px; flex-wrap:wrap;
}
.section__head h2{ font-size:1.5rem; }
.section__head .see-all{
  font-weight:700; font-size:.88rem; color:var(--navy);
  text-decoration:none; border-bottom:2px solid var(--mustard);
}

/* -------------------- filter bar -------------------- */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:var(--white); border:1px solid var(--paper-dark);
  border-radius:12px; padding:14px; margin-bottom:24px;
}
.filter-bar input[type="search"]{
  flex:1 1 220px;
}
.chip-group{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  font-size:.82rem; font-weight:600; padding:7px 13px;
  border-radius:20px; border:1.5px solid var(--paper-dark);
  background:var(--paper); cursor:pointer; color:var(--ink-soft);
}
.chip.active{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.chip:hover{ border-color:var(--navy); }

/* -------------------- form controls -------------------- */
label{ font-weight:600; font-size:.88rem; display:block; margin-bottom:6px; color:var(--navy-dark); }
input, select, textarea{
  font-family:'Kanit',sans-serif; font-size:.96rem;
  padding:10px 12px; border:1.5px solid var(--paper-dark);
  border-radius:8px; background:var(--white); color:var(--ink);
  width:100%;
}
textarea{ resize:vertical; min-height:80px; }
input:focus, select:focus, textarea:focus{ border-color:var(--navy); }

/* -------------------- tag card (signature component) -------------------- */
.tag-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr));
  gap:20px;
}
.tag-card{
  display:flex;
  background:var(--white);
  border-radius:var(--radius-tag);
  box-shadow:var(--shadow-tag);
  overflow:hidden;
  border:1px solid var(--paper-dark);
  transition:box-shadow .15s ease, transform .15s ease;
  cursor:pointer;
}
.tag-card:hover{ box-shadow:var(--shadow-tag-hover); transform:translateY(-2px); }

.tag-card__spine{
  width:28px; flex-shrink:0; position:relative;
  background:var(--ink-soft);
  border-right:2px dashed rgba(255,255,255,.55);
}
.tag-card__spine::after{
  content:''; position:absolute; top:18px; left:50%;
  transform:translateX(-50%);
  width:11px; height:11px; border-radius:50%;
  background:var(--white);
  box-shadow:0 0 0 2px rgba(0,0,0,.18) inset;
}
.tag-card--lost .tag-card__spine{ background:var(--lost); }
.tag-card--found .tag-card__spine{ background:var(--found); }
.tag-card--matched .tag-card__spine{ background:var(--matched); }
.tag-card--returned .tag-card__spine{ background:var(--returned); }

.tag-card__body{ flex:1; padding:16px; min-width:0; }
.tag-card__thumb{
  width:100%; height:120px; border-radius:8px; margin-bottom:12px;
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; border:1px dashed var(--paper-dark);
  overflow:hidden;
}
.tag-card__thumb img{ width:100%; height:100%; object-fit:contain; }

.tag-card__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.tag-card__title{ font-family:'Kanit',sans-serif; font-weight:700; font-size:1.02rem; margin:0 0 2px; }
.tag-card__id{ font-size:.72rem; color:var(--ink-soft); }

.badge{
  font-size:.68rem; font-weight:700; letter-spacing:.4px;
  padding:4px 9px; border-radius:20px; white-space:nowrap;
  color:var(--white);
}
.badge--lost{ background:var(--lost); }
.badge--found{ background:var(--found); }
.badge--matched{ background:var(--matched); }
.badge--returned{ background:var(--returned); }

.tag-card__meta{ margin-top:10px; font-size:.86rem; color:var(--ink-soft); }
.tag-card__meta div{ display:flex; gap:6px; margin-bottom:3px; }
.tag-card__meta b{ color:var(--ink); font-weight:600; }

.tag-card__stub{
  margin-top:12px; padding-top:10px;
  border-top:1px dashed var(--paper-dark);
  display:flex; justify-content:space-between; align-items:center;
}
.tag-card__cat{
  font-size:.74rem; font-weight:700; color:var(--navy);
  background:var(--paper); padding:3px 9px; border-radius:6px;
}
.tag-card__more{
  font-size:.78rem; font-weight:700; color:var(--ink-soft);
}
.tag-card:hover .tag-card__more{ color:var(--navy); }

.empty-state{
  text-align:center; padding:60px 20px; color:var(--ink-soft);
  border:2px dashed var(--paper-dark); border-radius:14px; background:var(--white);
}
.empty-state .glyph{ font-size:2.4rem; margin-bottom:10px; display:block; }

/* -------------------- report form -------------------- */
.type-switch{
  display:flex; border:2px solid var(--navy); border-radius:10px; overflow:hidden;
  margin-bottom:26px; max-width:420px;
}
.type-switch button{
  flex:1; padding:13px; border:none; background:var(--white); cursor:pointer;
  font-family:'Kanit',sans-serif; font-weight:700; font-size:1rem; color:var(--navy);
}
.type-switch button.active.type--lost{ background:var(--lost); color:var(--white); }
.type-switch button.active.type--found{ background:var(--found); color:var(--white); }

.form-card{
  background:var(--white); border:1px solid var(--paper-dark);
  border-radius:14px; padding:26px; box-shadow:var(--shadow-tag);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.form-grid .full{ grid-column:1 / -1; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

.upload-box{
  border:2px dashed var(--paper-dark); border-radius:10px; padding:18px;
  text-align:center; cursor:pointer; color:var(--ink-soft); font-size:.88rem;
  background:var(--paper);
  outline:none; margin:0;
}
.upload-box:hover{ border-color:var(--navy); }
.upload-preview{ margin-top:10px; max-width:160px; border-radius:8px; display:none; }

.note-box{
  font-size:.82rem; color:var(--ink-soft); background:var(--paper);
  border:1px dashed var(--paper-dark); border-radius:8px; padding:10px 12px;
  margin-top:16px;
}

.form-actions{ margin-top:22px; display:flex; gap:12px; align-items:center; }

/* match result callout */
.match-result{
  margin-top:26px; padding:18px; border-radius:12px;
  background:var(--paper); border:2px dashed var(--mustard);
}
.match-result h3{ margin-bottom:10px; font-size:1.05rem; }
.match-score{
  display:inline-block; font-family:'JetBrains Mono',monospace;
  font-weight:700; background:var(--navy); color:var(--white);
  padding:3px 10px; border-radius:20px; font-size:.82rem;
}
.match-caution{
  margin-top:12px; font-size:.82rem; color:var(--ink-soft);
  border-top:1px dashed var(--paper-dark); padding-top:10px;
}

/* -------------------- admin -------------------- */
.admin-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:30px;
}
@media (max-width:760px){ .admin-grid{ grid-template-columns:repeat(2,1fr); } }
.admin-stat{
  background:var(--white); border-radius:12px; padding:18px;
  border:1px solid var(--paper-dark); box-shadow:var(--shadow-tag);
  border-left:6px solid var(--navy);
  display:flex; flex-direction:column; gap:6px;
  cursor:pointer;
}
.admin-stat.lost{ border-left-color:var(--lost); }
.admin-stat.found{ border-left-color:var(--found); }
.admin-stat.matched{ border-left-color:var(--matched); }
.admin-stat.returned{ border-left-color:var(--returned); }
.admin-stat.active{
  box-shadow:0 0 0 3px var(--mustard), var(--shadow-tag);
  transform:translateY(-2px);
}
.admin-stat .num{ font-family:'Kanit',sans-serif; font-weight:800; font-size:1.9rem; line-height:1; }
.admin-stat .label{ font-size:.82rem; color:var(--ink-soft); }

table.data-table{
  width:100%; border-collapse:collapse; background:var(--white);
  border-radius:12px; overflow:hidden; border:1px solid var(--paper-dark);
}
table.data-table th, table.data-table td{
  padding:11px 14px; text-align:left; font-size:.88rem;
  border-bottom:1px solid var(--paper);
}
table.data-table th{
  background:var(--navy); color:var(--white); font-weight:600;
  font-family:'Kanit',sans-serif; font-size:.82rem;
}
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table tr:hover td{ background:var(--paper); }

.match-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px; border:1px solid var(--paper-dark);
  border-radius:10px; background:var(--white); margin-bottom:10px; flex-wrap:wrap;
}
.match-row__pair{ display:flex; align-items:center; gap:10px; font-size:.9rem; flex-wrap:wrap; }
.match-row__arrow{ color:var(--mustard); font-weight:800; }

.tabs{ display:flex; gap:6px; margin-bottom:20px; border-bottom:2px solid var(--paper-dark); }
.tabs button{
  background:none; border:none; padding:10px 16px; cursor:pointer;
  font-family:'Kanit',sans-serif; font-weight:600; color:var(--ink-soft);
  border-bottom:3px solid transparent; margin-bottom:-2px;
}
.tabs button.active{ color:var(--navy); border-bottom-color:var(--mustard); }

/* -------------------- footer -------------------- */
footer.site-footer{
  background:var(--navy-dark); color:#B9C6D3;
  padding:30px 0; margin-top:60px; font-size:.85rem;
  border-top:4px solid var(--mustard);
}
footer.site-footer .wrap{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.visit-counter{
  font-size:.78rem; color:#8FA3B8;
}

/* toast */
.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--navy-dark); color:var(--white); padding:13px 22px;
  border-radius:30px; font-weight:600; font-size:.9rem;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:all .25s ease;
  z-index:100; border:2px solid var(--mustard);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* =========================================================
   HOVER & MICRO-INTERACTIONS
   ========================================================= */

/* nav links — mustard underline slides in under the label */
nav.main-nav a{
  position:relative;
  transition:color .2s ease, background .2s ease;
}
nav.main-nav a::after{
  content:'';
  position:absolute; left:14px; right:14px; bottom:5px; height:2px;
  background:var(--mustard);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
nav.main-nav a:hover::after{ transform:scaleX(1); }
nav.main-nav a.active::after{ display:none; }

/* hero tag — gentle float + deeper shadow */
.hero__tag{ transition:transform .3s ease; }
.hero__tag:hover{ transform:rotate(-2deg) translateY(-6px); }
.hero__tag:hover .hero__tag-body{ box-shadow:8px 12px 0 rgba(38,36,32,.22); }
.hero__tag-body{ transition:box-shadow .3s ease; }
.hero__tag-hole{ transition:box-shadow .25s ease; }
.hero__tag:hover .hero__tag-hole{ box-shadow:0 0 0 4px var(--white), 0 0 0 6px var(--mustard); }

/* stat numbers — pop + color flip on hover */
.stat{ transition:transform .2s ease; border-radius:10px; }
.stat .num{ transition:transform .25s ease, color .25s ease; }
.stat:hover{ transform:translateY(-3px); }
.stat:hover .num{ transform:scale(1.14); color:var(--mustard); }

/* tag card — image zoom + spine glow, on top of the existing lift */
.tag-card__thumb{ overflow:hidden; }
.tag-card__thumb img{ transition:transform .35s ease; display:block; }
.tag-card:hover .tag-card__thumb img{ transform:scale(1.08); }
.tag-card__spine::after{ transition:box-shadow .25s ease; }
.tag-card:hover .tag-card__spine::after{
  box-shadow:0 0 0 2px rgba(0,0,0,.18) inset, 0 0 0 5px rgba(255,255,255,.5);
}
.tag-card__title{ transition:color .2s ease; }
.tag-card:hover .tag-card__title{ color:var(--navy); }

/* chips — lift + shadow */
.chip{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease; }
.chip:hover{ transform:translateY(-2px); box-shadow:2px 3px 0 rgba(38,36,32,.14); border-color:var(--navy); color:var(--navy); }
.chip.active:hover{ color:var(--white); }

/* see-all links */
.section__head .see-all{ transition:color .18s ease, border-color .18s ease; }
.section__head .see-all:hover{ color:var(--lost); border-color:var(--lost); }

/* admin stat cards — lift with a widening left accent */
.admin-stat{ transition:transform .2s ease, box-shadow .2s ease, border-left-width .2s ease; }
.admin-stat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-tag-hover); border-left-width:10px; }

/* match rows */
.match-row{ transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.match-row:hover{ transform:translateY(-2px); box-shadow:var(--shadow-tag); border-color:var(--mustard); }

/* tabs — underline grows from center */
.tabs button{ position:relative; transition:color .2s ease; }
.tabs button::before{
  content:''; position:absolute; left:50%; right:50%; bottom:-2px; height:3px;
  background:var(--mustard); transition:left .2s ease, right .2s ease;
}
.tabs button:hover::before{ left:8px; right:8px; }
.tabs button.active::before{ left:0; right:0; background:var(--mustard); }

/* type switch buttons */
.type-switch button{ transition:background .2s ease, color .2s ease; }
.type-switch button:not(.active):hover{ background:var(--paper); }

/* table rows */
table.data-table tr{ transition:background .15s ease; }
.admin-row{ cursor:pointer; }
.admin-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.btn--danger{ border-color:var(--lost); color:var(--lost); }
.btn--danger:hover{ background:var(--lost); color:var(--white); }

/* upload box */
.upload-box{ transition:border-color .2s ease, background .2s ease, transform .2s ease; }
.upload-box:hover{ background:var(--white); transform:translateY(-2px); }

/* brand mark in header — small tilt on hover */
.brand__mark{ transition:transform .25s ease; }
.brand:hover .brand__mark{ transform:rotate(-8deg) scale(1.06); }

/* =========================================================
   ITEM DETAIL MODAL
   ========================================================= */

.modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(21,20,17,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.modal-overlay.show{ opacity:1; pointer-events:auto; }

.modal-box{
  background:var(--white);
  border-radius:16px;
  max-width:560px; width:100%;
  max-height:88vh; overflow-y:auto;
  position:relative;
  box-shadow:8px 12px 0 rgba(38,36,32,.25);
  border:1px solid var(--paper-dark);
  transform:translateY(12px) scale(.98);
  transition:transform .2s ease;
}
.modal-overlay.show .modal-box{ transform:translateY(0) scale(1); }

.modal-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  border:none; background:var(--white); color:var(--ink);
  font-size:1rem; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.modal-close:hover{ background:var(--lost); color:var(--white); }

.modal-content{ padding:0 0 22px; }

.modal-thumb{
  width:100%; max-height:440px;
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  border-radius:16px 16px 0 0;
  overflow:hidden;
}
.modal-thumb img{ max-width:100%; max-height:440px; width:auto; height:auto; object-fit:contain; display:block; }
.modal-thumb-icon{ font-size:4rem; }

.modal-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:10px; padding:18px 22px 0;
}
.modal-title{ font-size:1.25rem; margin:0 0 2px; }

.modal-detail{
  padding:12px 22px 0; margin:0; color:var(--ink-soft);
  font-size:.94rem; line-height:1.6;
}

.modal-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px 14px;
  padding:16px 22px 0; font-size:.9rem;
}

.modal-section{
  margin:16px 22px 0; padding-top:14px;
  border-top:1px dashed var(--paper-dark);
  font-size:.9rem;
}
.modal-section__label{
  font-family:'Kanit',sans-serif; font-weight:600; font-size:.78rem;
  color:var(--navy); text-transform:uppercase; letter-spacing:.4px;
  margin-bottom:6px;
}
.modal-section div{ margin-bottom:4px; }