@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap");
/* 진된장 v2 공용 디자인 시스템 — 순대실록 톤 차용 + 진된장 팔레트 */
:root{
  --ink:#1A1411;--ink2:#2A211B;--hanji:#EFE7DA;--paper:#F4EEE3;
  --red:#A83226;--red2:#872A1E;--earth:#B8966A;--gold:#C9A876;--stone:#6E6660;
  --white:#FCF9F3;--muted:#27231E;--line:rgba(26,20,17,.14);
  --serif:'Gowun Batang',"Nanum Myeongjo","Songti SC",serif;
  --sans:'Pretendard Variable',Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  --wrap:min(1200px,calc(100% - 48px));
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.72;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,.htitle{text-wrap:balance}
a{text-decoration:none;color:inherit}h1,h2,h3,p{margin:0}img{display:block;max-width:100%}
.wrap{width:var(--wrap);margin:auto}.serif{font-family:var(--serif)}.center{text-align:center}
.eyebrow{font-family:Georgia,serif;font-style:italic;letter-spacing:.08em;font-size:12px;color:var(--red)}

/* 헤더 */
.hd{position:sticky;top:0;z-index:40;background:rgba(26,20,17,.94);backdrop-filter:blur(12px)}
.hd .in{height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-family:var(--serif);font-size:23px;color:var(--hanji);display:flex;gap:9px;align-items:center}
.logo b{color:var(--red);font-weight:400}
.nav{display:flex;gap:24px;font-size:14px;font-weight:600;color:rgba(239,231,218,.72)}
.nav a:hover,.nav a.on{color:var(--hanji)}
.nav a.cross{margin-left:6px;padding:8px 16px;border-radius:999px;background:var(--red);color:#fff;font-weight:700;line-height:1}
.nav a.cross:hover{background:#8E2A20;color:#fff}
.hd .cross{padding:9px 16px;background:var(--red);color:#fff;font-size:12.5px;font-weight:700;border-radius:999px}
.hd .cross:hover{background:var(--red2)}

/* 히어로 */
.hero{position:relative;background:var(--ink) center/cover no-repeat;min-height:420px;overflow:hidden;display:flex;align-items:center;color:var(--hanji)}
.hero.tall{min-height:560px}
.hero:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,15,12,.9),rgba(20,15,12,.58) 58%,rgba(20,15,12,.2))}
.hero .in{position:relative;z-index:3;padding:80px 0}
.hero .hanja{position:absolute;right:6%;top:50%;transform:translateY(-50%);font-family:var(--serif);font-size:min(34vw,440px);color:rgba(201,168,118,.1);z-index:1;line-height:.8}
.hero h1{font-family:var(--serif);font-size:clamp(34px,4.2vw,58px);line-height:1.28;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .sub{color:rgba(239,231,218,.8);font-size:16px;margin-top:20px;max-width:46ch}

/* 섹션 */
.sec{padding:100px 0}
.sec.dark{background:var(--ink);color:var(--hanji)}
.sec.white{background:var(--white)}
.htitle{font-family:var(--serif);font-size:clamp(28px,3.2vw,44px);line-height:1.3}
.sub{color:var(--muted);font-size:15px}.sec.dark .sub{color:rgba(239,231,218,.62)}
.rule{width:46px;height:2px;background:var(--red);margin:22px auto 0}
.shead{margin-bottom:48px}

/* 버튼 */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;background:var(--red);color:#fff;border:1px solid var(--red);border-radius:999px;font-size:14px;font-weight:700}
.btn:hover{background:var(--red2);border-color:var(--red2)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--ink);color:var(--hanji);border-color:var(--ink)}
.btn.onink{background:transparent;color:var(--hanji);border-color:rgba(239,231,218,.4)}
.btn.onink:hover{background:var(--hanji);color:var(--ink)}

/* 그리드 */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* 카드 */
.card{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:30px}
.card .n{font-family:Georgia,serif;font-style:italic;color:var(--gold);font-size:13.5px}
.card h3{font-family:var(--serif);font-size:22px;margin:9px 0 11px}
.card p{color:var(--muted);font-size:16px;line-height:1.64}
.card.dark{background:var(--ink2);border-color:rgba(201,168,118,.16);color:var(--hanji)}
.card.dark h3{color:var(--gold)}.card.dark p{color:rgba(239,231,218,.66)}
.card.on{background:var(--red);color:#fff;border-color:var(--red)}.card.on h3{color:#fff}.card.on p{color:rgba(255,255,255,.85)}

/* 메뉴 아이템 (원형컷) */
.mitem{text-align:center}
.mitem .ph{width:200px;height:200px;border-radius:50%;overflow:hidden;margin:auto;border:1px solid rgba(201,168,118,.35)}
.mitem .ph img{width:100%;height:100%;object-fit:cover}
.mitem h3{font-family:var(--serif);font-size:21px;margin:16px 0 7px}
.mitem .price{color:var(--red);font-weight:700;font-size:15px}
.mitem p{color:var(--muted);font-size:15.5px;line-height:1.62;margin-top:8px;max-width:26ch;margin-left:auto;margin-right:auto}

/* 메뉴 그룹 (식사/요리) — 창업·브랜드 공용 컴포넌트 */
.mgroup{margin-top:56px}
.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mglabel{display:flex;align-items:baseline;justify-content:center;gap:12px;margin-bottom:26px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mglabel b{font-family:var(--serif);font-size:25px;color:var(--ink)}
.mglabel span{font-size:14.5px;color:var(--muted)}
.mcard{text-align:center}
.mcard .ph{height:220px;border-radius:3px;overflow:hidden;margin-bottom:16px}
.mcard .ph img{width:100%;height:100%;object-fit:cover}
.mcard h3{font-family:var(--serif);font-size:21px;margin-bottom:7px}
.mcard span{font-size:15px;color:var(--muted);line-height:1.5}
.seasonal{margin-top:38px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.seasonal span{padding:10px 17px;border:1px solid var(--line);border-radius:999px;font-size:14.5px;color:var(--muted);background:var(--white)}
@media(max-width:760px){.menu{grid-template-columns:1fr 1fr}}

/* 표 (비용) */
.table{background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.row{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;padding:18px 24px;border-bottom:1px solid var(--line);align-items:center}
.row:last-child{border:0}.row span{color:var(--muted);font-size:14.5px}
.row strong{text-align:right;color:var(--ink);font-weight:700}
.row.total{background:var(--hanji)}.row.total span{color:var(--ink);font-weight:800}
.row.total strong{font-family:var(--serif);font-size:24px;color:var(--red)}

/* 매장 리스트 */
.slist{display:grid;gap:12px}
.sitem{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 22px;border:1px solid var(--line);border-radius:4px;background:var(--white)}
.sitem:hover{border-color:var(--red)}
.sitem strong{font-size:16.5px}.sitem span{display:block;margin-top:4px;color:var(--muted);font-size:12.5px}
.sitem a{padding:9px 14px;border:1px solid rgba(26,20,17,.25);border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.sitem a:hover{background:var(--ink);color:var(--hanji)}

/* 세로태그 / 원형컷 유틸 */
.vtag{writing-mode:vertical-rl;text-orientation:upright;background:var(--red);color:#fff;padding:12px 7px;font-family:var(--serif);font-size:15px;letter-spacing:.06em;display:inline-block}
.note{padding:20px 22px;background:var(--white);border-left:2px solid var(--red);border-radius:0 4px 4px 0;color:var(--muted);font-size:14px}

/* 붓글씨 브랜드 밴드 */
.voice{position:relative;overflow:hidden;background:var(--ink)}
.voice img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.voice .in{position:relative;z-index:2;padding:120px 0;text-align:center;color:#fff}
.voice h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,46px);text-shadow:0 2px 20px rgba(0,0,0,.5)}
.voice p{margin-top:14px;color:rgba(255,255,255,.85);text-shadow:0 1px 12px rgba(0,0,0,.6)}

/* 푸터 */
.ft{background:#140F0C;color:rgba(239,231,218,.7);padding:56px 0 40px}
.ft .in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ft .logo{font-size:20px;margin-bottom:12px}
.ft p{font-size:12.5px;line-height:1.8;max-width:44ch}
.ft .cross{color:var(--gold);font-size:12.5px}

@media(max-width:900px){
  .nav,.hd .cross{display:none}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .hero .in{padding:60px 0}
  .sec{padding:70px 0}
  .row{grid-template-columns:1fr;gap:6px}.row strong{text-align:left}
}

/* 모바일 햄버거 네비 */
.burger{display:none;background:none;border:0;color:var(--hanji);font-size:23px;cursor:pointer;line-height:1;padding:4px}
.mobmenu{display:none;position:fixed;top:70px;left:0;right:0;background:var(--ink);border-top:1px solid rgba(239,231,218,.12);flex-direction:column;padding:8px 24px 20px;z-index:39}
.mobmenu.open{display:flex}
.mobmenu a{color:var(--hanji);padding:15px 2px;font-size:15px;font-weight:600;border-bottom:1px solid rgba(239,231,218,.08)}
.mobmenu a.cross{color:var(--red);border-bottom:0;margin-top:8px;font-weight:700}
@media(max-width:900px){.burger{display:block}}

/* ===== 디바이스별 표현 (반응형 + device-specific) ===== */
.mobile-only{display:none}
@media(max-width:900px){ .pc-only{display:none !important} .mobile-only{display:revert} }

/* 모바일 하단 고정 상담 CTA 바 (순대실록 모바일 세일즈 패턴) */
.mcta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:8px;padding:10px 14px;
  background:rgba(20,15,12,.96);backdrop-filter:blur(8px);border-top:1px solid rgba(201,168,118,.28)}
.mcta .go{flex:1;text-align:center;padding:15px;border-radius:4px;font-weight:800;font-size:15px;background:var(--red);color:#fff}
.mcta .go:hover{background:var(--red2)}
.mcta .call{flex:0 0 56px;display:grid;place-items:center;border-radius:4px;background:var(--ink2);color:var(--hanji);border:1px solid rgba(201,168,118,.3);font-size:19px}
@media(max-width:900px){ .mcta{display:flex} }