@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');

:root{--bg:#10100f;--panel:#191918;--text:#f6f3ec;--muted:#aaa79e;--line:#34332f;--accent:#d8f36a;--max:1160px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Noto Sans KR',system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.header{height:72px;padding:0 max(18px,calc((100vw - var(--max))/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff15;background:#10100ff2;position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#171812;font-size:21px;font-weight:900}
.brand strong,.brand small{display:block}
.brand strong{font-size:14px;letter-spacing:.02em}
.brand small{font-size:9px;color:var(--muted);letter-spacing:.13em}
.header-button{border:1px solid #ffffff40;border-radius:999px;padding:10px 15px;font-size:12px;font-weight:700}
.header-button span{color:var(--accent);margin-left:8px}
.hero{min-height:560px;position:relative;display:flex;align-items:center;overflow:hidden;padding:70px max(22px,calc((100vw - var(--max))/2))}
.hero-photo{position:absolute;inset:0;background:linear-gradient(90deg,#10100ff5 0%,#10100fc9 48%,#10100f40 100%),linear-gradient(0deg,#10100f 0%,transparent 45%),url('./public/images/hero.jpg') center/cover no-repeat}
.hero-content{position:relative;z-index:1;max-width:560px}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--accent);margin:0 0 13px}
.hero h1{font-size:clamp(44px,7vw,76px);line-height:1.13;letter-spacing:-.065em;margin:0;font-weight:900}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-description{font-size:14px;color:#d0cec6;line-height:1.9;margin:23px 0 28px}
.primary-button{display:inline-flex;align-items:center;gap:28px;background:var(--accent);color:#171812;padding:14px 18px;border-radius:6px;font-size:13px;font-weight:800}
.primary-button span{font-size:17px}
.hero-caption{position:absolute;right:22px;bottom:22px;font-size:9px;letter-spacing:.15em;color:#dedbd2}
.section{max-width:var(--max);margin:auto;padding:78px 24px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:28px}
.section-heading h2,.reservation-intro h2{font-size:clamp(31px,4vw,44px);line-height:1.2;letter-spacing:-.05em;margin:0;font-weight:900}
.section-heading .eyebrow{margin-bottom:9px}
.section-note{font-size:11px;color:var(--muted);margin:0}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.menu-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.menu-card.featured{grid-column:span 2;display:grid;grid-template-columns:1.2fr 1fr}
.photo-button{position:relative;display:block;width:100%;padding:0;border:0;overflow:hidden;background:#252521;aspect-ratio:4/3;cursor:zoom-in;text-align:left}
.menu-card.featured .photo-button{height:100%;min-height:250px;aspect-ratio:auto}
.menu-photo{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.photo-button:hover .menu-photo{transform:scale(1.035)}
.photo-tag{position:absolute;top:12px;left:12px;background:#10100fc9;color:white;padding:5px 8px;border-radius:4px;font-size:9px;letter-spacing:.1em}
.menu-info{padding:16px}
.menu-card.featured .menu-info{display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,4vw,38px)}
.menu-category{font-size:9px;letter-spacing:.14em;color:var(--accent);font-weight:800;margin:0 0 7px}
.menu-info h3{font-size:16px;letter-spacing:-.035em;margin:0 0 7px;font-weight:800}
.menu-card.featured h3{font-size:clamp(20px,2.5vw,28px)}
.menu-description{font-size:11px;color:var(--muted);line-height:1.7;margin:0 0 14px}
.price{font-size:18px;font-weight:900;color:var(--accent);margin:0}
.menu-footnote{font-size:10px;color:var(--muted);margin:17px 0 0}
.reservation-section{background:#eae9e2;color:#171714;padding:74px max(24px,calc((100vw - var(--max))/2));display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,85px)}
.reservation-intro .eyebrow{color:#59612d}
.reservation-intro h2{margin-bottom:17px}
.reservation-intro>p:not(.eyebrow):not(.privacy-note){font-size:13px;line-height:1.9;color:#5f5e57}
.info-row{display:flex;align-items:center;gap:13px;padding:16px 0;border-bottom:1px solid #d1d0c7}
.info-row:first-of-type{margin-top:24px;border-top:1px solid #d1d0c7}
.info-row>span{font-size:12px;font-weight:900;color:#7b852e}
.info-row strong,.info-row small{display:block}
.info-row strong{font-size:13px}
.info-row small{font-size:11px;color:#6d6b63;margin-top:3px}
.privacy-note{font-size:10px;color:#77756d;line-height:1.7;margin-top:24px}
.reservation-form{background:#fff;padding:clamp(20px,4vw,38px);border-radius:11px;box-shadow:0 14px 50px #0000000a}
.form-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}
.form-title h3{font-size:20px;margin:0;letter-spacing:-.04em}
.form-title>span{font-size:10px;color:#777}
.form-title b,.reservation-form label b{color:#7b852e}
.reservation-form label{display:block;font-size:11px;font-weight:800;margin-bottom:16px}
.reservation-form input:not([type=checkbox]),.reservation-form select,.reservation-form textarea{display:block;width:100%;min-width:0;margin-top:8px;padding:12px;border:1px solid #deded7;border-radius:6px;background:#fff;color:#171714;font-size:13px;outline:none}
.reservation-form input:focus,.reservation-form select:focus,.reservation-form textarea:focus{border-color:#7b852e;box-shadow:0 0 0 3px #7b852e18}
.reservation-form textarea{resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.consent{display:flex!important;align-items:flex-start;gap:9px;font-weight:500!important;line-height:1.7}
.consent input{margin:3px 0 0;accent-color:#747e2e}
.consent span{font-size:10px;color:#666}
.submit-button{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-radius:6px;background:#171714;color:white;padding:15px 17px;font-size:13px;font-weight:800;cursor:pointer}
.submit-button span{color:var(--accent);font-size:18px}
.submit-button:disabled{opacity:.55;cursor:wait}
.form-message{font-size:12px;line-height:1.7;margin:12px 0 0}
.form-message.success{color:#3e6b1d}
.form-message.error{color:#b42318}
.form-footnote{font-size:10px;color:#85837b;line-height:1.6;margin:9px 0 0}
.footer{max-width:var(--max);margin:auto;padding:25px 24px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.footer .brand-mark{width:32px;height:32px;font-size:17px}
.footer .brand strong{font-size:13px}
.footer>p,.top-link{font-size:10px;color:var(--muted)}
.image-dialog{position:relative;max-width:min(92vw,1000px);max-height:90vh;padding:0;border:1px solid #ffffff30;border-radius:10px;background:#111}
.image-dialog::backdrop{background:#000d;backdrop-filter:blur(4px)}
.image-dialog img{display:block;max-width:90vw;max-height:85vh;object-fit:contain}
.dialog-close{position:absolute;right:8px;top:8px;z-index:1;width:36px;height:36px;border:0;border-radius:50%;background:#111d;color:white;font-size:26px;cursor:pointer}
@media(min-width:850px){.menu-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.menu-card.featured{grid-column:span 2}.menu-info{padding:14px}.menu-info h3{font-size:14px}.menu-description{font-size:10px}}
@media(max-width:620px){
 .header{height:64px;padding:0 16px}.brand-mark{width:34px;height:34px;font-size:19px}.brand strong{font-size:13px}.brand small{font-size:8px}.header-button{padding:9px 12px;font-size:11px}
 .hero{min-height:500px;padding:55px 21px 75px}.hero-photo{background-position:58% center}.hero h1{font-size:47px}.hero-description{font-size:13px}.hero-caption{font-size:8px;right:17px}
 .section{padding:55px 15px}.section-heading{align-items:start}.section-note{max-width:120px;text-align:right;font-size:9px}.menu-grid{gap:9px}.menu-info{padding:11px}.menu-info h3{font-size:13px}.menu-description{font-size:10px;min-height:34px;margin-bottom:10px}.price{font-size:16px}.menu-card.featured{display:block;grid-column:span 2}.menu-card.featured .photo-button{aspect-ratio:4/3;min-height:0}.menu-card.featured .menu-info{padding:16px}.menu-card.featured h3{font-size:18px}.menu-card.featured .menu-description{min-height:0;font-size:11px}
 .reservation-section{padding:52px 15px;grid-template-columns:1fr;gap:24px}.reservation-intro h2{font-size:34px}.reservation-form{padding:20px 15px}.form-row{gap:8px}.reservation-form input:not([type=checkbox]),.reservation-form select{padding:11px 8px;font-size:12px}
 .footer{padding:22px 15px;flex-wrap:wrap}.footer>p{order:3;width:100%;margin:0}.top-link{margin-left:auto}
}


/* Live store status */
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.status-button{display:inline-flex;align-items:center;padding:13px 16px;border:1px solid #ffffff45;border-radius:6px;color:#f2f0e8;font-size:12px;font-weight:700}
.visit-status-section{padding:65px 20px;background:#181916;border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12}
.visit-status-inner{max-width:650px;margin:0 auto;text-align:center}
.visit-status-inner h2{font-size:clamp(28px,4vw,40px);letter-spacing:-.05em;margin:0 0 10px}
.status-description{font-size:13px;color:var(--muted);margin:0 0 25px}
.status-display{border:1px solid #ffffff1a;border-radius:12px;background:#20221d;padding:28px 18px}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#72e6a0;margin:0 8px 2px 0}
.status-display strong{font-size:clamp(28px,5vw,42px);letter-spacing:-.04em;color:#72e6a0}
.status-display p{font-size:13px;color:#d0cec6;margin:10px 0 0}
.status-display[data-status="two"] strong{color:#b9dc67}.status-display[data-status="two"] .status-dot{background:#b9dc67}
.status-display[data-status="one"] strong{color:#f0bf57}.status-display[data-status="one"] .status-dot{background:#f0bf57}
.status-display[data-status="full"] strong{color:#ff806e}.status-display[data-status="full"] .status-dot{background:#ff806e}
.status-display[data-status="closed"] strong{color:#aaa}.status-display[data-status="closed"] .status-dot{background:#aaa}
.status-updated{font-size:10px;color:#777970;margin:12px 0 0}
.admin-entry{border:0;background:transparent;color:#777970;font-size:10px;padding:8px;cursor:pointer}
.admin-entry:hover{color:#d4d5c9}
.admin-dialog{width:min(92vw,420px);padding:0;border:1px solid #ffffff25;border-radius:12px;background:#191a17;color:#f5f4ee;box-shadow:0 24px 90px #0008}
.admin-dialog::backdrop{background:#000c;backdrop-filter:blur(4px)}
.admin-login,.admin-controls{position:relative;padding:30px}
.admin-dialog h2{font-size:25px;margin:0 0 20px;letter-spacing:-.04em}
.admin-login label{display:block;font-size:12px;margin-bottom:8px}
.admin-login input{display:block;width:100%;padding:13px;border:1px solid #ffffff30;border-radius:6px;background:#10110f;color:#fff;font-size:16px;letter-spacing:.2em}
.admin-action,.status-options button{border:0;border-radius:6px;padding:13px;background:var(--accent);color:#171812;font-weight:800;cursor:pointer}
.admin-action{width:100%;margin-top:12px}
.admin-error{font-size:11px;color:#ff806e;min-height:15px;margin:8px 0 0}
.admin-hint{font-size:12px;color:var(--muted);margin:14px 0 0}
.status-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.status-options button:last-child{grid-column:span 2}
.status-options button:disabled{opacity:.6;cursor:wait}
.admin-save-message{font-size:11px;line-height:1.6;color:#b9dc67;min-height:16px;margin:13px 0 0}
.admin-close{position:absolute;right:10px;top:10px}
@media(max-width:620px){.hero-actions{align-items:flex-start;flex-direction:column}.status-button{font-size:11px}.visit-status-section{padding:48px 15px}.admin-login,.admin-controls{padding:26px 20px}}


/* Mobile featured set card: square image with details below */
@media(max-width:620px){
  .menu-card.featured{
    display:block;
    grid-column:span 2;
  }
  .menu-card.featured .photo-button{
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:1 / 1;
  }
  .menu-card.featured .menu-photo{
    width:100%;
    height:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
  }
  .menu-card.featured .menu-info{
    display:block;
    padding:16px;
  }
  .menu-card.featured .menu-category{margin-bottom:7px}
  .menu-card.featured .menu-info h3{font-size:17px;margin-bottom:7px}
  .menu-card.featured .menu-description{
    display:block;
    min-height:0;
    margin:0 0 12px;
    font-size:11px;
    line-height:1.7;
    overflow:visible;
    white-space:normal;
  }
  .menu-card.featured .price{display:block;font-size:17px}
}