/* Goody Home Non-WP (Lolipop) - Amaneku-inspired calm & friendly UI */
:root{
  --bg: #f6fbf9;
  --surface: #ffffff;
  --ink: #1f2a28;
  --muted: #5a6b68;
  --line: rgba(31,42,40,.10);
  --shadow: 0 18px 50px rgba(16,33,28,.08);
  --shadow-sm: 0 10px 24px rgba(16,33,28,.08);
  --brand: #146a5b;
  --brand-2: #0f5448;
  --accent: #e6f3ef;
  --badge: #e9f6f2;
  --radius: 18px;
  --radius-lg: 26px;
  --max: 1120px;
  --gap: 24px;
  --font: ui-sans-serif, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font); color:var(--ink); background: linear-gradient(180deg, var(--bg), #ffffff 55%); line-height:1.75;}
a{color:inherit; text-decoration:none;}
a:hover{opacity:.92;}
img{max-width:100%; height:auto;}
.container{max-width:var(--max); margin:0 auto; padding:0 18px;}
.skiplink{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skiplink:focus{left:18px; top:12px; width:auto; height:auto; padding:8px 12px; background:#fff; border:1px solid var(--line); border-radius:10px; z-index:9999;}

header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:12px; min-width:240px;}
.brand .logo{
  width:44px; height:44px; border-radius:14px;
  background: linear-gradient(135deg,#ffffff,#f3fbf8);
  border:1px solid var(--line);
  display:grid; place-items:center;
  box-shadow: 0 8px 20px rgba(16,33,28,.06);
}
.brand .name{display:flex; flex-direction:column; line-height:1.2;}
.brand .name .title{font-weight:800; letter-spacing:.02em;}
.brand .name .sub{font-size:12px; color:var(--muted); margin-top:3px;}

nav.primary{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
nav.primary a{
  padding:10px 10px; border-radius:12px; color:var(--ink);
  font-weight:700; font-size:14px;
}
nav.primary a[aria-current="page"]{color:var(--brand); background:rgba(20,106,91,.08);}
nav.primary .cta{background:var(--brand); color:#fff; padding:10px 14px; border-radius:999px; box-shadow:var(--shadow-sm);}

.header-actions{display:flex; align-items:center; gap:10px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:999px; border:1px solid rgba(20,106,91,.25); font-weight:800;}
.btn.primary{background:var(--brand); color:#fff; border-color:transparent;}
.btn.ghost{background:transparent; color:var(--brand);}
.btn.small{padding:9px 12px; font-size:13px;}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:var(--badge); color:var(--brand); border:1px solid rgba(20,106,91,.12); font-weight:800; font-size:13px;}
.kicker{color:var(--brand); font-weight:900; font-size:13px; letter-spacing:.06em;}

.hero{padding:54px 0 18px;}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:var(--gap); align-items:start;}
.hero h1{font-size:46px; line-height:1.15; margin:10px 0 14px;}
.hero p.lead{font-size:16px; color:var(--muted); margin:0 0 18px;}
.hero .bullets{margin:18px 0 0; padding-left:18px; color:var(--ink);}
.hero .bullets li{margin:10px 0;}
.hero-cta{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:14px;}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:22px;}
.card h3{margin:0 0 10px; font-size:18px;}
.card p{margin:0; color:var(--muted);}
.card .meta{color:var(--muted); font-size:13px;}
.card-list{display:grid; gap:14px;}
.pills{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px;}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);}

.section{padding:42px 0;}
.section h2{font-size:34px; margin:0 0 12px;}
.section p{color:var(--muted); margin:0 0 18px;}
.section .subgrid{margin-top:18px;}

.illus{position:absolute; right:12px; top:16px; opacity:.22; pointer-events:none;}
.illus.bottom{right:18px; bottom:14px; top:auto;}
.hero-wrap{position:relative; border-radius:34px; overflow:hidden; background: radial-gradient(900px 260px at 12% 20%, rgba(20,106,91,.10), transparent 55%),
                               radial-gradient(520px 220px at 92% 84%, rgba(20,106,91,.10), transparent 55%);}
.hero-wrap .container{position:relative;}

.footer{padding:34px 0 46px; border-top:1px solid var(--line); background:rgba(255,255,255,.7);}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:var(--gap); align-items:start;}
.small{font-size:13px; color:var(--muted);}
.footer a{color:var(--brand); font-weight:800;}
hr.sep{border:none; border-top:1px solid var(--line); margin:20px 0;}

.form{display:grid; gap:12px;}
.field{display:grid; gap:6px;}
input, select, textarea{
  width:100%; padding:12px 14px; border-radius:14px;
  border:1px solid var(--line); font:inherit;
  background:#fff;
}
textarea{min-height:110px; resize:vertical;}
.note{font-size:13px; color:var(--muted);}

.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:16px; border:1px solid var(--line);}
.table th,.table td{padding:12px 12px; border-bottom:1px solid var(--line); text-align:left; font-size:14px;}
.table th{background:rgba(20,106,91,.06); color:var(--ink);}
.table tr:last-child td{border-bottom:none;}
.tag{display:inline-flex; padding:6px 10px; border-radius:999px; border:1px solid rgba(20,106,91,.18); background:rgba(20,106,91,.06); color:var(--brand); font-weight:900; font-size:12px;}
.alert{padding:12px 14px; border-radius:16px; border:1px solid rgba(176,64,64,.22); background:rgba(176,64,64,.06); color:#7a1d1d;}
.ok{padding:12px 14px; border-radius:16px; border:1px solid rgba(20,106,91,.25); background:rgba(20,106,91,.08); color:var(--brand);}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; }
  .hero h1{font-size:38px;}
  nav.primary{display:none;}
  .footer-grid{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .illus{display:none;}
}

.mobile-nav{display:none;}
@media (max-width:980px){
  .mobile-nav{display:flex; align-items:center; gap:10px;}
  .drawer{display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:60;}
  .drawer.open{display:block;}
  .drawer .panel{position:absolute; right:0; top:0; width:min(360px, 92vw); height:100%; background:#fff; padding:16px; border-left:1px solid var(--line);}
  .drawer a{display:block; padding:12px 10px; border-radius:12px; font-weight:800;}
  .drawer a:hover{background:rgba(20,106,91,.06);}
}
/* === Drawer override FINAL (do not remove) === */
/* Ensure drawer itself is hidden by default */
#drawer{display:none;}
#drawer.open{display:block;}

/* Old rules may force .panel[role][aria-label] { display:none; } => override it on mobile */
@media (max-width:980px){
  #drawer.open .panel{display:block !important;}
}

/* Hide drawer on non-mobile widths (prevents layout pollution) */
@media (min-width:981px){
  #drawer{display:none !important;}
}

/* Lock scroll when open */
body.is-drawer-open{overflow:hidden;}

/* === Week Picker (reserve) === */
.wkpicker{margin:14px 0; padding:14px; border:1px solid var(--line); border-radius:16px; background:#fff;}
.wkpicker__bar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.wkpicker__btn{min-width:44px; height:40px; border-radius:12px; border:1px solid var(--line); background:#fff; font-weight:900; cursor:pointer;}
.wkpicker__title{font-weight:900;}

.wkpicker__grid{display:flex; gap:8px; overflow:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
.wkpicker__day{min-width:64px; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:10px 6px; border-radius:14px; border:1px solid var(--line); background:#fff; font-weight:900; cursor:pointer;}
.wkpicker__day.is-selected{outline:2px solid var(--primary); background:rgba(20,106,91,.06);}
.wkpicker__dow{font-size:12px; opacity:.7;}
.wkpicker__md{font-size:14px;}
/* === reserve-css-v2 === */

/* header: staff small link (top-right) */
.staff-link{
  font-size:12px;
  font-weight:700;
  opacity:.75;
  margin-left:12px;
  white-space:nowrap;
}
.staff-link:hover{opacity:1; text-decoration:underline;}

/* reserve copy blocks */
.reserve-lead{
  margin:10px 0 14px;
  color:var(--muted);
  line-height:1.7;
  max-width:900px;
}
.reserve-notes{
  background:rgba(20,106,91,.05);
  border:1px solid rgba(20,106,91,.12);
  padding:12px 14px;
  border-radius:14px;
  max-width:900px;
}
.reserve-notes ul{margin:0; padding-left:18px;}
.reserve-notes li{margin:6px 0;}

/* reserve form spacing + clean inputs */
main form{max-width:900px;}
main form .field{margin:14px 0;}
main form label{font-weight:800; margin-bottom:6px; display:block;}
main form input, main form select, main form textarea{
  width:100%;
  border-radius:14px;
  border:1px solid var(--line);
  padding:12px 12px;
}
main form textarea{min-height:140px;}
main form select{background-color:#fff;}

/* illustration near H1 (desktop only) */
.reserve-h1{position:relative; padding-right:120px;}
.reserve-h1:after{
  content:"";
  position:absolute;
  right:0;
  top:-8px;
  width:110px;
  height:110px;
  background:url("../img/illus-talk.svg") no-repeat center/contain;
  opacity:.9;
}
@media (max-width:980px){
  .reserve-h1{padding-right:0;}
  .reserve-h1:after{display:none;}
}

/* === nav-actions-right (cta + staff in primary nav) === */
nav.primary{
  display:flex;
  align-items:center;
  gap:18px;
}
nav.primary .cta{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
}
nav.primary .staff-link{
  font-size:12px;
  font-weight:700;
  opacity:.75;
  white-space:nowrap;
}
nav.primary .staff-link:hover{opacity:1; text-decoration:underline;}
/* === HEADER_RESERVE_OVERRIDES START === */
@media (min-width:981px){
  nav.primary{display:flex; align-items:center; gap:18px;}
  nav.primary a{white-space:nowrap;}
  nav.primary a.cta{margin-left:auto;} /* 关键：把 CTA 推到最右 */
  nav.primary a[href*="/admin"]{font-size:12px; font-weight:700; opacity:.75;}
  nav.primary a[href*="/admin"]:hover{opacity:1;}
}
/* === HEADER_RESERVE_OVERRIDES END === */