/* 호랭이 곳간 — 최종 시안 v1.1 기반 테마 스타일 배경 이미지는 아래 '섹션 배경 지정' 블록의 --bg 주석을 해제하고 theme/tigerhouse/img/ 안에 파일을 넣으세요. 최종 수정 2026.10.05 (v63). 아래로 갈수록 나중에 덧붙인 블록이며, 같은 대상을 다룰 땐 '아래 블록이 최종값'입니다. 블록 머리 주석의 날짜·번호(①~㊿, 51~68)는 '변경내역_2026-10-03.txt' 항목 번호와 같습니다. 주요 최종 블록: 호버 아웃라인=㊺(페이드인) · 모바일 순차 활성화=㊻~㊽·54 · 로고 모션=㊾·53 02 증거 4컷=56·57·59·62 · 하프앤하프 호버=58 · 트럭/오토바이=65·66 · 게시판 페이지 번호=68 */ :root{ --red:#A8321F; --reddk:#7C2415; --redbg:#FBEEEA; --teal:#1D5B54; --tealbg:#E8F1EF; --gold:#B8862F; --goldbg:#FBF3E3; --paper:#FAF7F2; --board:#FFFFFF; --fill:#F2EEE6; --line:#E0D9CC; --line2:#EFEAE0; --ink:#1A1714; --ink2:#5B554D; --ink3:#958F84; --warn:#B45309; --warnbg:#FDF4E5; --header:68px; } *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--paper); color:var(--ink); /* 본문·UI = 고딕 / 메인 워딩 = 명조 (--serif) */ --serif:"Noto Serif KR","Noto Serif CJK KR","Nanum Myeongjo",AppleMyungjo,"Apple Myungjo",Batang,serif; font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif; -webkit-font-smoothing:antialiased; word-break:keep-all; line-height:1.6; } img{max-width:100%} /* ─── 헤더 ─────────────────────────────────────────── */ .hd{position:sticky; top:0; z-index:60; height:var(--header); background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:22px; padding:0 26px} .logo{font-weight:800; font-size:18px; letter-spacing:-.03em; line-height:1.15; white-space:nowrap} .logo small{display:block; font-size:10px; font-weight:600; color:var(--ink3); letter-spacing:.04em} .gnb{display:flex; gap:18px; flex:1; overflow:auto; scrollbar-width:none} .gnb::-webkit-scrollbar{display:none} .gnb a{color:var(--ink2); text-decoration:none; font-size:14px; font-weight:500; white-space:nowrap; padding:6px 2px; border-bottom:2px solid transparent} .gnb a[aria-current="true"]{color:var(--red); border-bottom-color:var(--red); font-weight:700} .sns{display:flex; gap:7px} .sns a{width:31px; height:31px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:10px; font-weight:700; color:var(--ink2); text-decoration:none; background:var(--board)} .sns a:hover{border-color:var(--red); color:var(--red)} .hd .tel{font-size:12px; color:var(--ink3); font-weight:600; white-space:nowrap; line-height:1.25} .hd .tel b{display:block; font-size:16px; color:var(--ink); letter-spacing:-.01em} .hd .cta{background:var(--red); color:#fff; text-decoration:none; font-size:13.5px; font-weight:700; padding:11px 20px; border-radius:999px; white-space:nowrap} /* ─── 주석 토글 ────────────────────────────────────── */ .annobar{position:fixed; left:20px; bottom:20px; z-index:70; background:var(--board); border:1px solid var(--line); border-radius:999px; box-shadow:0 8px 28px rgba(26,23,20,.14); padding:7px 7px 7px 15px; display:flex; align-items:center; gap:11px; font-size:12.5px; color:var(--ink2)} .annobar button{font:inherit; font-weight:700; cursor:pointer; border:1px solid var(--red); background:var(--red); color:#fff; border-radius:999px; padding:7px 14px} .annobar button[aria-pressed="false"]{background:var(--board); color:var(--red)} body.anno-off .anno,body.anno-off .warn,body.anno-off .req{display:none !important} /* ─── 우측 섹션 내비 ───────────────────────────────── */ /* 배경 패널 없이 눈금선만 — 현재 섹션만 라벨이 굵게 드러납니다 */ .flt{position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:55; background:none; border:0; border-radius:0; padding:0; box-shadow:none; width:132px} .flt ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px} .flt a{display:flex; align-items:center; gap:12px; text-decoration:none; padding:3px 0} .flt .dot{width:16px; height:2px; border-radius:2px; background:#D2CABB; flex:none; transition:width .4s var(--ease), height .3s var(--ease), background .3s} .flt .lb{font-style:normal; font-size:12.5px; line-height:1.3; color:var(--ink3); white-space:nowrap; opacity:0; transform:translateX(-5px); transition:opacity .35s var(--ease), transform .35s var(--ease), color .3s} .flt a:hover .dot{width:26px; background:var(--ink3)} .flt a:hover .lb{opacity:1; transform:none; color:var(--ink2)} .flt a[aria-current="true"] .dot{width:30px; height:3px; background:var(--red)} .flt a[aria-current="true"] .lb{opacity:1; transform:none; color:var(--red); font-weight:800} .flt a:focus-visible .lb{opacity:1; transform:none} .flt .top{margin-top:20px; display:flex; align-items:center; gap:12px; text-decoration:none} .flt .top .dot{width:9px; background:#D9D2C5} .flt .top:hover .dot{width:20px; background:var(--ink3)} /* ─── 모바일 칩 · 하단바 ───────────────────────────── */ .chips{display:none; position:sticky; top:var(--header); z-index:50; background:var(--board); border-bottom:1px solid var(--line); padding:9px 14px; gap:7px; overflow:auto; scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .chips a{flex:none; text-decoration:none; font-size:13px; color:var(--ink2); font-weight:500; border:1px solid var(--line); border-radius:999px; padding:6px 13px; white-space:nowrap} .chips a[aria-current="true"]{background:var(--red); border-color:var(--red); color:#fff; font-weight:700} /* 하단 고정 바 — 히어로 빠른문의가 화면에서 사라지면 올라옵니다 */ .dock{position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -6px 24px rgba(26,23,20,.09); transform:translateY(130%); transition:transform .45s var(--ease)} body.dock-on .dock{transform:none} .dock .row{max-width:1180px; margin:0 auto; display:flex; gap:8px} .dock a{flex:1 1 0; display:flex; align-items:center; justify-content:center; white-space:nowrap; text-decoration:none; font-size:14.5px; font-weight:700; color:var(--ink2); border:1px solid var(--line); border-radius:6px; padding:15px 10px; background:var(--board); transition:flex-grow .4s var(--ease), background .25s, color .25s, border-color .25s} .dock a .sub{max-width:0; overflow:hidden; opacity:0; font-size:12.5px; font-weight:500; color:var(--ink3); transition:max-width .4s var(--ease), opacity .3s var(--ease), margin .4s var(--ease)} .dock a:hover{flex-grow:2; background:var(--fill); color:var(--ink); border-color:var(--ink3)} .dock a:hover .sub{max-width:160px; opacity:1; margin-left:9px} .dock a.p{flex-grow:1.5; background:var(--red); border-color:var(--red); color:#fff} .dock a.p .sub{color:rgba(255,255,255,.8)} .dock a.p:hover{flex-grow:2.8; background:var(--reddk); border-color:var(--reddk); color:#fff} body.dock-on .annobar{bottom:94px} /* ─── 섹션 공통 ────────────────────────────────────── */ main{max-width:none; margin:0; padding:0} .sec{position:relative; overflow:hidden; padding:88px 0; background:var(--paper); scroll-margin-top:calc(var(--header) + 16px)} .sec:last-of-type{padding-bottom:104px} #hero{padding:104px 0 96px} .inner{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:0 30px} /* 배경이 없는 섹션끼리만 경계선 */ .sec + .sec{border-top:1px solid var(--line2)} .sec.has-bg + .sec, .sec + .sec.has-bg{border-top:0} /* 배경 레이어 — 이미지가 지정되면 임시 그라데이션을 대체합니다 */ .sec.has-bg::before{content:""; position:absolute; left:0; right:0; top:-6%; bottom:-6%; z-index:0; background-image:var(--bg, var(--bg-ph)); background-size:cover; background-repeat:no-repeat; background-position:var(--bg-pos, center); transform:translate3d(0,var(--by,0px),0); will-change:transform} .sec.has-bg::after{content:""; position:absolute; inset:0; z-index:1; background:var(--scrim, none)} /* 사진 위 흰 글씨 모드 */ .sec.on-dark{color:#fff; --ink:#FFFFFF; --ink2:#DFD7CC; --ink3:#B0A89D; --line:rgba(255,255,255,.26); --line2:rgba(255,255,255,.14); --board:rgba(255,255,255,.08); --fill:rgba(255,255,255,.12)} .sec.on-dark h2, .sec.on-dark .eyebrow em{color:#E8B888} .sec.on-dark .card{backdrop-filter:blur(6px)} .sec.on-dark .card.r{background:rgba(168,50,31,.26); border-color:rgba(233,160,136,.5)} .sec.on-dark .card.r h3{color:#F3C0AE} .sec.on-dark .card.t{background:rgba(29,91,84,.3); border-color:rgba(150,200,192,.45)} .sec.on-dark .card.t h3{color:#9FD4CA} .sec.on-dark .ph{border-color:rgba(255,255,255,.3)} .sec.on-dark .field{border-color:rgba(255,255,255,.2)} .sec.on-dark .btn.o{border-color:rgba(255,255,255,.55)} /* 수치·표·그래프·주석은 사진 위에서도 밝은 면 유지 (가독성 · 대비 검증값 보존) */ .sec.on-dark .chart, .sec.on-dark .pl, .sec.on-dark .faq, .sec.on-dark .form, .sec.on-dark .anno, .sec.on-dark .warn, .sec.on-dark .req{ --ink:#1A1714; --ink2:#5B554D; --ink3:#958F84; --line:#E0D9CC; --line2:#EFEAE0; --board:#FFFFFF; --fill:#F2EEE6; color:var(--ink); background:#fff} .sec.on-dark .warn{background:var(--warnbg)} .sec.on-dark .req{background:var(--tealbg)} .sec.on-dark .warn.hold{background:var(--red); color:#F7E3DE} .sec.on-dark .warn.hold b{color:#fff} /* ══════════════════════════════════════════════════════════════ 섹션 배경 지정 — 이미지가 준비되면 이 블록의 --bg 주석만 해제 예) #menu{--bg:url('../img/bg-menu.jpg'); --bg-pos:center 30%} 권장 규격: 가로 1920px 이상 · JPG 70~80% · 200KB 내외 ══════════════════════════════════════════════════════════════ */ #hero {--bg:url('../img/bg-hero.jpg'); --bg-pos:center 64%; /* 밝은 매장 사진 → 왼쪽 문구 가독성용 어둡게 처리 */ --scrim:linear-gradient(90deg,rgba(22,15,10,.86) 0%,rgba(22,15,10,.66) 42%,rgba(22,15,10,.38) 100%); --bg-ph:linear-gradient(160deg,#241C16 0%,#3A2A1E 55%,#54331F 100%); } #about {--bg:url('../img/bg-about.jpg'); --foodw:min(54%,900px); --foodt:1%; --bg-ph:radial-gradient(120% 90% at 85% 10%,#F3EDE3,#FAF7F2 60%); --scrim:none} #proof {--bg:url('../img/bg-proof.jpg'); --bg-pos:center 100%; --bg-ph:linear-gradient(180deg,#FAF7F2,#F4EFE6); /* 위쪽은 호랑이 그림이 보이게, 카드가 있는 아래는 밝게 */ --scrim:linear-gradient(90deg,rgba(250,247,242,.90) 0%,rgba(250,247,242,.78) 45%,rgba(250,247,242,.58) 100%)} #menu {/* --bg:url('../img/bg-menu.jpg'); */ --bg-ph:linear-gradient(150deg,#2A1D14,#4A2A18 70%,#6B3A1E); --scrim:linear-gradient(180deg,rgba(26,20,16,.62),rgba(26,20,16,.74))} #strength{/* --bg:url('../img/bg-strength.jpg'); */ --bg-ph:radial-gradient(110% 80% at 15% 0%,#F5F0E7,#FAF7F2 65%); --scrim:linear-gradient(rgba(250,247,242,.9),rgba(250,247,242,.94))} #interior{/* --bg:url('../img/bg-interior.jpg'); */ --bg-ph:linear-gradient(160deg,#241E19,#3E2E22 60%,#2A211A); --scrim:linear-gradient(180deg,rgba(26,20,16,.58),rgba(26,20,16,.72))} #support {/* --bg:url('../img/bg-support.jpg'); */ --bg-ph:linear-gradient(180deg,#F7F3EC,#FAF7F2); --scrim:linear-gradient(rgba(250,247,242,.9),rgba(250,247,242,.95))} #store {/* --bg:url('../img/bg-store.jpg'); */ --bg-ph:radial-gradient(120% 90% at 10% 100%,#F3EEE5,#FAF7F2 60%); --scrim:linear-gradient(rgba(250,247,242,.9),rgba(250,247,242,.95))} #business{/* --bg:url('../img/bg-business.jpg'); */ --bg-ph:linear-gradient(180deg,#FAF7F2,#F2EDE4); --scrim:linear-gradient(rgba(250,247,242,.93),rgba(250,247,242,.96))} #faq {/* --bg:url('../img/bg-faq.jpg'); */ --bg-ph:linear-gradient(180deg,#F7F3EC,#FAF7F2); --scrim:linear-gradient(rgba(250,247,242,.92),rgba(250,247,242,.96))} #cost {/* --bg:url('../img/bg-cost.jpg'); */ --bg-ph:linear-gradient(155deg,#3A1B12,#6B2517 65%,#8A3520); --scrim:linear-gradient(180deg,rgba(26,14,10,.55),rgba(26,14,10,.7))} #contact {/* --bg:url('../img/bg-contact.jpg'); */ --bg-ph:linear-gradient(160deg,#241C16,#3A2A1E 60%,#4A2E1C); --scrim:linear-gradient(180deg,rgba(26,20,16,.6),rgba(26,20,16,.74))} section:focus{outline:none} .eyebrow{font-size:11.5px; color:var(--ink3); font-weight:700; letter-spacing:.09em; margin:0 0 10px} .eyebrow em{font-style:normal; color:var(--red)} h2{font-size:15px; font-weight:700; letter-spacing:.02em; margin:0 0 22px; color:var(--red)} .lead{font-size:30px; line-height:1.5; letter-spacing:-.035em; font-weight:800; white-space:pre-line; margin:0 0 18px} .lead.sm{font-size:24px} .copy{font-size:17px; line-height:1.95; letter-spacing:-.02em; color:var(--ink2); white-space:pre-line; margin:0 0 18px} .copy b{color:var(--ink); font-weight:700} .big{font-size:20px; font-weight:700; color:var(--ink); line-height:1.8; white-space:pre-line} .note{font-size:12px; color:var(--ink3); line-height:1.75; margin:10px 0 0} /* ─── 그리드 · 카드 ───────────────────────────────── */ .grid{display:grid; gap:14px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .card{background:var(--board); border:1px solid var(--line); border-radius:10px; padding:22px} .card h3{font-size:15px; margin:0 0 7px; font-weight:700; letter-spacing:-.02em} .card p{margin:0; font-size:13.5px; color:var(--ink2); line-height:1.75} .card.r{border-color:#E9C3B9; background:var(--redbg)} .card.r h3{color:var(--red)} .card.t{border-color:#BFD8D3; background:var(--tealbg)} .card.t h3{color:var(--teal)} .card.g{border-color:#E6D3AE; background:var(--goldbg)} .card.g h3{color:var(--gold)} .ph{background:var(--fill); border:1px dashed var(--line); border-radius:8px; display:grid; place-items:center; color:var(--ink3); font-size:12px; text-align:center; padding:10px; line-height:1.6} /* ─── 주석 · 플래그 · 요청사항 ──────────────────────── */ .anno{background:var(--board); border:1px dashed var(--line); border-left:3px solid var(--ink3); border-radius:0 8px 8px 0; padding:14px 18px; margin:22px 0 0; font-size:12.5px; color:var(--ink2); line-height:1.85} .anno b{color:var(--ink)} .warn{background:var(--warnbg); border:1px dashed var(--warn); border-radius:8px; padding:15px 18px; color:var(--ink2); font-size:12.5px; line-height:1.85; margin-top:14px} .warn b{color:var(--warn)} .warn.hold{background:var(--red); border-style:solid; border-color:var(--reddk); color:#F7E3DE} .warn.hold b{color:#fff} .warn.hold code{background:rgba(255,255,255,.18); color:#fff} .req{background:var(--tealbg); border:1px dashed #9BC0B9; border-radius:8px; padding:13px 17px; font-size:12.5px; color:var(--teal); line-height:1.8; margin-top:14px; font-weight:500} .req b{font-weight:800} code{background:var(--fill); padding:2px 6px; border-radius:3px; font-family:inherit; font-size:.94em; font-weight:600; color:var(--teal)} /* ─── 히어로 ───────────────────────────────────────── */ .hero{position:relative; color:#fff; padding:0; display:grid; grid-template-columns:1fr 372px; gap:48px; align-items:center} .hero::after{content:""; position:absolute; right:-140px; top:-150px; width:420px; height:420px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(216,150,70,.26),transparent 68%)} .hero .kicker{font-size:13px; font-weight:700; color:#E3B372; letter-spacing:.02em; margin:0 0 16px} .hero h1{font-size:36px; line-height:1.45; letter-spacing:-.04em; margin:0 0 20px; font-weight:800; white-space:pre-line} .hero .quote{font-size:16px; line-height:1.95; color:#D9CEC2; margin:0; white-space:pre-line} .hero .quote em{font-style:normal; color:#fff; font-weight:700} .btnrow{display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; position:relative; z-index:2} .btn{text-decoration:none; font-size:14px; font-weight:700; padding:14px 26px; border-radius:999px; display:inline-block} .btn.r{background:var(--red); color:#fff} .btn.o{border:1.5px solid rgba(255,255,255,.5); color:#fff} .btn.t{background:var(--teal); color:#fff} .form{position:relative; z-index:2; background:var(--board); border-radius:12px; padding:24px; color:var(--ink)} .form strong{font-size:15px; letter-spacing:-.02em} .field{height:40px; background:var(--fill); border:1px solid var(--line); border-radius:6px; margin:8px 0; display:flex; align-items:center; padding:0 12px; color:var(--ink3); font-size:12.5px} .field b{color:var(--red); margin-left:4px; flex:none} .field.area{height:132px; align-items:stretch; padding-top:12px; padding-bottom:12px} /* 문의 내용 — 여러 줄 */ .field input,.field select,.field textarea{ flex:1; min-width:0; background:none; border:0; outline:none; padding:0; font:inherit; font-size:13.5px; color:var(--ink)} .field textarea{resize:none; height:100%; line-height:1.75} .field select{appearance:none; cursor:pointer; color:var(--ink3)} .field select.filled{color:var(--ink)} .field select option{color:#1A1714; background:#fff} .field ::placeholder{color:var(--ink3); opacity:1} .field:focus-within{border-color:var(--red); box-shadow:0 0 0 3px rgba(168,50,31,.13)} .sec.on-dark .field:focus-within{border-color:#E8B888; box-shadow:0 0 0 3px rgba(232,184,136,.2)} .agree{font-size:11.5px; color:var(--ink3); line-height:1.9; margin-top:12px} /* ─── 다이어그램 (시간대별 운영) ──────────────────── */ .daypart{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px} .dp{border:1px solid var(--line); border-radius:10px; padding:22px; background:var(--board); position:relative} .dp .t{font-size:11.5px; font-weight:800; letter-spacing:.08em; color:var(--ink3); margin:0 0 6px} .dp h3{font-size:19px; margin:0 0 6px; font-weight:800; letter-spacing:-.03em} .dp p{margin:0; font-size:13.5px; color:var(--ink2)} .dp .tl{height:6px; border-radius:3px; margin-top:16px; background:var(--line2); overflow:hidden} .dp .tl i{display:block; height:100%; border-radius:3px} .dp.l h3{color:var(--red)} .dp.l .tl i{width:38%; background:var(--red)} .dp.d h3{color:var(--gold)} .dp.d .tl i{width:34%; margin-left:52%; background:var(--gold)} .dp.a h3{color:var(--teal)} .dp.a .tl i{width:100%; background:var(--teal)} .metric{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px} .metric div{flex:1; min-width:200px; background:var(--fill); border-radius:10px; padding:18px 20px} .metric span{font-size:12.5px; color:var(--ink2); display:block} .metric strong{font-size:26px; letter-spacing:-.03em; display:block; margin-top:4px} /* ─── 슬라이더 ────────────────────────────────────── */ .tabs{display:flex; gap:7px; margin:22px 0 14px; flex-wrap:wrap} .tab{border:1px solid var(--line); background:var(--board); border-radius:999px; padding:8px 17px; font-size:13px; color:var(--ink2); cursor:pointer; font:inherit; font-size:13px} .tab[aria-selected="true"]{background:var(--red); border-color:var(--red); color:#fff; font-weight:700} .slider{position:relative} .track{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none; cursor:grab} .track::-webkit-scrollbar{display:none} .track.drag{cursor:grabbing; scroll-snap-type:none} .slide{flex:0 0 232px; scroll-snap-align:start} .slide .ph{height:168px} .slide p{margin:9px 0 0; font-size:13px; font-weight:600} .slide small{color:var(--ink3); font-weight:400} .arrows{display:flex; gap:7px; justify-content:flex-end; margin-top:10px} .arrows button{width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--board); cursor:pointer; font-size:15px; color:var(--ink2)} .arrows button:hover{border-color:var(--red); color:var(--red)} /* ─── 체크 · 타입 · 부스터 ─────────────────────────── */ .checks{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px} .chk{background:var(--board); border:1px solid var(--line); border-radius:10px; padding:22px 20px} .chk .n{font-size:11px; font-weight:800; color:var(--red); letter-spacing:.08em; margin:0 0 9px} .chk h3{font-size:16px; margin:0 0 7px; font-weight:800; letter-spacing:-.02em} .chk p{margin:0; font-size:13px; color:var(--ink2); line-height:1.7} .type{background:var(--board); border:1px solid var(--line); border-radius:12px; padding:26px 24px; position:relative} .type .no{font-size:11.5px; font-weight:800; color:var(--red); letter-spacing:.06em; margin:0 0 8px} .type h3{font-size:21px; margin:0 0 10px; font-weight:800; letter-spacing:-.03em} .type p{margin:0 0 6px; font-size:14px; color:var(--ink2); line-height:1.75} .type .hi{font-size:14.5px; color:var(--ink); font-weight:600} .booster{background:var(--board); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:0 12px 12px 0; padding:24px 26px} .booster .no{font-size:11.5px; font-weight:800; color:var(--gold); letter-spacing:.06em; margin:0 0 7px} .booster h3{font-size:19px; margin:0 0 9px; font-weight:800; letter-spacing:-.03em} .booster p{margin:0 0 12px; font-size:14px; color:var(--ink2); line-height:1.75} .booster .amt{display:inline-block; background:var(--goldbg); color:#8C6417; font-weight:800; font-size:17px; padding:9px 16px; border-radius:8px; letter-spacing:-.02em} .disc{font-size:11.5px; color:var(--ink3); line-height:1.7; margin:12px 0 0} /* ─── 수익 사례 ───────────────────────────────────── */ .pl{background:var(--board); border:1px solid var(--line); border-radius:12px; overflow:hidden} .pl .top{background:var(--fill); padding:20px 24px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap} .pl .top h3{margin:0; font-size:19px; font-weight:800; letter-spacing:-.03em} .pl .top span{font-size:12.5px; color:var(--ink2)} .pl .hl{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line2)} .pl .hl div{background:var(--board); padding:20px 24px} .pl .hl span{font-size:12px; color:var(--ink3); display:block; margin-bottom:3px} .pl .hl strong{font-size:25px; letter-spacing:-.035em} .pl .hl .p strong{color:var(--red)} table{width:100%; border-collapse:collapse; font-size:13.5px} th,td{padding:12px 24px; text-align:right; border-top:1px solid var(--line2)} th:first-child,td:first-child{text-align:left} thead th{background:var(--fill); font-size:12px; color:var(--ink2); font-weight:700; border-top:none} tbody tr.sum td{background:var(--redbg); font-weight:800; color:var(--red)} td small{color:var(--ink3); font-weight:400} /* ─── FAQ ─────────────────────────────────────────── */ .faq{background:var(--board); border:1px solid var(--line); border-radius:10px; margin-bottom:9px; overflow:hidden} .faq button{width:100%; text-align:left; background:none; border:0; font:inherit; font-size:15.5px; font-weight:700; letter-spacing:-.02em; padding:19px 52px 19px 22px; cursor:pointer; position:relative; color:var(--ink)} .faq button::after{content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); font-size:20px; color:var(--ink3); font-weight:400} .faq button[aria-expanded="true"]{color:var(--red)} .faq button[aria-expanded="true"]::after{content:"−"; color:var(--red)} .faq .a{padding:0 22px 20px; font-size:14px; color:var(--ink2); line-height:1.9; white-space:pre-line} .faq .a[hidden]{display:none} /* ─── 창업 비택 ───────────────────────────────────── */ .benefit{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px} .bf{background:linear-gradient(165deg,#A8321F,#7C2415); color:#fff; border-radius:12px; padding:24px 20px} .bf .n{font-size:11.5px; font-weight:800; color:#F0C3A8; letter-spacing:.06em; margin:0 0 9px} .bf h3{margin:0; font-size:16.5px; font-weight:800; letter-spacing:-.03em; line-height:1.5} .terms{font-size:12px; color:var(--ink2); line-height:1.95; margin-top:16px} footer{background:var(--ink); color:#C7C0B6; padding:46px 30px; font-size:12.5px; line-height:1.95} footer .in{max-width:1180px; margin:0 auto} footer .kv{color:#D8A76B} footer a{color:#C7C0B6} /* ─── 차트 ─────────────────────────────────────────── */ /* 계열 색은 접근성 검증(색각이상 ΔE·명도대비) 통과 조합 */ :root{--s1:#A8321F; --s2:#B07D1A; --s3:#0F9E8F} .chart{position:relative; background:var(--board); border:1px solid var(--line); border-radius:12px; padding:24px 22px 16px; margin-top:20px} .chart h4{margin:0 0 4px; font-size:14.5px; font-weight:700; letter-spacing:-.02em} .chart .cap{margin:0 0 14px; font-size:12px; color:var(--ink3); line-height:1.7} .chart svg{display:block; width:100%; height:auto; overflow:visible} .svgwrap{overflow-x:auto; overflow-y:hidden; scrollbar-width:none} .svgwrap::-webkit-scrollbar{display:none} .c-grid{stroke:var(--line2); stroke-width:1} .c-axis{stroke:var(--line); stroke-width:1} .c-tick{fill:var(--ink3); font-size:11px} .c-xlab{fill:var(--ink2); font-size:12px} .c-val{fill:var(--ink); font-size:13px; font-weight:800} .c-sub{fill:var(--ink2); font-size:11.5px} .c-hit{fill:transparent; cursor:crosshair} .legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; font-size:12.5px; color:var(--ink2)} .legend span{display:inline-flex; align-items:center} .legend i{width:11px; height:11px; border-radius:3px; margin-right:6px} .legend i.ln{height:3px; border-radius:2px} .tip{position:absolute; left:0; top:0; pointer-events:none; opacity:0; z-index:5; background:var(--ink); color:#fff; font-size:12px; line-height:1.55; padding:7px 11px; border-radius:7px; white-space:nowrap; transform:translate(-50%,-125%); transition:opacity .15s} .tip b{font-weight:700} /* 등장 모션 (2/3 지점 트리거 공유) */ .c-line{fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.7s var(--ease) .1s} .in .c-line{stroke-dashoffset:0} .c-area,.c-band{opacity:0; transition:opacity .8s var(--ease)} .in .c-area,.in .c-band{opacity:1} /* 라벨 — 살짝 떠오르며 등장 */ .c-lbl{opacity:0; transform:translateY(9px); transform-box:fill-box; transition:opacity .7s var(--ease), transform .7s var(--ease)} .in .c-lbl{opacity:1; transform:none} /* 포인트 — 톡 튀어나오는 팝 */ .c-dot{opacity:0; transform:scale(.3); transform-box:fill-box; transform-origin:center; transition:opacity .45s var(--ease), transform .55s cubic-bezier(.34,1.7,.6,1)} .in .c-dot{opacity:1; transform:none} /* 그리드 — 옅게 떠오름 */ .c-grid{opacity:0; transition:opacity .6s var(--ease) .1s} .in .c-grid{opacity:1} /* 좌→우 와이프 (선이 그려지는 속도에 맞춰 면이 드러납니다) */ .c-wipe{transform-box:fill-box; transform-origin:right center; transform:scaleX(1); transition:transform 1.75s var(--ease) .1s} .in .c-wipe{transform:scaleX(0)} /* 배달 상시선 — 계속 흐르는 점선 */ @keyframes dashflow{to{stroke-dashoffset:-22}} .in .c-flow{animation:dashflow 1.8s linear 1.9s infinite} /* 피크 강조 — 3회 파동 */ @keyframes pulse{0%{transform:scale(.6);opacity:.55} 100%{transform:scale(2.6);opacity:0}} .c-pulse{opacity:0; transform-box:fill-box; transform-origin:center} .in .c-pulse{animation:pulse 1.6s var(--ease) 3} .c-bar{transform:scaleY(0); transform-box:fill-box; transform-origin:bottom; transition:transform .85s cubic-bezier(.22,1.35,.36,1)} .in .c-bar{transform:scaleY(1)} @media (prefers-reduced-motion:reduce){ .c-line{stroke-dashoffset:0 !important} .c-bar{transform:none !important} .c-area,.c-dot,.c-lbl,.c-band,.c-grid{opacity:1 !important; transform:none !important} .c-wipe{display:none} .in .c-flow,.in .c-pulse{animation:none} } @media (max-width:760px){ /* 좌표계를 모바일 폭으로 다시 그리므로 가로 스크롤이 없습니다 */ .chart{padding:20px 12px 12px} .legend{gap:10px; font-size:11.5px} .chart h4{font-size:14px} .chart .cap{font-size:11.5px} .c-val{font-size:12px} .c-xlab{font-size:11px} .c-tick{font-size:10px} .c-sub{font-size:10px} } /* ─── 모션 ─────────────────────────────────────────── */ :root{--ease:cubic-bezier(.16,1,.3,1)} .rv{opacity:0; transform:translateY(30px); will-change:opacity,transform; transition:opacity .9s var(--ease), transform .9s var(--ease)} .rv.in{opacity:1; transform:none} .ln{display:block; opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease)} .ln.in{opacity:1; transform:none} .progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:80; background:linear-gradient(90deg,var(--red),#D8834A); transition:width .12s linear} .hd{transition:box-shadow .35s var(--ease), background .35s} body.scrolled .hd{box-shadow:0 2px 22px rgba(26,23,20,.08)} .hero{--gy:0px} .hero::after{transform:translateY(var(--gy)); transition:transform .1s linear} .hero .form,.hero>div{will-change:transform} .ph{overflow:hidden} .pxi{display:block; will-change:transform; transition:transform .1s linear} .btn,.cta,.sns a,.arrows button{transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .25s, color .25s, border-color .25s} .btn:hover,.cta:hover{transform:translateY(-2px)} .btn.r:hover,.cta:hover{box-shadow:0 10px 24px rgba(168,50,31,.26)} .btn.t:hover{box-shadow:0 10px 24px rgba(29,91,84,.24)} .sns a:hover,.arrows button:hover{transform:translateY(-2px)} .card,.chk,.type,.booster,.pl,.faq,.slide .ph{ transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s, opacity .9s var(--ease)} .card:hover,.chk:hover,.type:hover,.booster:hover{transform:translateY(-4px); box-shadow:0 14px 32px rgba(26,23,20,.08)} .slide:hover .ph{transform:scale(1.03)} .bf{transition:transform .45s var(--ease), box-shadow .45s var(--ease), opacity .9s var(--ease)} .bf:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(124,36,21,.3)} .dp .tl i{transform-origin:left; transform:scaleX(0); transition:transform 1.2s var(--ease) .25s} .dp.in .tl i{transform:scaleX(1)} .gnb a,.flt a,.chips a{transition:color .25s, border-color .25s, background .25s} .faq .a{animation:faqIn .45s var(--ease)} @keyframes faqIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}} @media (prefers-reduced-motion:reduce){ .rv,.ln{opacity:1 !important; transform:none !important; transition:none !important} .dp .tl i{transform:scaleX(1) !important} .pxi,.hero::after,.sec.has-bg::before{transform:none !important} .faq .a{animation:none} } @media (max-width:1520px){ .flt{display:none} } /* 라벨이 본문을 침범하지 않는 너비에서만 노출 */ @media (max-width:1180px){ .chips{display:flex} .sec:last-of-type{padding-bottom:104px} .hero{grid-template-columns:1fr} .g4,.checks,.benefit{grid-template-columns:repeat(2,1fr)} .daypart{grid-template-columns:repeat(3,1fr); gap:10px} /* 2026.10.01 점심/저녁/상시 — 모바일 1줄 전까지 3단 유지 (2+1 줄바꿈 없음) */ .daypart .dp{padding:18px 16px} } @media (max-width:760px){ .gnb,.hd .tel,.sns{display:none} .g2,.g3,.g4,.checks,.benefit,.daypart{grid-template-columns:1fr} .inner{padding:0 16px} .sec{padding:56px 0} #hero{padding:64px 0 56px} .sec:last-of-type{padding-bottom:96px} .sec.has-bg::before{top:-4%; bottom:-4%} .hero h1{font-size:26px} .lead{font-size:23px} .lead.sm{font-size:20px} .copy{font-size:15.5px} .pl .hl{grid-template-columns:1fr} th,td{padding:11px 16px} .annobar{left:12px; right:12px; bottom:74px; justify-content:space-between} } /* ── 대표번호 · SNS 링크 (2026.09.21) ───────────────────── */ .sns:empty{display:none} .hd .tel b a{color:inherit; text-decoration:none} .hd .tel b a:hover{color:var(--red)} /* ── 로고 이미지 (2026.09.21) ───────────────────────────── */ .logo{display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-decoration:none; color:inherit} .logo img{display:block; height:40px; width:auto} .logo small{font-size:10px} .ft-logo{display:inline-block; height:32px; width:auto; margin-bottom:14px; opacity:.92} @media (max-width:760px){ .logo img{height:32px} .logo small{display:none} } /* ── 히어로 배경 · 모바일 (2026.09.21) ─────────────────── */ @media (max-width:760px){ #hero{--bg:url('../img/bg-hero-m.jpg'); --bg-pos:30% 30%; --scrim:linear-gradient(180deg,rgba(22,15,10,.78) 0%,rgba(22,15,10,.62) 60%,rgba(22,15,10,.8) 100%)} } /* ── 02 브랜드 철학 · 03 맛집의 기준 배경 (2026.09.21) ───────── */ /* 02: 곰탕 사진을 오른쪽 위에 두고 왼쪽·아래로 자연스럽게 사라지게 */ #about::before{background-color:#FAF7F2; background-size:var(--foodw) auto; background-position:right 0 top var(--foodt); -webkit-mask-image:linear-gradient(90deg,transparent 22%,#000 52%),linear-gradient(180deg,#000 46%,transparent 94%); -webkit-mask-composite:source-in; mask-composite:intersect; mask-image:linear-gradient(90deg,transparent 22%,#000 52%),linear-gradient(180deg,#000 46%,transparent 94%)} #about .ph{visibility:hidden} /* PC는 배경 사진이 그 자리에 보이므로 숨김 */ @media (max-width:760px){ /* 모바일: 문구 먼저 → 그 아래에 사진. 배경 사진은 끄고 실제 이미지로 보여줍니다 */ #about::before{display:none} #about > .steam{display:none} #about .ph.foodslot{visibility:visible; height:auto; position:relative; border:0; background:none; padding:0; margin-top:6px; display:block; overflow:visible} #about .ph.foodslot img{display:block; width:100%; height:auto; border-radius:0; /* 아래쪽을 바탕색으로 서서히 사라지게 해 잘린 느낌을 없앱니다 */ -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 99%); mask-image:linear-gradient(180deg,#000 72%,transparent 99%)} #about .ph.foodslot .steam.sm{position:absolute; inset:0; width:100%; display:block} #about .ph.foodslot .steam.sm i{left:20%; top:6%; width:56%} #proof{--bg:url('../img/bg-proof-m.jpg')} } /* ── 메인 워딩 명조체 (2026.09.21) ─────────────────────────── 문장형 카피만 명조로. 버튼·수치·표·라벨은 고딕 유지. */ .hero h1, .lead, .big, .sec h2{ font-family:var(--serif); font-weight:600; letter-spacing:-.015em; word-break:keep-all; } .hero h1{font-weight:700; line-height:1.52} .lead{font-weight:600; line-height:1.55} .big{font-weight:600} .sec h2{font-weight:700} .hero .quote em{font-family:var(--serif); font-weight:600} /* ── 02 음식 위 김(연기) 모션 (2026.09.21) ────────────────── 배경 사진과 같은 기준으로 자리를 잡아, 화면 폭이 바뀌어도 그릇 위에 붙어 있습니다. */ .steam{position:absolute; z-index:1; pointer-events:none; right:0; top:var(--foodt); width:var(--foodw); aspect-ratio:1146/930} .steam i{position:absolute; left:21%; top:7%; width:56%; aspect-ratio:617/398; background:url('../img/steam.png') center/contain no-repeat; opacity:0; transform:translateY(12%) scale(.86); animation:th-steam 7.8s var(--d,0s) infinite cubic-bezier(.25,.6,.3,1)} @keyframes th-steam{ 0%{opacity:0; transform:translateY(12%) scale(.86) rotate(-1.5deg)} 20%{opacity:.82; transform:translateY(2%) scale(.95) rotate(-.5deg)} 55%{opacity:.62; transform:translateY(-12%) scale(1.08) rotate(1deg)} 100%{opacity:0; transform:translateY(-30%) scale(1.26) rotate(2.5deg)} } @media (prefers-reduced-motion:reduce){ .steam{display:none} } @media (max-width:760px){ /* 모바일은 사진이 맨 위 전체 폭 띠 */ .steam{right:auto; left:0; top:0; width:100%} .steam i{left:22%; width:54%} } /* ── 히어로 빠른문의 — 동의 · 버튼 2개 (2026.09.21) ─────── */ .qagree{margin:14px 0 0; font-size:12px; color:var(--ink2); line-height:1.65} .qagree label{display:flex; align-items:flex-start; gap:7px; cursor:pointer} .qagree input{margin:2px 0 0; accent-color:var(--red); width:15px; height:15px; flex:none} .qagree b{color:var(--red); font-weight:700} .qagree-sub{display:block; margin:3px 0 0 22px; font-size:11px; color:var(--ink3)} .qbtns{display:grid; grid-template-columns:1.35fr 1fr; gap:8px; margin-top:12px} .qbtns .btn{padding:13px 10px; text-align:center; font-size:14px; border:0; cursor:pointer; font-family:inherit; font-weight:700; line-height:1.3} .qbtns .btn.o2{background:#fff; color:var(--ink); border:1.5px solid var(--line); text-decoration:none; display:block; border-radius:999px} .qbtns .btn.o2:hover{border-color:var(--red); color:var(--red)} @media (max-width:760px){ .qbtns{grid-template-columns:1fr} } /* ── 하단 고정바 — 펼침 신청 (2026.09.21) ───────────────── */ .dock{transition:transform .35s var(--ease), padding .25s var(--ease)} .dock.open{padding-top:14px; padding-bottom:14px} .dock .row[hidden], .dockform[hidden], .dockdone[hidden]{display:none} .dockform{max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap} .dockform-head{display:flex; align-items:center; gap:10px; flex:none} .dockform-head b{font-size:14px; font-weight:800; color:var(--ink); white-space:nowrap} .dockform-head button{width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink3); font-size:12px; line-height:1; cursor:pointer} .dockform-head button:hover{border-color:var(--red); color:var(--red)} .dockform-in{display:flex; gap:8px; flex:1 1 380px; min-width:0} .dockform-in input{flex:1 1 0; min-width:0; padding:12px 13px; border:1px solid var(--line); border-radius:9px; background:#fff; font:inherit; font-size:14px; color:var(--ink)} .dockform-in input::placeholder{color:var(--ink3)} .dockform-in input:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(168,50,31,.10)} .dockform-foot{display:flex; align-items:center; gap:12px; flex:none} .dockagree{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink2); cursor:pointer; white-space:nowrap} .dockagree input{width:15px; height:15px; accent-color:var(--red); flex:none} .dockagree b{color:var(--red); font-weight:700} .dock-send{padding:12px 26px; border:0; border-radius:999px; background:var(--red); color:#fff; font:inherit; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap} .dock-send:hover{background:var(--reddk)} .dockdone{max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:9px; padding:14px 0; font-size:15px; font-weight:700; color:#1F6B45; letter-spacing:-.01em} .dockdone span{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#1F6B45; color:#fff; font-size:13px} @media (max-width:760px){ .dock.open{padding:12px 14px} .dockform{gap:8px} .dockform-head{width:100%; justify-content:space-between} .dockform-in{flex:1 1 100%; flex-wrap:wrap} .dockform-in input{flex:1 1 100%; padding:13px} .dockform-foot{width:100%; justify-content:space-between; gap:8px} .dock-send{flex:0 0 auto; padding:13px 22px} .dockdone{font-size:14px; padding:12px 0} } /* ── 주석 토글 — 작게 (2026.09.21) · 관리자에게만 보임 ───── */ .sound_only{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} .annobar{left:14px; right:auto; bottom:14px; padding:3px; gap:0; font-size:11px; box-shadow:0 4px 14px rgba(26,23,20,.12); opacity:.82; transition:opacity .2s} .annobar:hover{opacity:1} .annobar button{padding:5px 10px; font-size:11px; letter-spacing:-.01em} body.dock-on .annobar{bottom:90px} body.dock-form-open .annobar{display:none} /* 하단바 입력 중에는 숨김 */ @media (max-width:760px){ .annobar{left:auto; right:10px; bottom:84px; justify-content:flex-start} body.dock-on .annobar{bottom:84px} } /* ── 차트 막대 그라데이션 광택 (2026.09.21) ─────────────── */ .c-sheen{pointer-events:none} /* ── 히어로 빠른문의 v2 — 버튼 1개 + 동의 2개 (2026.09.21) ── */ .form .qsend{display:block; width:100%; margin-top:12px; padding:15px 0; border:0; cursor:pointer; font-family:inherit; font-size:15px; font-weight:700; text-align:center} .form .qagree{display:grid; gap:7px; margin:14px 0 0} .form .qagree label{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink2); cursor:pointer} .form .qagree input{width:15px; height:15px; margin:0; accent-color:var(--red); flex:none} .form .qagree b{color:var(--red)} .form .qagree em{font-style:normal; color:var(--ink3)} /* ── GNB SNS 아이콘 (블로그 · 인스타그램 · 스마트스토어) ──── */ .sns a{color:var(--ink2)} .sns a svg{width:17px; height:17px; display:block} .sns a:hover{color:var(--red); border-color:var(--red)} .sns a.is-empty{opacity:.45; cursor:default} @media (max-width:760px){ .hd .sns{display:flex !important; gap:5px; margin-left:auto; margin-right:8px} .hd .sns a{width:30px; height:30px} .hd .sns a svg{width:15px; height:15px} } .hd .logo{flex:none} .hd .logo img{width:auto; max-width:none; flex:none} @media (max-width:760px){ .hd{padding-left:14px !important; padding-right:14px !important; gap:8px} .hd .logo img{height:28px} .hd .sns{gap:4px; margin-right:4px} .hd .sns a{width:28px; height:28px} .hd .sns a svg{width:14px; height:14px} .hd .cta{padding:9px 13px; font-size:12.5px; white-space:nowrap; flex:none} } @media (max-width:360px){ .hd .sns{display:none !important} } /* ── 모바일 메인 워딩 +4pt (≈ +5px) (2026.09.21) ───────────── 히어로 26→31px · 섹션 리드 23→28px · 소제목 리드 20→25px */ @media (max-width:760px){ .hero h1{font-size:31px; line-height:1.42} .lead{font-size:28px; line-height:1.45} .lead.sm{font-size:25px} /* 글자가 커져 한 줄에 안 들어갈 때, 한 단어만 떨어지지 않게 줄 길이를 고르게 */ .hero h1, .lead{text-wrap:balance; word-break:keep-all} } @media (max-width:360px){ /* 아주 좁은 화면은 줄바꿈 깨짐 방지 */ .hero h1{font-size:28px} .lead{font-size:25px} .lead.sm{font-size:22px} } /* ── 등장 · 퇴장 반복 모션 (2026.09.22) ───────────────────── 위로 빠져나간 요소는 위쪽으로 사라지고, 다시 들어오면 재생 */ .rv.out-up, .ln.out-up{transform:translateY(-30px)} .rv:not(.in){transition-duration:.55s} .ln:not(.in){transition-duration:.5s} /* ── 캐러셀 — 가운데 카드 확대 (2026.09.22) ─────────────────── */ .track.car{scroll-snap-type:x mandatory; padding-top:26px; padding-bottom:26px; margin-top:-14px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)} .track.car .slide{scroll-snap-align:center; transform-origin:50% 60%; transform:scale(calc(.88 + var(--f,0) * .16)); opacity:calc(.5 + var(--f,0) * .5); transition:box-shadow .5s var(--ease)} .track.car .slide .ph{transition:box-shadow .5s var(--ease), border-color .5s} .track.car .slide.is-center .ph{box-shadow:0 18px 40px rgba(0,0,0,.28); border-style:solid} .track.car .slide p{opacity:calc(.35 + var(--f,0) * .65)} .track.car .slide:hover .ph{transform:none} @media (prefers-reduced-motion:reduce){ .track.car .slide{transform:none; opacity:1} } /* ── 점주 인터뷰 영상 — 활성 영상 3배 확대 (2026.09.22) ───── */ .vids{display:flex; gap:12px; align-items:flex-start} .vid{flex:1 1 0; min-width:0; cursor:pointer; outline:none; transition:flex-grow .8s var(--ease)} .vid .ph{aspect-ratio:16/9; height:auto !important; position:relative; transition:box-shadow .6s var(--ease), border-color .6s, opacity .6s} .vid:not(.on) .ph{opacity:.62} .vid.on{flex-grow:3} .vid.on .ph{box-shadow:0 20px 44px rgba(26,23,20,.16); border-style:solid; border-color:var(--red)} .vid .note{transition:opacity .5s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .vid:not(.on) .note{opacity:.55} .vid.on .ph::after{content:"▶"; position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-size:18px; box-shadow:0 8px 20px rgba(168,50,31,.35); animation:vidpulse 2s ease-in-out infinite} @keyframes vidpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} @media (max-width:760px){ .vids{flex-direction:column; gap:8px} .vid{width:100%; flex:none} .vid .ph{aspect-ratio:auto; height:64px !important; transition:height .7s var(--ease), box-shadow .6s, opacity .6s} .vid.on .ph{height:calc((100vw - 32px) * .5625) !important} .vid:not(.on) .ph .pxi, .vid:not(.on) .ph{font-size:12px} } @media (prefers-reduced-motion:reduce){ .vid, .vid .ph{transition:none} .vid.on .ph::after{animation:none} } /* ── 헤더 위아래 여백 확보 (2026.09.22) ── 68px → 88px (모바일 64 → 72px) */ :root{--header:88px} .hd .logo{gap:5px} @media (max-width:760px){ :root{--header:72px} } /* 1180px 이하에서는 아래 칩 메뉴가 전체 메뉴를 보여주므로, 잘려 보이던 상단 메뉴는 숨기고 우측 요소를 오른쪽 끝에 붙임 */ @media (max-width:1180px){ .hd .gnb{display:none} .hd .sns{margin-left:auto} } /* ─── 팝업레이어 ───────────────────────────────────── */ /* 관리자 → 환경설정 → 팝업레이어관리 에서 등록합니다. 그누보드 기본 마크업(#hd_pop / .hd_pops)을 이 테마 톤에 맞춰 덮어씁니다. 헤더에 가리지 않도록 margin-top 으로 헤더 높이만큼 내려주므로 관리자의 Top 값은 '헤더 아래 기준'으로 동작합니다. */ #hd_pop{position:relative; z-index:100; margin:0 auto; height:0} #hd_pop h2{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0} .hd_pops{position:absolute; margin-top:var(--header); max-width:calc(100vw - 32px)} .hd_pops_con{height:auto !important; max-width:100%; max-height:72vh; overflow:auto; background:var(--board); border:1px solid var(--line); border-bottom:0; border-radius:14px 14px 0 0; box-shadow:0 18px 50px rgba(26,23,20,.20)} .hd_pops_con img{display:block; max-width:100%; height:auto} .hd_pops_footer{display:flex; justify-content:space-between; align-items:center; background:var(--ink); color:#fff; border-radius:0 0 14px 14px; overflow:hidden} .hd_pops_footer button{background:none; border:0; color:#fff; font:inherit; font-size:12.5px; line-height:1.3; padding:11px 14px; cursor:pointer} .hd_pops_footer button:hover{background:rgba(255,255,255,.14)} .hd_pops_footer button strong{font-weight:700} .hd_pops_footer i{display:none} /* 폰트어썸 미사용 — 빈 아이콘 자리 제거 */ @media (max-width:760px){ .hd_pops{left:16px !important; right:16px; width:auto; max-width:none; margin-top:calc(var(--header) + 8px)} .hd_pops_con{width:auto !important; max-height:64vh} .hd_pops_footer button{font-size:12px; padding:10px 12px} } /* ── 붓글씨 헤드라인 East Sea Dokdo (2026.09.24) ───────────── 로고의 붓글씨 결을 히어로 대문과 섹션 제목에 잇습니다. 본문·수치·표·라벨은 기존 명조/고딕 그대로 — 가독성 유지. */ :root{--brush:"East Sea Dokdo","Noto Serif KR",serif} .hero h1, .lead, .sec h2{ font-family:var(--brush); font-weight:400; /* 이 서체는 한 굵기만 있습니다 */ letter-spacing:.005em; line-height:1.34; } /* 붓글씨체는 글자가 작아 보여 크기를 키워 균형을 맞춥니다 */ .hero h1{font-size:56px} .lead{font-size:43px} .lead.sm{font-size:36px} .sec h2{font-size:36px} @media (max-width:760px){ .hero h1{font-size:44px; line-height:1.3} .lead{font-size:38px; line-height:1.32} .lead.sm{font-size:33px} .sec h2{font-size:31px} } @media (max-width:360px){ .hero h1{font-size:40px} .lead{font-size:35px} .lead.sm{font-size:30px} } /* ══════════════════════════════════════════════════════════════ 실사진 적용 후 가독성 보정 (2026.09.24) ─ 사진이 들어가면서 텍스트·카드가 배경에 먹히던 구간 보정. ─ 이 블록은 반드시 파일 맨 끝에 있어야 위쪽 값을 덮어씁니다. ─ 섹션 배경(--bg / --bg-ph)은 건드리지 않습니다. ══════════════════════════════════════════════════════════════ */ /* ── 공통 ① 사진 위 카드 불투명도 상향 ─────────────────── 기존 .08~.30 은 배경 결이 글자 뒤로 그대로 올라왔습니다. 유리 느낌은 유지하면서 글자 뒤만 확실히 가립니다. */ .sec.on-dark{ --board:rgba(28,22,18,.52); --fill:rgba(255,255,255,.14); --line:rgba(255,255,255,.34); } .sec.on-dark .card{backdrop-filter:blur(10px) saturate(1.1)} .sec.on-dark .card.r{background:rgba(140,40,25,.60); border-color:rgba(240,180,160,.58)} .sec.on-dark .card.r h3{color:#FFD3C3} .sec.on-dark .card.t{background:rgba(20,74,68,.62); border-color:rgba(160,210,202,.55)} .sec.on-dark .card.t h3{color:#B6E2DA} .sec.on-dark .card p{color:#E7E0D6} /* ── 공통 ② 사진 위 리드 문구에 얇은 그림자 ───────────── 붓글씨체(East Sea Dokdo)는 획이 얇아 특히 먹힙니다. */ .sec.on-dark .lead, .sec.on-dark .copy, .sec.on-dark .big{text-shadow:0 1px 14px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4)} .sec.on-dark .eyebrow{color:#D9CFC2} /* ── 공통 ③ 슬라이드 캡션 ─────────────────────────────── 비활성 캡션이 .35 까지 내려가 거의 안 보였습니다. */ .track.car .slide p{opacity:calc(.62 + var(--f,0) * .38)} .sec.on-dark .slide p{text-shadow:0 1px 10px rgba(0,0,0,.6)} .sec.on-dark .slide small{color:#C9C0B4} /* ── 1. 08 매장 현황 — 점주 인터뷰 비활성 카드 ────────────── 3배 확대 모션은 그대로 두고, 비활성 카드가 '로딩 실패'처럼 보이지 않을 만큼만 살립니다. */ #store{--scrim:linear-gradient(rgba(250,247,242,.945),rgba(250,247,242,.975))} .vid:not(.on) .ph{opacity:.84; box-shadow:0 6px 18px rgba(26,23,20,.08)} .vid:not(.on) .note{opacity:.78} .vid .ph{border-color:var(--line)} /* ── 2. 04 메뉴 경쟁력 — 탭·화살표가 배경에 먹히는 문제 ────── 탭 행에 자기 배경을 줘 어떤 배경 위에서도 버튼으로 읽히게. */ #menu{--scrim:linear-gradient(180deg,rgba(24,18,14,.74),rgba(24,18,14,.84))} .sec.on-dark .tab{background:rgba(28,22,18,.58); border-color:rgba(255,255,255,.4); color:#F2EBE1; backdrop-filter:blur(8px)} .sec.on-dark .tab[aria-selected="true"]{background:var(--red); border-color:#E9A088; color:#fff} .sec.on-dark .note{color:#CFC6B9; text-shadow:0 1px 8px rgba(0,0,0,.5)} .sec.on-dark .arrows button{background:rgba(28,22,18,.62); border-color:rgba(255,255,255,.34); color:#fff} /* ── 3. 02 브랜드 철학 — 하단 3개 카드 위로 사진이 올라오는 문제 ── 곰탕 사진 마스크를 조금 더 위에서 끝내 카드 영역을 비웁니다. */ #about::before{ -webkit-mask-image:linear-gradient(90deg,transparent 22%,#000 52%),linear-gradient(180deg,#000 38%,transparent 76%); -webkit-mask-composite:source-in; mask-composite:intersect; mask-image:linear-gradient(90deg,transparent 22%,#000 52%),linear-gradient(180deg,#000 38%,transparent 76%)} /* 흰 카드가 밝은 국물 사진 위에서 경계를 잃지 않도록 */ #about .card{box-shadow:0 8px 26px rgba(26,23,20,.09)} #about .grid.g3 .card{background:#fff} /* ── 4. 06 매장 인테리어 — 제목과 사진 속 간판이 겹치는 문제 ──── ※ 지금은 #interior 에 --bg 사진이 지정되어 있지 않아(주석 상태) 아래 --bg-pos 는 효과가 없습니다. 배경 사진을 넣으신 뒤 주석을 풀고 숫자(70~90%)만 조정해 주세요. */ #interior{/* --bg-pos:center 78%; */ --scrim:linear-gradient(180deg,rgba(24,19,15,.70) 0%,rgba(24,19,15,.58) 45%,rgba(24,19,15,.78) 100%)} /* ── 5. 11 창업 비용 — 붉은 BENEFIT 카드가 붉은 배경에 묻히는 문제 ── */ #cost{--scrim:linear-gradient(180deg,rgba(22,12,8,.68),rgba(22,12,8,.80))} .bf{border:1px solid rgba(255,220,205,.42); box-shadow:0 12px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12)} .bf .n{color:#FFD5BC} /* ── 6. 12 창업 상담 — 동의 패널이 반투명해 배경이 글자에 겹치는 문제 ── 폼은 이미 흰 패널이므로, 동의 패널만 불투명에 가깝게 올립니다. */ #contact{--scrim:linear-gradient(180deg,rgba(24,19,15,.70),rgba(24,19,15,.84))} #contact .card.r{background:rgba(120,32,20,.88); border-color:rgba(245,190,170,.55); box-shadow:0 14px 34px rgba(0,0,0,.3)} #contact .card.r h3{color:#FFD9CB} #contact .card.r p, #contact .card.r label{color:#F6EDE6} #contact .card.r b{color:#FFC7B2 !important} /* '(필수)' 라벨 — 배경 위에서도 보이게 */ #contact .form{box-shadow:0 16px 40px rgba(0,0,0,.28)} /* 모바일 — 사진 위 글자는 더 불리하므로 한 단계 더 눌러줍니다 */ @media (max-width:760px){ #menu {--scrim:linear-gradient(180deg,rgba(24,18,14,.82),rgba(24,18,14,.90))} #interior{--scrim:linear-gradient(180deg,rgba(24,19,15,.80),rgba(24,19,15,.86))} #cost {--scrim:linear-gradient(180deg,rgba(22,12,8,.78),rgba(22,12,8,.86))} #contact {--scrim:linear-gradient(180deg,rgba(24,19,15,.78),rgba(24,19,15,.88))} .sec.on-dark{--board:rgba(28,22,18,.62)} } /* ══════════════════════════════════════════════════════════════ 04 메뉴 경쟁력 · 05 창업 경쟁력 배경사진 적용 (2026.09.24) img/bg-menu.jpg (밝은 콘크리트 + 한식 한상) → 검정 글씨 img/bg-strength.jpg (검정 바탕 + 전골) → 흰 글씨 ※ 두 사진의 밝기가 기존 섹션 설정과 반대여서, index.php 를 건드리지 않고 CSS 에서 명암을 뒤집습니다. ══════════════════════════════════════════════════════════════ */ #menu{--bg:url('../img/bg-menu.jpg'); --bg-pos:center top; /* 흰 글씨 유지. 사진이 밝은 콘크리트라 어둡게 덮되, 사진이 그대로 읽힐 만큼만 — 참고 시안의 톤입니다. */ --scrim:linear-gradient(180deg,rgba(26,21,17,.50) 0%,rgba(26,21,17,.60) 48%,rgba(26,21,17,.70) 100%)} #strength{--bg:url('../img/bg-strength.jpg'); --bg-pos:center top; /* 사진이 이미 어두워 스크림은 톤 정리 정도만 */ --scrim:linear-gradient(180deg,rgba(18,16,14,.40) 0%,rgba(18,16,14,.58) 50%,rgba(18,16,14,.74) 100%)} /* ── 05 창업 경쟁력 — 검정 글씨 → 흰 글씨로 전환 ─────────────── */ #strength{color:#fff; --ink:#FFFFFF; --ink2:#DFD7CC; --ink3:#B0A89D; --line:rgba(255,255,255,.34); --line2:rgba(255,255,255,.14); --board:rgba(28,22,18,.52); --fill:rgba(255,255,255,.14)} #strength h2, #strength .eyebrow em{color:#E8B888} #strength .eyebrow{color:#D9CFC2} #strength .lead, #strength .copy, #strength .big{ text-shadow:0 1px 14px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4)} #strength .ph{border-color:rgba(255,255,255,.3)} /* 시간대 카드 — 유리판처럼 */ #strength .dp{backdrop-filter:blur(10px) saturate(1.1)} #strength .dp p{color:var(--ink2)} /* 어두운 면에서는 원색이 탁해 보여 한 단계 밝은 톤으로 */ #strength .dp.l h3{color:#F0A08A} #strength .dp.d h3{color:#EBC87E} #strength .dp.a h3{color:#8FD4C8} #strength .metric div{backdrop-filter:blur(8px)} /* 수치·그래프·주석은 사진 위에서도 흰 면 유지 (대비 검증값 보존) */ #strength .chart, #strength .pl, #strength .anno, #strength .warn, #strength .req{ --ink:#1A1714; --ink2:#5B554D; --ink3:#958F84; --line:#E0D9CC; --line2:#EFEAE0; --board:#FFFFFF; --fill:#F2EEE6; color:var(--ink); background:#fff; text-shadow:none} #strength .warn{background:var(--warnbg)} #strength .req{background:var(--tealbg)} @media (max-width:760px){ /* 모바일은 세로로 크게 잘리므로 음식이 남는 위치로 */ #menu {--bg-pos:60% top; --scrim:linear-gradient(180deg,rgba(26,21,17,.60) 0%,rgba(26,21,17,.70) 45%,rgba(26,21,17,.78) 100%)} #strength{--bg-pos:72% top; --scrim:linear-gradient(180deg,rgba(18,16,14,.52) 0%,rgba(18,16,14,.70) 50%,rgba(18,16,14,.82) 100%)} } /* ══════════════════════════════════════════════════════════════ 02 브랜드 철학 사진 교체 · 04 빈 박스 제거 · 메인 워딩 확대 (2026.09.24 · 2차) ══════════════════════════════════════════════════════════════ */ /* ── 1. 02 브랜드 철학 — 새 곰탕 사진 ──────────────────────── img/bg-about.jpg 1300×926 (PC · 배경으로 오른쪽에 배치) img/bg-about-m.jpg 1100×720 (모바일 · 문구 아래 띠로 배치) 그릇이 가운데 오도록 왼쪽 여백을 잘라낸 판본입니다. */ #about{--foodw:min(58%,980px); --foodt:2%} /* 김(연기)이 새 사진의 그릇 위에 오도록 좌표를 다시 잡습니다 */ .steam{aspect-ratio:1300/926} .steam i{left:29%; top:1%; width:43%} /* ── 2. 04 메뉴 경쟁력 — 빈 이미지 박스 제거 + 배경 선명하게 ── 배경사진이 그 자리를 대신하므로 자리만 남기고 상자는 감춥니다. */ #menu .grid.g2 > .ph{visibility:hidden} #menu{--bg-pos:left top} /* ── 3. 각 단락 메인 워딩 62px ─────────────────────────────── 붓글씨체가 작아 보여 섹션 리드 문구를 키웁니다. ※ 히어로 대문(.hero h1)은 2단 그리드 안이라 줄이 깨질 수 있어 56px 그대로 뒀습니다. 같이 키우실지 알려주세요. */ .lead{font-size:62px; line-height:1.28} .lead.sm{font-size:52px; line-height:1.3} @media (max-width:760px){ .lead{font-size:46px; line-height:1.3} .lead.sm{font-size:39px} /* 모바일 김(연기) — 새 사진 기준으로 재정렬 */ .steam i{left:34%; width:40%} #about .ph.foodslot .steam.sm i{left:34%; top:3%; width:40%} /* 모바일도 배경이 보이도록 완화 */ #menu{--bg-pos:58% top} } @media (max-width:360px){ .lead{font-size:42px} .lead.sm{font-size:36px} } /* ── 04 메뉴 카드 — 두 줄 서브카피 줄바꿈 유지 (2026.09.24) ── */ #menu .card p{white-space:pre-line; line-height:1.72} /* ══════════════════════════════════════════════════════════════ 히어로 대문 확대 · 04 메뉴 카드 유리판 (2026.09.24 · 4차) ══════════════════════════════════════════════════════════════ */ /* ── 히어로 대문 — 섹션 리드(62px)보다 위에 오도록 ───────────── 줄바꿈이 원고에 고정돼 있어(3줄) 폭을 재보고 잡은 값입니다. */ .hero h1{font-size:76px; line-height:1.24} /* ── 04 메뉴 카드 — 참고 시안의 유리판 ─────────────────────── 4장 모두 같은 톤. 사진 결이 글자 뒤로 올라오지 않을 만큼만 불투명하게 두고, 테두리는 얇은 흰 선으로 형태만 잡습니다. */ #menu .card, #menu .card.r{ background:rgba(24,19,15,.42); border:1px solid rgba(255,255,255,.26); border-radius:14px; backdrop-filter:blur(14px) saturate(1.05); box-shadow:0 10px 30px rgba(0,0,0,.22); padding:22px 26px; } #menu .card h3, #menu .card.r h3{color:#FFFFFF; font-size:17.5px; margin-bottom:9px} #menu .card p{color:#DED6CA; font-size:14px} @media (max-width:760px){ .hero h1{font-size:46px; line-height:1.26} #menu .card, #menu .card.r{padding:18px 20px} #menu .card h3, #menu .card.r h3{font-size:16px} } @media (max-width:360px){ .hero h1{font-size:42px} } /* ══════════════════════════════════════════════════════════════ 02 브랜드 철학 전면 배경 · 04 메뉴 슬라이드 사진 (2026.09.24 · 5차) ══════════════════════════════════════════════════════════════ */ /* ── 02 브랜드 철학 — 사진을 섹션 전체 배경으로 ──────────────── 그동안은 사진을 오른쪽에 '음식 자리'로 얹고 마스크로 지웠는데, 이 사진은 왼쪽 여백이 넉넉해 전면 배경이 더 맞습니다. 왼쪽(문구 자리)만 밝게 덮고 오른쪽 그릇은 그대로 둡니다. */ #about::before{ background-size:cover; background-position:var(--bg-pos, center); -webkit-mask-image:none; mask-image:none; } #about{--bg-pos:center; --scrim: linear-gradient(90deg, rgba(250,247,242,.93) 0%, rgba(250,247,242,.78) 36%, rgba(250,247,242,.30) 62%, rgba(250,247,242,.14) 100%), linear-gradient(180deg, rgba(250,247,242,0) 44%, rgba(250,247,242,.62) 78%, rgba(250,247,242,.90) 100%)} /* 김(연기) — 배경이 cover 로 바뀌어 그릇 위치가 화면 비율을 따라갑니다. 1400×900 안팎을 기준으로 잡은 값이라, 어긋나 보이면 left/top 만 조정하거나 아래 한 줄을 display:none 으로 바꿔 끄셔도 됩니다. */ #about > .steam{right:auto; left:59%; top:8%; width:18%; aspect-ratio:617/398} #about > .steam i{left:0; top:0; width:100%} /* ── 04 메뉴 슬라이드 — 실제 사진 ──────────────────────────── */ .slide .ph.has-img{padding:0; border-style:solid; overflow:hidden; background:none} .slide .ph.has-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease)} .slide:hover .ph.has-img img{transform:scale(1.05)} .track.car .slide:hover .ph.has-img img{transform:none} @media (max-width:760px){ /* 모바일은 배경을 끄고 문구 아래 사진 한 장으로 (기존 방식 유지) */ #about > .steam{display:none} } /* ══════════════════════════════════════════════════════════════ 02 브랜드 철학 — 실사진 카드 3장 (2026.09.25) 마우스를 올리면 그 카드가 옆으로 넓어지고 안의 사진이 살짝 커집니다. 나머지 두 장은 그만큼 좁아져 전체 폭은 그대로 유지됩니다. ══════════════════════════════════════════════════════════════ */ .phcards{display:flex; gap:12px; margin-top:16px} .phcard{position:relative; flex:1 1 0; min-width:0; height:304px; border-radius:14px; overflow:hidden; background:var(--fill); box-shadow:0 8px 24px rgba(26,23,20,.10); transition:flex-grow .7s var(--ease), box-shadow .5s var(--ease)} .phcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease)} /* 아래쪽만 어둡게 — 글씨가 사진에 먹히지 않도록 */ .phcard::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 40%,rgba(18,13,9,.30) 66%,rgba(18,13,9,.78) 100%)} .phcard .cap{position:absolute; left:22px; right:22px; bottom:20px; z-index:2; color:#fff} .phcard .cap h3{margin:0; font-size:21px; font-weight:800; letter-spacing:-.03em; text-shadow:0 1px 12px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4)} .phcard .cap p{margin:6px 0 0; font-size:12.5px; line-height:1.6; color:#E4DCD1; text-shadow:0 1px 10px rgba(0,0,0,.55)} /* 호버 — 올린 카드는 넓어지고, 나머지는 그만큼 좁아집니다 */ @media (hover:hover){ .phcards:hover .phcard{flex-grow:.72} .phcards .phcard:hover{flex-grow:2.1; box-shadow:0 22px 48px rgba(26,23,20,.24)} .phcard:hover img{transform:scale(1.09)} } @media (prefers-reduced-motion:reduce){ .phcard, .phcard img{transition:none} .phcards:hover .phcard, .phcards .phcard:hover{flex-grow:1} .phcard:hover img{transform:none} } @media (max-width:760px){ .phcards{flex-direction:column; gap:10px} .phcard{height:210px; flex:none} .phcard .cap{left:18px; right:18px; bottom:16px} .phcard .cap h3{font-size:19px} } /* ══════════════════════════════════════════════════════════════ 03 맛집의 기준 — 근거 카드 4장 (2026.09.25) 02 와 같은 호버 확장이지만, 글씨는 사진 위가 아니라 사진 아래. 방송 자막·간판이 들어간 사진이라 글씨를 얹으면 읽기 어렵습니다. ══════════════════════════════════════════════════════════════ */ .phcards.pf .phcard{height:auto; background:none; box-shadow:none; border-radius:0} .phcards.pf .shot{display:block; position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:var(--fill); box-shadow:0 8px 22px rgba(26,23,20,.10); transition:box-shadow .5s var(--ease)} .phcards.pf .shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease)} .phcards.pf figcaption{margin:13px 2px 0} .phcards.pf figcaption h3{margin:0; font-size:15.5px; font-weight:800; letter-spacing:-.025em; line-height:1.45; color:var(--ink); text-wrap:balance} .phcards.pf figcaption p{margin:6px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink3)} .phcards.pf .phcard{margin:0} @media (hover:hover){ .phcards.pf:hover .phcard{flex-grow:.78} .phcards.pf .phcard:hover{flex-grow:2} .phcards.pf .phcard:hover .shot{box-shadow:0 20px 42px rgba(26,23,20,.20)} .phcards.pf .phcard:hover .shot img{transform:scale(1.08)} .phcards.pf .phcard:hover figcaption h3{color:var(--red)} } @media (prefers-reduced-motion:reduce){ .phcards.pf .shot img{transition:none; transform:none !important} } @media (max-width:1180px){ /* 4장이 좁아지므로 2×2 로 */ .phcards.pf{flex-wrap:wrap} .phcards.pf .phcard{flex:1 1 calc(50% - 6px)} .phcards.pf:hover .phcard, .phcards.pf .phcard:hover{flex-grow:1} .phcards.pf .phcard:hover .shot img{transform:scale(1.06)} } @media (max-width:760px){ .phcards.pf{flex-direction:column; flex-wrap:nowrap} .phcards.pf .phcard{flex:none; width:100%} .phcards.pf figcaption h3{font-size:16px} } /* ── 03 근거 카드 — 호버 시 카드가 세로로 커지던 문제 수정 (2026.09.25) 사진에 aspect-ratio(16:9)를 걸어두니, 카드가 옆으로 넓어질 때 높이까지 같이 늘어나 한 장만 거대해졌습니다. 높이를 고정해 두면 넓어질수록 좌우가 더 보이기만 합니다. */ .phcards{align-items:flex-start} .phcards.pf .shot{aspect-ratio:auto; height:208px} @media (max-width:1180px){ .phcards.pf .shot{height:200px} } @media (max-width:760px){ .phcards.pf .shot{height:210px} } /* ── 03 근거 카드 — 회색 막이 덮이던 문제 수정 (2026.09.25) 02 카드의 '아래쪽 어둡게' 그라데이션(.phcard::after)이 03 카드에도 그대로 걸려, 사진과 글씨 위를 덮고 있었습니다. 03 은 글씨가 사진 밖에 있으므로 이 막이 필요 없습니다. */ .phcards.pf .phcard::after{content:none; display:none} .phcards.pf .phcard{background:transparent} /* ── 마무리 문장(.big)도 붓글씨로 (2026.09.25) ───────────────── '잘 팔리는 메뉴를 만드는 것에서 끝나지 않고 …' 같은 맺음 문장. 섹션 리드(62px)보다는 작게 둬서 서열을 지킵니다. */ .big{font-family:var(--brush); font-weight:400; font-size:42px; line-height:1.34; letter-spacing:.005em} @media (max-width:760px){ .big{font-size:34px; line-height:1.32} } @media (max-width:360px){ .big{font-size:31px} } /* ══════════════════════════════════════════════════════════════ 07 본사 지원 — 시안 레이아웃 (2026.09.25) 배경: 매장 대기줄 사진 (어둡게) · 글씨 흰색 오른쪽: 누끼 그릇 2장이 겹쳐 떠 있는 구성 ══════════════════════════════════════════════════════════════ */ #support{--bg:url('../img/bg-support.jpg'); --bg-pos:center 38%; /* 왼쪽(문구)은 진하게, 오른쪽(그릇 뒤)은 조금 열어 매장 분위기를 남깁니다 */ --scrim:linear-gradient(100deg, rgba(22,17,13,.92) 0%, rgba(22,17,13,.86) 40%, rgba(22,17,13,.62) 70%, rgba(22,17,13,.70) 100%)} .sup-top{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start} .sup-copy{max-width:620px; padding-top:2px} /* 붉은 붓글씨 한 줄 — 시안의 강조 문구 */ .sup-hi{font-family:var(--brush); font-weight:400; font-size:40px; line-height:1.3; color:#F0A084; margin:30px 0 0; letter-spacing:.005em; text-shadow:0 1px 14px rgba(0,0,0,.55)} .sup-copy .note{margin-top:8px} /* 누끼 그릇 — 위아래로 겹쳐 놓고 아주 천천히 떠오르내립니다 */ .sup-dish{position:relative; min-height:620px} .sup-dish img{position:absolute; display:block; height:auto; filter:drop-shadow(0 26px 44px rgba(0,0,0,.5))} .sup-dish .d1{top:-52px; right:-2%; width:78%; animation:sup-float 7s ease-in-out infinite} .sup-dish .d2{top:40%; right:12%; width:74%; animation:sup-float 7s ease-in-out 1.6s infinite} @keyframes sup-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @media (prefers-reduced-motion:reduce){ .sup-dish img{animation:none} } /* CHECK 카드 — 사진 위에서도 흰 면 유지 (시안과 동일) */ #support .chk{background:#FFFFFF; border-color:#E6DFD2; --ink:#1A1714; --ink2:#5B554D; --ink3:#958F84; color:var(--ink); box-shadow:0 10px 28px rgba(0,0,0,.18)} #support .chk h3{color:#1A1714} #support .chk p{color:#5B554D} #support .chk .n{color:var(--red)} /* 밀키트 패널 — 크림 바탕 + 오른쪽 배너 이미지 */ #support .milkit{background:#F4ECDE; border:1px solid #E3D7C2; border-radius:16px; backdrop-filter:none; overflow:hidden; color:#1A1714; --ink:#1A1714; --ink2:#5B554D; --ink3:#958F84; --line:#E0D9CC; box-shadow:0 16px 40px rgba(0,0,0,.22)} #support .milkit .eyebrow, #support .milkit .eyebrow em{color:var(--teal) !important} #support .milkit .lead.sm{color:var(--teal) !important; text-shadow:none} #support .milkit .big{color:var(--teal) !important; text-shadow:none} #support .milkit .copy, #support .milkit .note{color:var(--ink2); text-shadow:none} .milkit-shot{margin:-36px -32px -36px 0; align-self:stretch} .milkit-shot img{display:block; width:100%; height:100%; object-fit:cover; object-position:center right} @media (max-width:1180px){ .sup-dish{min-height:520px} .sup-dish .d1{width:82%} .sup-dish .d2{width:78%} } @media (max-width:900px){ /* 문구 먼저, 그 아래에 그릇 — 02 섹션과 같은 방식 */ .sup-top{grid-template-columns:1fr; gap:8px} .sup-copy{max-width:none} .sup-dish{min-height:0; display:flex; gap:8px; margin-top:22px} .sup-dish img{position:static; width:50%; animation:none} #support{--scrim:linear-gradient(180deg,rgba(22,17,13,.90),rgba(22,17,13,.84))} .sup-hi{font-size:34px} .milkit-shot{margin:22px -32px -36px; } .milkit-shot img{height:auto} } @media (max-width:760px){ #support .milkit{padding:28px 20px !important} .milkit-shot{margin:20px -20px -28px} .sup-hi{font-size:31px} } /* ── 밀키트 패널 보정 (2026.09.25) ──────────────────────────── · 패널 바탕색을 배너 이미지의 바탕색(#F0DECB)과 맞췄습니다. 이미지 위아래 여백이 배경에 녹아 잘린 느낌이 사라집니다. · 초록 글씨 → 검정 · 버튼 → 빨강 */ #support .milkit{background:#F0DECB; border-color:#E0CDB6} #support .milkit .eyebrow, #support .milkit .eyebrow em, #support .milkit .lead.sm, #support .milkit .big{color:var(--ink) !important} #support .milkit .btn.t{background:var(--red); color:#fff} #support .milkit .btn.t:hover{background:var(--reddk); box-shadow:0 10px 24px rgba(168,50,31,.3)} /* 배너 이미지 — 오른쪽·아래로만 붙이고 원본 비율 유지 */ #support .milkit .grid.g2{align-items:center !important} .milkit-shot{margin:0 -32px -36px 0; display:flex; align-items:center; justify-content:flex-end} .milkit-shot img{width:100%; height:auto; object-fit:contain; object-position:center} @media (max-width:900px){ .milkit-shot{margin:18px -32px -36px; justify-content:center} } @media (max-width:760px){ .milkit-shot{margin:16px -20px -28px} } /* ── 07 본사 지원 — 크기·배열 재조정 (2026.09.25) ────────────── 누끼 그릇이 너무 커서 글씨 쪽까지 넘어오고, 아래 CHECK 줄까지 밀고 내려갔습니다. 원본 해상도(581·563px)를 넘지 않도록 고정폭으로 잡고, 두 장이 겹치는 자리를 다시 계산했습니다. */ .sup-top{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:28px} /* 문구 — 2단 구성이라 전체 리드(62px)보다 한 단계 작게 */ #support .sup-copy .lead{font-size:52px; line-height:1.3} /* 소제목은 명조로 — 대문(붓글씨)과 서체를 나눠 단이 구분됩니다 */ #support .sup-copy .lead.sm{font-family:var(--serif); font-weight:600; font-size:34px; line-height:1.55; letter-spacing:-.02em} #support .sup-hi{font-size:36px; margin-top:26px} /* 그릇 — 가로형 누끼 2장 (581×375 / 563×378) */ .sup-dish{min-height:0; height:566px; pointer-events:none} .sup-dish img{width:auto; max-width:none} .sup-dish .d1{top:0; right:-18px; width:min(460px,100%)} .sup-dish .d2{top:252px; right:56px; width:min(448px,92%)} @media (max-width:1180px){ .sup-top{grid-template-columns:1fr; gap:10px} .sup-dish{height:auto; display:flex; gap:10px; margin-top:26px; align-items:center} .sup-dish img{position:static; width:50%; max-width:400px; animation:none} #support .sup-copy .lead{font-size:46px} #support .sup-copy .lead.sm{font-size:30px} #support{--scrim:linear-gradient(180deg,rgba(22,17,13,.90),rgba(22,17,13,.84))} } @media (max-width:760px){ #support .sup-copy .lead{font-size:40px} #support .sup-copy .lead.sm{font-size:27px} #support .sup-hi{font-size:30px} .sup-dish{gap:6px; margin-top:20px} } /* ══════════════════════════════════════════════════════════════ 07 본사 지원 · 마무리 문장 — 4건 수정 (2026.09.25) ══════════════════════════════════════════════════════════════ */ /* 1. 소제목 작게 — 명조 34 → 26px */ #support .sup-copy .lead.sm{font-family:var(--serif); font-weight:600; font-size:26px; line-height:1.6; letter-spacing:-.02em} /* 2. 누끼 그릇 1.5배 — 460→690px / 448→672px 원본이 581·563px 이라 약간만 확대됩니다. 오른쪽 여백까지 넘겨 놓아 시안처럼 화면 밖으로 흘러나가게 했습니다. */ .sup-dish{height:830px} .sup-dish .d1{top:0; right:-130px; width:690px} .sup-dish .d2{top:378px; right:-30px; width:672px} /* 3. 밀키트 배너 — 패널 오른쪽을 가득 채우게 */ #support .milkit .grid.g2{align-items:stretch !important} .milkit-shot{margin:-58px -32px -36px 0; display:block; overflow:hidden} .milkit-shot img{width:100%; height:100%; object-fit:cover; object-position:65% center; display:block} /* 4. 마무리 문장(.big)은 다시 명조로 */ .big{font-family:var(--serif); font-weight:600; font-size:30px; line-height:1.75; letter-spacing:-.025em} @media (max-width:1180px){ .sup-dish{height:auto} .sup-dish .d1, .sup-dish .d2{position:static; width:50%; max-width:440px} #support .sup-copy .lead.sm{font-size:24px} .milkit-shot{margin:22px -32px -36px} .milkit-shot img{height:auto; object-fit:contain} .big{font-size:26px} } @media (max-width:760px){ #support .sup-copy .lead.sm{font-size:22px} .milkit-shot{margin:18px -20px -28px} .big{font-size:23px; line-height:1.7} } /* ══════════════════════════════════════════════════════════════ 07 본사 지원 — 4건 수정 (2026.09.25 · 2차) ══════════════════════════════════════════════════════════════ */ /* 1. 밀키트 — 이미지를 패널 '배경'으로 깔아 전체 영역을 채웁니다. 오른쪽 칸에 로 넣던 방식은 칸 크기에 따라 여백이 생겨 아무리 맞춰도 네모로 잘려 보였습니다. 배경으로 바꾸고, 글씨가 앉는 왼쪽만 크림색으로 덮어 항상 깨끗하게 둡니다. */ #support .milkit{ background-color:#F0DECB; background-image: linear-gradient(90deg,#F0DECB 0%,#F0DECB 36%,rgba(240,222,203,0) 58%), url('../img/support-milkit.jpg'); background-size:auto, auto 100%; background-position:left center, right center; background-repeat:no-repeat, no-repeat} .milkit-shot{display:none} /* 오른쪽 칸 이미지는 이제 불필요 */ #support .milkit .grid.g2{grid-template-columns:1fr; max-width:52%} /* 2. '본사 지원' 제목을 명조로 */ #support h2{font-family:var(--serif); font-weight:700; font-size:22px; letter-spacing:-.02em} /* 3. 그릇 영역이 섹션 높이를 늘리지 않게 — 절대배치로 빼서 글씨 칸 높이만 섹션 높이가 됩니다. */ .sup-top{position:relative; display:block} .sup-copy{max-width:min(620px,54%)} .sup-dish{position:absolute; top:0; right:0; width:52%; height:100%; min-height:0; pointer-events:none} /* 4. 그릇 15% 축소 — 690→586px / 672→571px 원본(581·563px)과 거의 같아져 가장 선명한 크기입니다. */ .sup-dish .d1{top:0; right:-96px; width:586px} .sup-dish .d2{top:300px; right:-16px; width:571px} @media (max-width:1180px){ .sup-top{display:block} .sup-copy{max-width:none} .sup-dish{position:static; width:auto; height:auto; display:flex; gap:10px; margin-top:24px; align-items:center} .sup-dish .d1, .sup-dish .d2{position:static; width:50%; max-width:420px} #support .milkit{background-image:none} #support .milkit .grid.g2{max-width:none} .milkit-shot{display:block; margin:22px -32px -36px} .milkit-shot img{width:100%; height:auto; object-fit:contain} } @media (max-width:760px){ .milkit-shot{margin:18px -20px -28px} #support h2{font-size:20px} } /* ══════════════════════════════════════════════════════════════ 섹션 제목 전체를 명조로 · 5pt 축소 (2026.09.25) 브랜드 철학 / 맛집의 기준 / 메뉴 경쟁력 / 창업 경쟁력 / 매장 인테리어 / 본사 지원 / 매장 현황 / 비즈니스 모델 / 자주 묻는 질문 / 창업 비용 / 창업 상담 신청 — 11개 전부. 붓글씨는 히어로 대문과 리드 문구에만 남습니다. ══════════════════════════════════════════════════════════════ */ .sec h2, #support h2{ font-family:var(--serif); font-weight:700; font-size:31px; /* 36 → 31px */ line-height:1.4; letter-spacing:-.025em; } @media (max-width:760px){ .sec h2, #support h2{font-size:26px} } @media (max-width:360px){ .sec h2, #support h2{font-size:24px} } /* ── 섹션 제목 10pt 추가 축소 (2026.09.25) ── 31 → 21px */ .sec h2, #support h2{font-size:21px; line-height:1.45} @media (max-width:760px){ .sec h2, #support h2{font-size:18px} } @media (max-width:360px){ .sec h2, #support h2{font-size:17px} } /* ── 모바일 밀키트 이미지 — 제품이 가운데 오도록 (2026.09.25) PC 에서는 배너 전체가 배경으로 깔리지만, 모바일에서는 아래로 내려가면서 좌측 빈 여백과 세로 문구만 크게 보였습니다. 제품(파우치·기프트박스·곰탕 한 그릇) 쪽을 기준으로 잘라 보여줍니다. */ @media (max-width:1180px){ .milkit-shot{display:block; height:212px; overflow:hidden; margin:22px -32px -36px; border-radius:0} .milkit-shot img{width:100%; height:100%; object-fit:cover; object-position:66% 72%} } @media (max-width:760px){ .milkit-shot{height:190px; margin:18px -20px -28px} .milkit-shot img{object-position:68% 74%} } @media (max-width:420px){ .milkit-shot{height:172px} .milkit-shot img{object-position:70% 76%} } /* ══════════════════════════════════════════════════════════════ 02 브랜드 철학 — 모바일 배경 통일 · 김(연기) 다듬기 (2026.09.25) ══════════════════════════════════════════════════════════════ */ /* 1. 모바일에서도 PC 와 같은 '섹션 전체 배경' 방식으로. 지금까지는 모바일에서 배경을 끄고 본문 아래에 사진을 한 장 따로 넣었는데, 그 블록이 화면 대부분을 빈 크림색으로 채우고 있었습니다. 블록을 없애고 배경으로 대체합니다. */ @media (max-width:760px){ #about::before{ display:block !important; background-image:url('../img/bg-about-m.jpg') !important; background-color:#FAF7F2; background-size:cover !important; background-position:58% center !important; -webkit-mask-image:none !important; mask-image:none !important} #about{--scrim:linear-gradient(180deg, rgba(250,247,242,.88) 0%, rgba(250,247,242,.72) 30%, rgba(250,247,242,.72) 70%, rgba(250,247,242,.90) 100%)} /* 본문 아래 따로 넣던 사진 블록 제거 — 빈 공간의 원인이었습니다 */ #about .ph.foodslot{display:none !important} /* 배경이 잘려 들어가 그릇 위치가 화면마다 달라지므로 김은 끕니다 */ #about > .steam, #about .steam.sm{display:none !important} } /* 2. 김(연기) — 가장자리가 네모로 잘려 보이던 문제. PNG 자체에 여백이 거의 없어 경계가 그대로 드러났습니다. 가장자리를 부드럽게 지우고, 진하기도 한 단계 낮춥니다. */ .steam i{ -webkit-mask-image:radial-gradient(62% 66% at 50% 56%, #000 34%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.28) 76%, transparent 92%); mask-image:radial-gradient(62% 66% at 50% 56%, #000 34%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.28) 76%, transparent 92%); } @keyframes th-steam{ 0%{opacity:0; transform:translateY(12%) scale(.88) rotate(-1.5deg)} 22%{opacity:.58; transform:translateY(2%) scale(.96) rotate(-.5deg)} 58%{opacity:.42; transform:translateY(-12%) scale(1.08) rotate(1deg)} 100%{opacity:0; transform:translateY(-30%) scale(1.26) rotate(2.5deg)} } /* ── 붓글씨 문구 행간 좁히기 (2026.09.25) ───────────────────── East Sea Dokdo 는 글자 자체에 위아래 여백이 넉넉해서, 보통 서체 기준(1.24~1.3)을 쓰면 줄 사이가 크게 떠 보입니다. 1.05~1.12 로 당겨 한 덩어리로 읽히게 합니다. */ .hero h1{line-height:1.06} .lead{line-height:1.10} .lead.sm{line-height:1.12} .sup-hi{line-height:1.12} /* 명조로 쓰는 소제목은 원래 행간 유지 (붓글씨와 기준이 다릅니다) */ #support .sup-copy .lead.sm{line-height:1.6} @media (max-width:760px){ .hero h1{line-height:1.08} .lead{line-height:1.12} .lead.sm{line-height:1.14} #support .sup-copy .lead.sm{line-height:1.6} } /* ══════════════════════════════════════════════════════════════ 팝업 여백 · 히어로 2단 유지 · 개인정보 모달 (2026.09.25) ══════════════════════════════════════════════════════════════ */ /* 1. 팝업레이어 — 이미지 위아래 흰 여백 제거 가 inline 이라 글줄 기준선만큼 아래 여백이 생기고, 그누보드 기본 마크업의 줄바꿈이 위쪽 여백을 만듭니다. */ .hd_pops_con{line-height:0; font-size:0; padding:0 !important} .hd_pops_con img{display:block; vertical-align:top; margin:0} .hd_pops_con > div, .hd_pops_con > p{margin:0; padding:0; line-height:0} .hd_pops_con a{display:block; line-height:0} /* 2. 히어로 빠른상담 — 780px 까지는 오른쪽에 두고, 그 아래에서만 본문 밑으로 내려갑니다. */ @media (max-width:1180px) and (min-width:781px){ .hero{grid-template-columns:minmax(0,1fr) 322px; gap:26px} .hero .form{padding:20px} .hero .form strong{font-size:14px} } @media (max-width:780px){ .hero{grid-template-columns:1fr} } /* 3. [정책보기] 버튼 + 개인정보취급방침 모달 */ .privlink{margin-left:8px; flex:none; background:none; border:0; padding:0; font:inherit; font-size:11.5px; font-weight:600; color:inherit; opacity:.75; text-decoration:underline; text-underline-offset:2px; cursor:pointer} .privlink:hover{opacity:1; color:var(--red)} #contact .privlink{color:#FFD9CB; opacity:.9; margin-left:6px} #contact .privlink:hover{color:#fff} .privwrap{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px} .privwrap[hidden]{display:none} .privdim{position:absolute; inset:0; background:rgba(20,15,11,.62); backdrop-filter:blur(2px)} .privbox{position:relative; z-index:1; width:min(620px,100%); max-height:82vh; overflow:auto; background:#fff; color:var(--ink); border-radius:14px; padding:30px 32px 28px; box-shadow:0 26px 60px rgba(0,0,0,.34)} .privbox h3{margin:0 0 16px; font-family:var(--serif); font-weight:700; font-size:20px; letter-spacing:-.02em} .privx{position:absolute; top:14px; right:16px; width:34px; height:34px; border:0; background:none; font-size:24px; line-height:1; color:var(--ink3); cursor:pointer; border-radius:50%} .privx:hover{background:var(--fill); color:var(--ink)} .privbody p{margin:0 0 12px; font-size:13.5px; line-height:1.85; color:var(--ink2)} .privbody b{color:var(--ink)} .privnote{margin-top:16px !important; padding-top:14px; border-top:1px solid var(--line2); font-size:12.5px !important; color:var(--ink3) !important} @media (max-width:760px){ .privbox{padding:26px 20px 22px; max-height:86vh} .privbox h3{font-size:18px} .privbody p{font-size:13px} } /* [정책보기] 는 동의 문구와 같은 줄에 붙습니다 */ .qagree label span, .dockagree span{display:inline} .privlink{display:inline; margin-left:6px; white-space:nowrap} /* ── 02 사진 카드 3장이 모바일에서 사라지던 문제 (2026.09.25) 03 근거 카드 높이를 고정하려고 .phcards 에 align-items:flex-start 를 줬는데, 모바일에서 세로 배열(flex-direction:column)로 바뀌면 그 값이 '가로 폭을 내용에 맞춤'으로 동작합니다. 카드 안의 사진과 글씨가 모두 absolute 라 내용 폭이 0 → 카드 폭도 0 이 되어 화면에서 사라졌습니다. */ @media (max-width:760px){ .phcards{align-items:stretch} .phcards .phcard{width:100%; flex:none} } /* ══════════════════════════════════════════════════════════════ 슬라이드 드래그 · 07 그릇 배치 (2026.09.25) ══════════════════════════════════════════════════════════════ */ /* 마우스로 끌어 넘길 때 사진·글씨가 선택되거나 끌려가지 않게 */ .track, .phcards, .vids, .slider, .sup-dish{ -webkit-user-select:none; user-select:none} .track img, .phcards img, .vids img, .sup-dish img, .track .ph, .phcards .ph{ -webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none} .track{cursor:grab; touch-action:pan-y} .track.drag{cursor:grabbing} .track.drag *{pointer-events:none} /* 끌던 중 링크·호버가 끼어들지 않게 */ /* 07 누끼 그릇 — 좁은 화면에서도 글씨 오른쪽 빈자리에 겹쳐 배치. 잘려도 괜찮다고 하셔서, 나란히 눕히지 않고 원래 구성을 유지합니다. */ @media (max-width:1180px){ .sup-top{position:relative; display:block} .sup-copy{max-width:min(560px,62%)} .sup-dish{position:absolute; top:0; right:0; width:46%; height:100%; display:block; margin:0; pointer-events:none; overflow:visible} .sup-dish .d1, .sup-dish .d2{position:absolute; max-width:none} .sup-dish .d1{top:0; right:-90px; width:460px} .sup-dish .d2{top:212px; right:-20px; width:448px} } @media (max-width:900px){ .sup-copy{max-width:min(460px,66%)} .sup-dish{width:44%} .sup-dish .d1{top:0; right:-120px; width:390px} .sup-dish .d2{top:182px; right:-46px; width:380px} } @media (max-width:760px){ /* 폰에서는 글씨를 덮지 않도록 오른쪽 끝에 작게, 위아래로 겹쳐서 */ .sup-copy{max-width:72%} .sup-dish{width:40%} .sup-dish .d1{top:4%; right:-70px; width:290px} .sup-dish .d2{top:210px; right:-34px; width:282px} } @media (max-width:480px){ .sup-copy{max-width:78%} .sup-dish .d1{top:2%; right:-64px; width:230px} .sup-dish .d2{top:168px; right:-30px; width:224px} } /* ── 07 누끼 그릇 — 위아래로 더 벌리기 (2026.09.25) 위(곰탕)는 더 위로, 아래(비빔밥)는 더 아래로. */ .sup-dish .d1{top:-62px} .sup-dish .d2{top:362px} @media (max-width:1180px){ .sup-dish .d1{top:-52px} .sup-dish .d2{top:266px} } @media (max-width:900px){ .sup-dish .d1{top:-44px} .sup-dish .d2{top:228px} } @media (max-width:760px){ .sup-dish .d1{top:-32px} .sup-dish .d2{top:252px} } @media (max-width:480px){ .sup-dish .d1{top:-24px} .sup-dish .d2{top:202px} } /* ── 04 메뉴 경쟁력 — 특징 카드에 사진 (2026.09.25) ──────────── 좁은 한 단에 들어가므로 왼쪽 정사각 사진 + 오른쪽 글씨. */ #menu .card.mfeat{display:flex; align-items:flex-start; gap:14px; padding:14px 16px} .mshot{flex:none; width:74px; height:74px; border-radius:10px; overflow:hidden; background:rgba(255,255,255,.1); display:block} .mshot img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease)} #menu .card.mfeat:hover .mshot img{transform:scale(1.07)} #menu .card.mfeat > div{min-width:0; flex:1 1 auto} #menu .card.mfeat h3{margin:2px 0 6px; font-size:15.5px; line-height:1.4} #menu .card.mfeat p{font-size:13px; line-height:1.7} @media (max-width:1180px){ .mshot{width:66px; height:66px} #menu .card.mfeat h3{font-size:15px} } @media (max-width:760px){ .mshot{width:60px; height:60px} #menu .card.mfeat{gap:12px; padding:13px 14px} #menu .card.mfeat h3{font-size:14.5px} #menu .card.mfeat p{font-size:12.5px} } /* ── 04 메뉴 경쟁력 — 문구·카드 왼쪽으로 · 카드 호버 확대 (2026.09.25) 지금까지는 왼쪽 칸이 비고 오른쪽 칸에 글씨가 있었습니다. 두 칸의 순서만 바꿔 글씨가 왼쪽으로 옵니다. */ #menu .grid.g2 > .ph{order:2} #menu .grid.g2 > *:not(.ph){order:1} /* 특징 카드 5장 — 마우스를 올리면 카드가 살짝 커집니다 */ #menu .card.mfeat{ transform-origin:left center; transition:transform .45s var(--ease), background .3s, border-color .3s, box-shadow .45s var(--ease)} #menu .card.mfeat:hover{ transform:scale(1.035); background:rgba(28,22,18,.62); border-color:rgba(255,255,255,.44); box-shadow:0 16px 36px rgba(0,0,0,.34)} #menu .card.mfeat:hover h3{color:#FFD9C6} @media (prefers-reduced-motion:reduce){ #menu .card.mfeat, #menu .card.mfeat .mshot img{transition:none} #menu .card.mfeat:hover{transform:none} } @media (max-width:760px){ #menu .card.mfeat:hover{transform:scale(1.02)} } /* ── 04 특징 카드 호버 — 커지는 정도 2배 (2026.09.25) 기존 1.035(3.5% 확대) → 1.07(7% 확대). 사진도 함께 키웁니다. */ #menu .card.mfeat:hover{transform:scale(1.07)} #menu .card.mfeat:hover .mshot img{transform:scale(1.14)} #menu .card.mfeat:hover{box-shadow:0 20px 44px rgba(0,0,0,.40)} @media (max-width:760px){ #menu .card.mfeat:hover{transform:scale(1.04)} } @media (prefers-reduced-motion:reduce){ #menu .card.mfeat:hover{transform:none} #menu .card.mfeat:hover .mshot img{transform:none} } /* ══════════════════════════════════════════════════════════════ 슬라이드 → 섹션 배경 연동 · 인터뷰 카드 클릭 (2026.09.26) ══════════════════════════════════════════════════════════════ */ /* 가운데 온 슬라이드 사진이 섹션 배경으로 은은하게 깔립니다. 기존 배경(::before) 위, 스크림(::after) 아래에 한 겹 더 놓습니다. */ .sec.has-bg > .bgswap{ position:absolute; left:0; right:0; top:-6%; bottom:-6%; z-index:0; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; transition:opacity 1.1s var(--ease), background-image 0s; pointer-events:none} .sec.has-bg > .bgswap.on{opacity:.42} @media (prefers-reduced-motion:reduce){ .sec.has-bg > .bgswap{transition:none} } /* 점주 인터뷰 카드 — 이제 클릭으로만 바뀝니다 */ .vid{cursor:pointer} .vid:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:10px} .vid:not(.on):hover .ph{opacity:.94; border-color:var(--ink3)} /* ══════════════════════════════════════════════════════════════ 06 매장 인테리어 — 지점별 외관 리스트 (2026.09.26) ══════════════════════════════════════════════════════════════ */ .branches{margin-top:56px} .brgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px 14px} .brcard{margin:0} .brcard .shot{display:block; position:relative; height:170px; border-radius:12px; overflow:hidden; background:var(--fill); box-shadow:0 8px 22px rgba(0,0,0,.24); transition:box-shadow .5s var(--ease), transform .5s var(--ease)} .brcard .shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease)} .brcard figcaption{margin:11px 2px 0; font-size:14px; font-weight:700; letter-spacing:-.02em; color:var(--ink)} @media (hover:hover){ .brcard:hover .shot{transform:translateY(-4px); box-shadow:0 18px 38px rgba(0,0,0,.34)} .brcard:hover .shot img{transform:scale(1.07)} .brcard:hover figcaption{color:#E8B888} } @media (prefers-reduced-motion:reduce){ .brcard .shot, .brcard .shot img{transition:none} .brcard:hover .shot{transform:none} .brcard:hover .shot img{transform:none} } @media (max-width:1180px){ .brgrid{grid-template-columns:repeat(3,1fr)} .brcard .shot{height:160px} } @media (max-width:760px){ .branches{margin-top:44px} .brgrid{grid-template-columns:repeat(2,1fr); gap:14px 10px} .brcard .shot{height:120px} .brcard figcaption{font-size:13px; margin-top:9px} } /* ── 06 매장 인테리어 — 배경 사진 선명하게 (2026.09.26) 원인 2가지였습니다. · 슬라이드 연동 배경이 42% 로만 깔려 아래의 어두운 임시 배경과 섞이면서 뿌옇게 보였습니다 → 88% 로 올립니다. · 스크림이 위아래 균일하게 진해 사진 전체를 덮고 있었습니다 → 글씨가 있는 왼쪽만 진하게, 오른쪽은 열어 둡니다. 사진 파일도 880 → 1360px 로 다시 뽑아 확대 시 덜 뭉개집니다. */ #interior > .bgswap.on{opacity:.88} #interior{--scrim:linear-gradient(105deg, rgba(20,15,11,.86) 0%, rgba(20,15,11,.70) 32%, rgba(20,15,11,.40) 60%, rgba(20,15,11,.32) 100%)} /* 슬라이드·지점 카드가 놓이는 아래쪽만 살짝 눌러 글씨를 지킵니다 */ #interior::after{background: var(--scrim), linear-gradient(180deg, rgba(20,15,11,0) 52%, rgba(20,15,11,.42) 100%)} @media (max-width:760px){ #interior > .bgswap.on{opacity:.72} #interior{--scrim:linear-gradient(180deg, rgba(20,15,11,.80) 0%, rgba(20,15,11,.62) 45%, rgba(20,15,11,.78) 100%)} } /* ══════════════════════════════════════════════════════════════ 08 매장 현황 · 09 비즈니스 모델 배경 사진 (2026.09.27) 두 섹션 모두 그래프 · 표 · 수치가 주인공이라 글씨는 검정 그대로, 사진은 뒤에서 분위기만 잡는 정도로 눌러 둡니다. ══════════════════════════════════════════════════════════════ */ #store{--bg:url('../img/bg-store.jpg'); --bg-pos:center 42%; /* 위는 조금 열고(매장 분위기), 표·카드가 오는 아래는 더 덮습니다 */ --scrim:linear-gradient(180deg, rgba(250,247,242,.86) 0%, rgba(250,247,242,.90) 40%, rgba(250,247,242,.94) 100%)} #business{--bg:url('../img/bg-business.jpg'); --bg-pos:center 30%; --scrim:linear-gradient(180deg, rgba(250,247,242,.88) 0%, rgba(250,247,242,.92) 45%, rgba(250,247,242,.95) 100%)} /* 사진 위에 놓이는 흰 패널은 경계를 잃지 않도록 그림자를 줍니다 */ #store .chart, #store .card, #store .warn, #store .req, #store .anno, #business .chart, #business .pl, #business .type, #business .booster, #business .warn, #business .req, #business .anno{ box-shadow:0 10px 28px rgba(26,23,20,.08)} #business .type, #business .booster, #business .pl{background:#fff} @media (max-width:760px){ #store {--bg-pos:58% 42%; --scrim:linear-gradient(180deg,rgba(250,247,242,.90),rgba(250,247,242,.95))} #business{--bg-pos:56% 30%; --scrim:linear-gradient(180deg,rgba(250,247,242,.91),rgba(250,247,242,.96))} } /* ── 04 메뉴 — 슬라이드 사진이 배경에 겹치던 것 해제 (2026.09.27) 슬라이드 → 배경 연동은 06 매장 인테리어에만 남깁니다. 04 는 이미 한상차림 배경이 깔려 있어 두 장이 겹치면서 양쪽 다 흐려 보였습니다. */ #menu > .bgswap{display:none !important} /* ── 04 메뉴 — 모바일 빈 공간 제거 (2026.09.27) PC 에서 오른쪽 자리를 비워 두려고 숨겨 놓은 칸이, 모바일에서 한 줄로 내려오면서 340px 짜리 빈 블록이 됐습니다. 한 단으로 바뀌는 구간에서는 아예 없앱니다. */ @media (max-width:760px){ #menu .grid.g2 > .ph{display:none !important} #menu .grid.g2{gap:0} } /* ── 07 누끼 그릇 — 겹침 복원(PC) · 위치 조정(모바일) (2026.09.27) */ /* PC : 두 장이 다시 살짝 겹치게 (362 → 282px) */ .sup-dish .d2{top:282px} @media (max-width:1180px){ .sup-dish .d2{top:214px} } @media (max-width:900px) { .sup-dish .d2{top:186px} } /* 모바일 : 글씨와 겹치던 것을 아래쪽 빈 자리로 내립니다. 위에서부터가 아니라 문단 끝을 기준으로 잡아, 문장이 길어지거나 짧아져도 항상 마지막 짧은 줄 옆에 놓입니다. */ @media (max-width:760px){ .sup-copy{max-width:68%} .sup-dish .d1{top:auto; bottom:208px; right:-58px; width:236px} .sup-dish .d2{top:auto; bottom:-24px; right:-24px; width:228px} } @media (max-width:480px){ .sup-copy{max-width:72%} .sup-dish .d1{bottom:172px; right:-54px; width:196px} .sup-dish .d2{bottom:-18px; right:-22px; width:190px} } /* ── 07 누끼 그릇 모바일 — 이전 배치로 되돌리고 아래 그릇만 40px 내림 (2026.09.27) 문단 끝 기준(bottom)으로 바꿨던 것을 취소하고, 원래의 위에서부터(top) 방식으로 복귀합니다. */ @media (max-width:760px){ .sup-copy{max-width:72%} .sup-dish{width:40%} .sup-dish .d1{top:-32px; bottom:auto; right:-70px; width:290px} .sup-dish .d2{top:292px; bottom:auto; right:-34px; width:282px} /* 252 → 292 */ } @media (max-width:480px){ .sup-copy{max-width:78%} .sup-dish .d1{top:-24px; bottom:auto; right:-64px; width:230px} .sup-dish .d2{top:242px; bottom:auto; right:-30px; width:224px} /* 202 → 242 */ } /* ══════════════════════════════════════════════════════════════ 12 창업 상담 신청 — 호랑이 일러스트 배경 (2026.09.27) 폼과 동의 패널을 가리지 않도록 오른쪽 뒤에 워터마크처럼 둡니다. ══════════════════════════════════════════════════════════════ */ #contact{position:relative; overflow:hidden} #contact::before{ background-image:url('../img/contact-tiger.png'), var(--bg-ph); background-repeat:no-repeat, no-repeat; background-size:auto 88%, cover; background-position:right -60px bottom -40px, center} /* 일러스트가 글씨를 방해하지 않도록 오른쪽만 살짝 열어 둡니다 */ #contact{--scrim:linear-gradient(100deg, rgba(24,19,15,.90) 0%, rgba(24,19,15,.84) 44%, rgba(24,19,15,.62) 72%, rgba(24,19,15,.70) 100%)} @media (max-width:1180px){ #contact::before{background-size:auto 62%, cover; background-position:right -80px bottom -30px, center} #contact{--scrim:linear-gradient(180deg, rgba(24,19,15,.86) 0%, rgba(24,19,15,.80) 55%, rgba(24,19,15,.88) 100%)} } @media (max-width:760px){ /* 폰에서는 폼이 화면을 꽉 채우므로 일러스트는 위쪽 구석에만 */ #contact::before{background-size:auto 34%, cover; background-position:right -50px top 40px, center} #contact{--scrim:linear-gradient(180deg, rgba(24,19,15,.82) 0%, rgba(24,19,15,.88) 40%, rgba(24,19,15,.92) 100%)} } /* ── 매출 상승 화살표 — 촉이 선보다 먼저 뜨던 문제 (2026.09.27) 기존에는 촉에 .c-lbl 을 써서 '아래에서 위로 떠오르는' 모션이 걸렸는데, 촉이 회전된 그룹 안에 있어 엉뚱한 방향으로 미끄러졌고 선이 다 그려지기 전에 나타나 허공에 떠 보였습니다. 전용 클래스로 분리해 선이 끝난 뒤 제자리에서 나타나게 합니다. */ .c-tip{opacity:0; transition:opacity .5s var(--ease)} .in .c-tip{opacity:1} @media (prefers-reduced-motion:reduce){ .c-tip{opacity:1 !important; transition:none} } /* ── 2026.09.27 · 09 비즈니스 모델 추세선 데이터 포인트 ────────── 각 막대 상단 중심에 찍히는 작은 원형. 선이 그려지는 속도에 맞춰 왼쪽부터 차례로 켜지고, 마지막 촉이 그 뒤에 붙습니다. */ .c-dot{opacity:0; transition:opacity .45s var(--ease)} .in .c-dot{opacity:1} @media (prefers-reduced-motion:reduce){ .c-dot{opacity:1 !important; transition:none} } /* ══════════════════════════════════════════════════════════════ 2026.09.27 · 네 가지 수정 1) 02 브랜드 철학 — 가운데 문구의 흰 박스 제거(글은 유지) 2) 밀키트 — 태블릿·모바일에서도 사진이 '패널 배경'이 되도록 3) 02 사진 3장 — 모바일에서 얇게 접어두고 터치하면 펼쳐지게 4) 03 근거 4장 — 모바일에서 선택한 것만 위아래로 펼쳐지게 ══════════════════════════════════════════════════════════════ */ /* ── 1. 02 가운데 문구 : 흰 카드를 걷어내고 글만 남깁니다 ──────── 배경 사진 위에 바로 앉으므로 크림색 후광을 옅게 깔아 글자 가독성은 그대로 지킵니다. */ #about > .inner > .card{ background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:30px 8px 8px !important; margin-top:14px !important; } #about > .inner > .card .copy{ color:var(--ink2); text-shadow:0 0 14px rgba(250,247,242,.95), 0 0 5px rgba(250,247,242,.9); } #about > .inner > .card .big{ text-shadow:0 0 16px rgba(250,247,242,.96), 0 0 6px rgba(250,247,242,.92); } @media (max-width:760px){ #about > .inner > .card{padding:22px 4px 4px !important; margin-top:10px !important} } /* ── 2. 밀키트 : 사진을 패널 배경으로 ────────────────────────── 1180px 아래에서는 사진을 아래쪽에 '따로 끼운 블록'으로 넣고 있어서 경계선이 그대로 보였습니다. 사진을 패널 배경으로 깔고, 기존 이미지 칸은 자리만 잡아주는 투명 칸으로 바꿉니다. 사진 윗부분이 원래 크림색 한지 배경이라, 같은 색을 위에서 흘려주면 이음매가 보이지 않습니다. */ @media (max-width:1180px){ #support .milkit{ background-color:#F0DECB; background-image:url('../img/support-milkit.jpg') !important; background-size:100% auto !important; background-position:center bottom !important; background-repeat:no-repeat !important; overflow:hidden; } #support .milkit .grid.g2{max-width:none} .milkit-shot{ display:block !important; position:relative; width:auto; height:auto !important; aspect-ratio:1400/655; margin:26px -32px -36px !important; border-radius:0; overflow:visible; /* 사진 윗변을 크림색으로 부드럽게 녹입니다 */ background:linear-gradient(180deg, #F0DECB 0%, rgba(240,222,203,.88) 13%, rgba(240,222,203,0) 32%); } .milkit-shot img{display:none !important} } @media (max-width:760px){ .milkit-shot{margin:22px -20px -28px !important} } /* ── 3·4. 모바일 사진 카드 : 터치하면 위아래로 펼쳐집니다 ─────── PC 는 지금처럼 마우스를 올리면 옆으로 넓어지고, 모바일에서는 세로로 얇게 접혀 있다가 누르면 펼쳐집니다. */ @media (max-width:760px){ /* 3) 02 브랜드 철학 — 사진 3장 */ .phcards .phcard{ height:94px; cursor:pointer; transition:height .62s var(--ease), box-shadow .45s var(--ease); -webkit-tap-highlight-color:transparent; } .phcards .phcard.is-open{ height:272px; box-shadow:0 16px 34px rgba(26,23,20,.22); } .phcards .phcard img{transition:transform .8s var(--ease)} .phcards .phcard.is-open img{transform:scale(1.04)} /* 접혀 있을 때는 보조 설명을 감춰 제목만 보이게 */ .phcards .phcard .cap{bottom:14px; transition:bottom .5s var(--ease)} .phcards .phcard.is-open .cap{bottom:18px} .phcards .phcard .cap p{ max-height:0; opacity:0; margin-top:0; overflow:hidden; transition:max-height .5s var(--ease), opacity .4s var(--ease), margin-top .4s var(--ease); } .phcards .phcard.is-open .cap p{max-height:60px; opacity:1; margin-top:6px} /* 4) 03 맛집의 기준 — 사진 4장 (설명은 사진 아래에 그대로) */ .phcards.pf .phcard{cursor:pointer; -webkit-tap-highlight-color:transparent} .phcards.pf .shot{ height:94px !important; transition:height .62s var(--ease), box-shadow .45s var(--ease); } .phcards.pf .phcard.is-open .shot{ height:238px !important; box-shadow:0 16px 34px rgba(26,23,20,.20); } .phcards.pf .shot img{transition:transform .8s var(--ease)} .phcards.pf .phcard.is-open .shot img{transform:scale(1.04)} .phcards.pf .phcard.is-open figcaption h3{color:var(--red)} /* 펼침 표시 (＋ / −) — 모바일에서만 나옵니다 */ .phcards .phcard > .thmark{ position:absolute; z-index:3; right:12px; top:12px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:15px; font-weight:700; line-height:1; color:#fff; background:rgba(20,16,12,.34); border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); transition:transform .5s var(--ease), background .3s; pointer-events:none; } .phcards.pf .phcard > .thmark{top:10px; right:10px} .phcards .phcard.is-open > .thmark{ transform:rotate(135deg); background:rgba(155,42,32,.75); } .phcards .phcard:focus-visible{outline:2px solid var(--red); outline-offset:3px} } @media (min-width:761px){ .phcards .phcard > .thmark{display:none} } @media (prefers-reduced-motion:reduce){ .phcards .phcard, .phcards .phcard img, .phcards.pf .shot, .phcards.pf .shot img, .phcards .phcard > .thmark{transition:none !important} } /* ══════════════════════════════════════════════════════════════ 2026.09.27 (2) · 호랑이 일러스트 위치 · 밀키트 배치 기준 정정 ══════════════════════════════════════════════════════════════ */ /* ── 1. 호랑이 — PC 에서 안쪽으로 150px ───────────────────────── 기존 right -60px(화면 밖으로 60px 밀어냄) → right 90px 로 총 150px 안쪽으로 들어옵니다. */ @media (min-width:1181px){ #contact::before{background-position:right 90px bottom -40px, center} } /* ── 2. 호랑이 — 윗변이 잘리던 문제 ──────────────────────────── 배경 레이어(::before)는 섹션보다 위아래로 4% 더 크고, 섹션은 overflow:hidden 입니다. 그런데 일러스트를 'top 40px' 처럼 고정 픽셀로 잡아 두어, 화면 높이에 따라 그 40px 이 섹션 바깥(= 잘리는 영역)에 들어가는 경우가 있었습니다. % 오프셋으로 바꾸면 '남는 공간 안에서의 비율'로 계산되어 어떤 화면에서도 일러스트가 잘리지 않습니다. */ @media (max-width:1180px){ #contact::before{ background-size:auto 62%, cover; background-position:right 2% bottom 6%, center} } @media (max-width:760px){ #contact::before{ background-size:auto 40%, cover; background-position:right 2% top 16%, center} } /* ── 3. 밀키트 — 세로 1줄이 될 때(760px 이하)만 사진을 아래로 ── 앞서 1180px 부터 아래로 내렸는데, 그 구간은 아직 좌우 배치라 PC 와 같은 모습이어야 맞습니다. 기준을 1단 전환 지점으로 옮깁니다. */ @media (min-width:761px){ #support .milkit{ background-color:#F0DECB; background-image: linear-gradient(90deg,#F0DECB 0%,#F0DECB 36%,rgba(240,222,203,0) 58%), url('../img/support-milkit.jpg') !important; background-size:auto, auto 100% !important; background-position:left center, right center !important; background-repeat:no-repeat, no-repeat !important; } #support .milkit .grid.g2{grid-template-columns:1fr; max-width:52%} .milkit-shot{display:none !important} } @media (max-width:760px){ #support .milkit{ background-color:#F0DECB; background-image:url('../img/support-milkit.jpg') !important; background-size:100% auto !important; background-position:center bottom !important; background-repeat:no-repeat !important; overflow:hidden; } #support .milkit .grid.g2{max-width:none} .milkit-shot{ display:block !important; position:relative; width:auto; height:auto !important; aspect-ratio:1400/655; margin:22px -20px -28px !important; border-radius:0; overflow:visible; background:linear-gradient(180deg, #F0DECB 0%, rgba(240,222,203,.88) 13%, rgba(240,222,203,0) 32%); } .milkit-shot img{display:none !important} } /* ══════════════════════════════════════════════════════════════ 2026.09.27 (3) · 모바일 섹션 탭 — 알약(도형) → 밑줄 레일 방식 · 좌우로 밀어서 넘길 수 있고 (터치 스와이프 · 마우스 드래그) · 활성 표시는 글자 아래 빨간 선이 레일처럼 미끄러져 이동 · 기본 글자 #121212 / 활성 글자 레드 ══════════════════════════════════════════════════════════════ */ .chips{ position:sticky; top:var(--header); z-index:50; background:var(--board); border-bottom:1px solid var(--line); padding:0 14px !important; gap:0 !important; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none; cursor:grab; } .chips.grabbing{cursor:grabbing; scroll-behavior:auto} .chips::-webkit-scrollbar{display:none} .chips a{ flex:none; background:none !important; border:0 !important; border-radius:0 !important; padding:13px 13px 12px !important; font-size:13.5px; font-weight:600; color:#121212 !important; white-space:nowrap; text-decoration:none; transition:color .28s var(--ease); -webkit-tap-highlight-color:transparent; } .chips a[aria-current="true"]{ color:var(--red) !important; font-weight:700; } @media (hover:hover){ .chips a:hover{color:var(--red) !important} } /* 글자 아래를 미끄러지는 레일 */ .chiprail{ position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--red); border-radius:2px; transform:translateX(0); transition:transform .42s var(--ease), width .42s var(--ease); pointer-events:none; } @media (prefers-reduced-motion:reduce){ .chiprail{transition:none} .chips a{transition:none} } /* ══════════════════════════════════════════════════════════════ 2026.09.27 (4) · 04 메뉴 경쟁력 특징 카드 활성 카드의 사진을 '상자째' 최대 크기로 키웁니다. 기존에는 74px 상자는 그대로 두고 안쪽 사진만 확대해서 더 잘려 보일 뿐 커 보이지 않았습니다. 원본이 240×240 이라 118px 까지가 선명함을 유지하는 한계입니다. ══════════════════════════════════════════════════════════════ */ .mshot{ transition:width .45s var(--ease), height .45s var(--ease), box-shadow .45s var(--ease); } #menu .card.mfeat:hover .mshot, #menu .card.mfeat.is-on .mshot{ width:118px; height:118px; box-shadow:0 12px 26px rgba(0,0,0,.34); } #menu .card.mfeat:hover .mshot img, #menu .card.mfeat.is-on .mshot img{transform:scale(1.04)} /* 활성 상태를 호버와 똑같이 — 모바일에서는 탭으로 켜집니다 */ #menu .card.mfeat.is-on{ transform:scale(1.07); background:rgba(28,22,18,.62); border-color:rgba(255,255,255,.44); box-shadow:0 20px 44px rgba(0,0,0,.40); } #menu .card.mfeat.is-on h3{color:#FFD9C6} @media (max-width:1180px){ #menu .card.mfeat:hover .mshot, #menu .card.mfeat.is-on .mshot{width:108px; height:108px} } @media (max-width:760px){ /* 폰에서는 카드를 키우면 오른쪽이 화면 밖으로 밀려 나갑니다. 카드 확대는 빼고 사진만 크게 해서 활성 상태를 보여줍니다. */ #menu .card.mfeat:hover, #menu .card.mfeat.is-on{transform:none} #menu .card.mfeat:hover .mshot, #menu .card.mfeat.is-on .mshot{width:98px; height:98px} #menu .card.mfeat{cursor:pointer; -webkit-tap-highlight-color:transparent} } @media (prefers-reduced-motion:reduce){ .mshot{transition:none} #menu .card.mfeat.is-on{transform:none} } /* ══════════════════════════════════════════════════════════════ 2026.09.27 (5) · 밀키트 배너 — PC·모바일 모두 '박스 전체 배경' 지금까지 모바일은 사진을 아래쪽 띠로만 깔아 위쪽이 크림색 빈칸이었습니다. cover 로 바꿔 네모 박스를 사진이 꽉 채우고, 글씨가 앉는 쪽만 크림색으로 덮어 읽기 좋게 둡니다. (이미지 교체: support-milkit.jpg → 1600×900 고해상도) ══════════════════════════════════════════════════════════════ */ /* PC — 사진은 오른쪽 기준으로 박스를 채우고, 왼쪽 글씨칸만 크림색 */ @media (min-width:761px){ #support .milkit{ background-color:#F0DECB; background-image: linear-gradient(90deg, #F0DECB 0%, #F0DECB 30%, rgba(240,222,203,.94) 40%, rgba(240,222,203,.55) 52%, rgba(240,222,203,0) 64%), url('../img/support-milkit.jpg') !important; background-size:auto, cover !important; background-position:left center, right center !important; background-repeat:no-repeat, no-repeat !important; min-height:460px; } #support .milkit .grid.g2{grid-template-columns:1fr; max-width:52%} .milkit-shot{display:none !important} } /* 모바일 — 세로로 긴 박스를 사진이 꽉 채우고, 위쪽 글씨칸만 크림색. 아래쪽에 사진이 보일 공간을 남기려고 여백을 넉넉히 둡니다. */ @media (max-width:760px){ #support .milkit{ background-color:#F0DECB; background-image: linear-gradient(180deg, #F0DECB 0%, #F0DECB 46%, rgba(240,222,203,.92) 58%, rgba(240,222,203,.45) 70%, rgba(240,222,203,0) 84%), url('../img/support-milkit.jpg') !important; background-size:auto, cover !important; background-position:center top, 62% bottom !important; background-repeat:no-repeat, no-repeat !important; padding-bottom:230px !important; overflow:hidden; } #support .milkit .grid.g2{max-width:none} .milkit-shot{display:none !important} } @media (max-width:420px){ #support .milkit{padding-bottom:190px !important} } /* ══════════════════════════════════════════════════════════════ 2026.09.27 (6) · 밀키트 배너 마무리 · PC — 크림색 막을 좁혀 패키지가 또렷하게 보이도록 · 모바일 — 제품 한 줄(파우치·기프트박스·곰탕·반찬)이 잘리지 않고 전부 보이도록 ══════════════════════════════════════════════════════════════ */ /* ── PC ──────────────────────────────────────────────────────── cover 로 깔면 사진이 박스 너비에 맞춰 늘어나 패키지가 글씨 자리(왼쪽)까지 들어오고, 그래서 크림색 막에 가려 흐려졌습니다. 사진을 '높이 기준'으로 깔아 오른쪽에 붙이면 패키지가 글씨 영역 밖으로 빠집니다. 덕분에 막을 46%까지만 써도 됩니다. 사진 바탕색이 크림색과 같아 왼쪽 여백은 이어져 보입니다. */ @media (min-width:761px){ #support .milkit{ background-color:#F0DECB; background-image: linear-gradient(90deg, #F0DECB 0%, #F0DECB 34%, rgba(240,222,203,.72) 41%, rgba(240,222,203,0) 50%), url('../img/support-milkit.jpg') !important; background-size:auto, auto 100% !important; background-position:left center, right center !important; background-repeat:no-repeat, no-repeat !important; min-height:470px; } #support .milkit .grid.g2{ grid-template-columns:1fr; max-width:min(560px, 46%); } .milkit-shot{display:none !important} } /* ── 모바일 ──────────────────────────────────────────────────── 제품 한 줄을 전부 보여주려면 사진을 박스 '너비'에 맞춰야 하고, 그러면 위쪽이 비므로 같은 사진을 뒤에 한 번 더 채워 넣습니다. 1) 크림색 막(글씨 자리) 2) 제품 한 줄 — 너비 100%, 아래 정렬 (잘림 없음) 3) 배경 채움 — cover, 위쪽 여백을 메웁니다 빈 칸(.milkit-shot)은 2)번이 들어갈 자리만 잡아 줍니다. */ @media (max-width:760px){ #support .milkit{ background-color:#F0DECB; background-image: linear-gradient(180deg, rgba(240,222,203,.92) 0%, rgba(240,222,203,.90) 44%, rgba(240,222,203,.66) 58%, rgba(240,222,203,.16) 70%, rgba(240,222,203,0) 78%), url('../img/support-milkit.jpg'), url('../img/support-milkit.jpg') !important; background-size:auto, 100% auto, cover !important; background-position:center top, center bottom, center top !important; background-repeat:no-repeat, no-repeat, no-repeat !important; padding-bottom:28px !important; overflow:hidden; } #support .milkit .grid.g2{max-width:none} /* 제품 한 줄이 들어갈 자리만 비워 두는 투명 칸 */ .milkit-shot{ display:block !important; position:relative; width:auto; height:auto !important; aspect-ratio:1600/900; margin:18px -20px -28px !important; background:none !important; border-radius:0; overflow:visible; } .milkit-shot img{display:none !important} } @media (max-width:420px){ #support .milkit{padding-bottom:28px !important} } /* ══════════════════════════════════════════════════════════════ 2026.09.27 (7) 1) 09 P&L 월 매출 · 월 순이익 숫자 → 독도(붓글씨) 폰트 2) 밀키트 모바일 — 배경 사진이 두 겹으로 겹쳐 보이던 문제 ══════════════════════════════════════════════════════════════ */ /* 1. 숫자를 붓글씨로. 획이 가늘고 자간이 넓어 크기를 키우고 굵기·자간을 다시 잡아야 지금 크기감과 맞습니다. */ .pl .hl strong{ font-family:var(--brush); font-weight:400; font-size:42px; line-height:1.05; letter-spacing:0; } @media (max-width:1180px){ .pl .hl strong{font-size:38px} } @media (max-width:760px){ .pl .hl strong{font-size:36px} } /* 2. 모바일 밀키트 — 겹침 제거 위쪽 빈 곳을 메우려고 같은 사진을 cover 로 한 겹 더 깔았는데, 그 레이어의 '한우사골곰탕' 글씨가 본문 뒤로 비쳐 아래 제품 사진과 두 번 보였습니다. 채움 레이어를 빼고, 사진 바탕과 같은 크림색으로 위쪽을 채웁니다(사진 바탕색과 동일 톤이라 경계 없이 이어집니다). */ @media (max-width:760px){ #support .milkit{ background-color:#F0DECB; background-image: linear-gradient(180deg, #F0DECB 0%, #F0DECB 62%, rgba(240,222,203,.55) 74%, rgba(240,222,203,0) 84%), url('../img/support-milkit.jpg') !important; background-size:auto, 100% auto !important; background-position:center top, center bottom !important; background-repeat:no-repeat, no-repeat !important; } } /* ══════════════════════════════════════════════════════════════ 2026.09.27 (8) · 밀키트 배너 — 어떤 화면에서도 사진이 잘리지 않게 이미지 교체: 1444×1040 (세로가 넉넉해져 제품이 더 크게 보입니다) · cover 를 쓰지 않습니다 — cover 는 박스를 채우는 대신 반드시 어느 한쪽을 잘라내기 때문입니다. · PC : 사진 가로폭을 고정하고 오른쪽에 붙입니다 (세로 잘림 없음) · 모바일: 사진 가로폭 = 박스 가로폭, 아래 정렬 (좌우 잘림 없음) 바탕색은 사진 여백에서 뽑은 #ECDAC8 로 맞춰 경계가 없습니다. ══════════════════════════════════════════════════════════════ */ /* ── PC (1181px 이상) ─────────────────────────────────────────── */ @media (min-width:1181px){ #support .milkit{ background-color:#ECDAC8 !important; background-image: linear-gradient(90deg, #ECDAC8 0%, #ECDAC8 34%, rgba(236,218,200,.70) 42%, rgba(236,218,200,0) 50%), url('../img/support-milkit.jpg') !important; background-size:auto, 660px auto !important; background-position:left center, right center !important; background-repeat:no-repeat, no-repeat !important; min-height:500px; } #support .milkit .grid.g2{ grid-template-columns:1fr; max-width:min(560px, 46%); } .milkit-shot{display:none !important} } /* ── 태블릿 (761 ~ 1180px) ────────────────────────────────────── */ @media (min-width:761px) and (max-width:1180px){ #support .milkit{ background-color:#ECDAC8 !important; background-image: linear-gradient(90deg, #ECDAC8 0%, #ECDAC8 36%, rgba(236,218,200,.70) 44%, rgba(236,218,200,0) 52%), url('../img/support-milkit.jpg') !important; background-size:auto, 420px auto !important; background-position:left center, right center !important; background-repeat:no-repeat, no-repeat !important; min-height:380px; } #support .milkit .grid.g2{ grid-template-columns:1fr; max-width:min(430px, 48%); } .milkit-shot{display:none !important} } /* ── 모바일 (760px 이하) ──────────────────────────────────────── */ @media (max-width:760px){ #support .milkit{ background-color:#ECDAC8 !important; background-image: linear-gradient(180deg, #ECDAC8 0%, #ECDAC8 60%, rgba(236,218,200,.55) 73%, rgba(236,218,200,0) 84%), url('../img/support-milkit.jpg') !important; background-size:auto, 100% auto !important; background-position:center top, center bottom !important; background-repeat:no-repeat, no-repeat !important; padding-bottom:28px !important; overflow:hidden; } #support .milkit .grid.g2{max-width:none} /* 사진이 들어갈 자리만 잡아 주는 투명 칸 — 새 이미지 비율로 갱신 */ .milkit-shot{ display:block !important; position:relative; width:auto; height:auto !important; aspect-ratio:1444/1040; margin:18px -20px -28px !important; background:none !important; border-radius:0; overflow:visible; } .milkit-shot img{display:none !important} } /* 패널 테두리도 새 바탕색에 맞춥니다 */ #support .milkit{border-color:#DFCBB3} /* ══════════════════════════════════════════════════════════════ 2026.09.27 (9) · 밀키트 — 창 크기를 줄일 때 사진이 툭 작아지던 문제 원인은 제가 폭을 660px / 420px 처럼 '고정값'으로 나눠 둔 것입니다. 1181px 을 지나는 순간 사진이 한 번에 240px 작아져 어색했습니다. 폭을 패널 대비 % 로 바꾸면 창을 줄여도 같은 비율로 부드럽게 함께 줄어듭니다. 단계(브레이크포인트) 자체를 없앴습니다. 덧붙여 사진 네모 경계가 보이던 부분도 가장자리를 연하게 풀어 패널과 이어지게 했습니다. ══════════════════════════════════════════════════════════════ */ @media (min-width:761px){ #support .milkit{ background-color:#ECDAC8 !important; background-image: /* 1) 글씨 자리 크림색 막 */ linear-gradient(90deg, #ECDAC8 0%, #ECDAC8 34%, rgba(236,218,200,.70) 43%, rgba(236,218,200,0) 52%), /* 2) 사진 가장자리 풀어주기 — 네모 경계를 지웁니다 */ radial-gradient(ellipse 74% 76% at 50% 46%, rgba(236,218,200,0) 56%, rgba(236,218,200,.50) 82%, #ECDAC8 100%), /* 3) 사진 */ url('../img/support-milkit.jpg') !important; background-size:auto, 50% auto, 50% auto !important; background-position:left center, right center, right center !important; background-repeat:no-repeat, no-repeat, no-repeat !important; min-height:500px; } #support .milkit .grid.g2{ grid-template-columns:1fr; max-width:min(560px, 46%); } .milkit-shot{display:none !important} } /* ══════════════════════════════════════════════════════════════ 2026.09.27 (10) · 밀키트 모바일 — 글씨 왼쪽 · 사진 오른쪽 모바일 전용 사진(support-milkit-m.jpg, 770×620 · 파우치+기프트박스) · 521~760px : 글씨 왼쪽 56%, 사진 오른쪽 42% — 좌우 배치 · 520px 이하 : 폭이 좁아 좌우로 나누면 한 줄에 열 글자도 안 들어갑니다. 글씨 아래에 사진을 오른쪽으로 붙여 놓습니다. ══════════════════════════════════════════════════════════════ */ /* ── 좌우 배치 (521 ~ 760px) ─────────────────────────────────── */ /* 2026.10.01 — 521~760px 좌우 배치는 사진이 30% 이상 글 뒤로 숨어 폐기. 아래 세로 배치를 760px 까지 확장 */ @media (min-width:521px) and (max-width:520px){ #support .milkit{ background-color:#ECDAC8 !important; background-image: linear-gradient(90deg, #ECDAC8 0%, #ECDAC8 50%, rgba(236,218,200,.62) 58%, rgba(236,218,200,0) 66%), radial-gradient(ellipse 78% 80% at 50% 50%, rgba(236,218,200,0) 58%, rgba(236,218,200,.48) 84%, #ECDAC8 100%), url('../img/support-milkit-m.jpg') !important; background-size:auto, 42% auto, 42% auto !important; background-position:left center, right center, right center !important; background-repeat:no-repeat, no-repeat, no-repeat !important; padding-bottom:28px !important; min-height:380px; } #support .milkit .grid.g2{max-width:56%} .milkit-shot{display:none !important} } /* ── 세로 배치 (520px 이하) ──────────────────────────────────── */ @media (max-width:520px){ #support .milkit{ background-color:#ECDAC8 !important; background-image: linear-gradient(180deg, #ECDAC8 0%, #ECDAC8 62%, rgba(236,218,200,.55) 75%, rgba(236,218,200,0) 86%), radial-gradient(ellipse 80% 82% at 50% 50%, rgba(236,218,200,0) 58%, rgba(236,218,200,.48) 84%, #ECDAC8 100%), url('../img/support-milkit-m.jpg') !important; background-size:auto, 78% auto, 78% auto !important; background-position:center top, right bottom, right bottom !important; background-repeat:no-repeat, no-repeat, no-repeat !important; padding-bottom:28px !important; } #support .milkit .grid.g2{max-width:none} /* 사진이 들어갈 자리만 잡아 주는 투명 칸 */ .milkit-shot{ display:block !important; position:relative; width:78%; height:auto !important; aspect-ratio:770/620; margin:14px 0 -28px auto !important; background:none !important; border-radius:0; overflow:visible; } .milkit-shot img{display:none !important} } /* ══════════════════════════════════════════════════════════════ 2026.09.27 (11) · 밀키트 PC — 사진이 패널 위아래를 꽉 채우도록 지금까지는 '가로폭 50%' 로 크기를 정해서 세로는 비율대로만 따라왔고, 그래서 패널 위아래에 크림색 여백이 남았습니다. 기준을 '세로 100%' 로 바꿉니다. 사진 높이가 패널 높이와 같아지고 가로는 비율대로 늘어나 오른쪽을 가득 채웁니다. 사진 위·아래·오른쪽이 패널 끝에 닿으므로 가장자리를 풀어주던 타원 그라데이션은 뺐습니다(왼쪽 경계는 크림색 막이 처리). ══════════════════════════════════════════════════════════════ */ @media (min-width:761px){ #support .milkit{ background-color:#ECDAC8 !important; background-image: linear-gradient(90deg, #ECDAC8 0%, #ECDAC8 36%, rgba(236,218,200,.80) 45%, rgba(236,218,200,.30) 53%, rgba(236,218,200,0) 60%), url('../img/support-milkit.jpg') !important; background-size:auto, auto 100% !important; background-position:left center, right center !important; background-repeat:no-repeat, no-repeat !important; min-height:500px; overflow:hidden; } #support .milkit .grid.g2{ grid-template-columns:1fr; max-width:min(520px, 44%); } .milkit-shot{display:none !important} } /* ══════════════════════════════════════════════════════════════ 2026.09.27 (12) · 밀키트 모바일 — 사진 크기 키우기 PC 와 같은 이유였습니다. '가로폭 42%' 로 잡아 두니 패널이 글 길이만큼 길어져도 사진은 그대로여서 위아래가 텅 비었습니다. · 521~760px : 기준을 세로 100% 로 — 오른쪽을 위아래까지 채웁니다 · 520px 이하 : 좌우로 나눌 폭이 없으므로 글 아래에 가로폭 100% 로 크게 깔아, 잘림 없이 가장 크게 보이도록 합니다 ══════════════════════════════════════════════════════════════ */ /* ── 좌우 배치 (521 ~ 760px) — 사진이 위아래를 채웁니다 ────────── */ /* 2026.10.01 — 521~760px 좌우 배치는 사진이 30% 이상 글 뒤로 숨어 폐기. 아래 세로 배치를 760px 까지 확장 */ @media (min-width:521px) and (max-width:520px){ #support .milkit{ background-color:#ECDAC8 !important; background-image: linear-gradient(90deg, #ECDAC8 0%, #ECDAC8 44%, rgba(236,218,200,.82) 53%, rgba(236,218,200,.32) 61%, rgba(236,218,200,0) 68%), url('../img/support-milkit-m.jpg') !important; background-size:auto, auto 100% !important; background-position:left center, right center !important; background-repeat:no-repeat, no-repeat !important; min-height:420px; padding-bottom:28px !important; overflow:hidden; } #support .milkit .grid.g2{max-width:54%} .milkit-shot{display:none !important} } /* ── 세로 배치 (760px 이하) — 글·버튼 아래, 가로 가득 (2026.10.01: 520 → 760) ── */ @media (max-width:760px){ #support .milkit{ background-color:#ECDAC8 !important; background-image: linear-gradient(180deg, #ECDAC8 0%, #ECDAC8 58%, rgba(236,218,200,.50) 72%, rgba(236,218,200,0) 84%), url('../img/support-milkit-m.jpg') !important; background-size:auto, 100% auto !important; background-position:center top, center bottom !important; background-repeat:no-repeat, no-repeat !important; padding-bottom:24px !important; overflow:hidden; } #support .milkit .grid.g2{max-width:none} /* 사진이 들어갈 자리만 잡아 주는 투명 칸 — 가로 가득 */ .milkit-shot{ display:block !important; position:relative; width:auto; height:auto !important; aspect-ratio:770/620; margin:14px -20px -24px !important; background:none !important; border-radius:0; overflow:visible; } .milkit-shot img{display:none !important} } /* ══════════════════════════════════════════════════════════════ 2026.09.27 (13) · 09 BOOSTER 카드 — 제목만 보이고 눌러서 펼치기 평소에는 'BOOSTER 01 + 제목' 두 줄만 보이고, 카드를 누르면 설명·금액·주석이 아래로 펼쳐집니다. ══════════════════════════════════════════════════════════════ */ #business .booster{position:relative; cursor:pointer; -webkit-tap-highlight-color:transparent} #business .booster h3{margin-bottom:0} /* 오른쪽 위 ＋ 표시 — 펼치면 × 모양으로 돌아갑니다 */ #business .booster .bo-mark{ position:absolute; top:18px; right:18px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:15px; font-weight:700; line-height:1; color:#8C6417; background:var(--goldbg); border:1px solid rgba(160,120,40,.32); transition:transform .45s var(--ease), background .3s; pointer-events:none; } #business .booster.is-open .bo-mark{transform:rotate(135deg)} /* 펼쳐지는 부분 — 높이를 미리 정하지 않아도 부드럽게 늘어납니다 */ #business .booster .bo-body{ display:grid; grid-template-rows:0fr; opacity:0; margin-top:0; transition:grid-template-rows .52s var(--ease), opacity .36s var(--ease), margin-top .48s var(--ease); } #business .booster .bo-in{overflow:hidden; min-height:0} #business .booster.is-open .bo-body{ grid-template-rows:1fr; opacity:1; margin-top:11px; } #business .booster:focus-visible{outline:2px solid var(--gold); outline-offset:3px} @media (prefers-reduced-motion:reduce){ #business .booster .bo-body, #business .booster .bo-mark{transition:none} } /* ── 2026.09.27 · BOOSTER 그래프↔카드 순서 교체 후 간격 정리 ──── */ #business .chart.bo-chart-first{margin-top:22px} #business .grid.g2.bo-cards-last{margin-top:18px !important} /* ══════════════════════════════════════════════════════════════ 2026.09.27 (14) · 09 BOOSTER 카드 마무리 1) 한쪽만 펼쳐도 다른 카드가 같이 길어지던 문제 — 그리드 칸은 기본값이 '양쪽 높이 맞추기'라, 한 장이 늘어나면 옆 카드도 빈 채로 같이 늘어났습니다. 2) 왼쪽 금색 세로선 → 박스 안쪽 위에 맞춘 가로선 3) 펼칠 때 위에서 은은한 반원 그라데이션이 스르륵 퍼집니다 ══════════════════════════════════════════════════════════════ */ /* 1. 각 카드가 자기 높이만 갖도록 */ #business .grid.g2.bo-cards-last{align-items:start} /* 2·3. 테두리 · 상단 라인 · 반원 배경 */ #business .booster{ border:1px solid var(--line) !important; border-radius:12px !important; overflow:hidden; position:relative; } /* 상단 금색 라인 — 박스 위쪽 안에 딱 맞춰 */ #business .booster::before{ content:""; position:absolute; z-index:2; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, #B8862F 0%, #C9A04A 46%, rgba(184,134,47,.28) 100%); transition:height .4s var(--ease); } #business .booster.is-open::before{height:4px} /* 펼쳤을 때 위에서 번지는 반원 그라데이션 */ #business .booster::after{ content:""; position:absolute; z-index:0; pointer-events:none; left:50%; top:0; width:132%; aspect-ratio:2 / 1; border-radius:0 0 50% 50% / 0 0 100% 100%; background:radial-gradient(ellipse at 50% 0%, rgba(184,134,47,.20) 0%, rgba(184,134,47,.11) 46%, rgba(184,134,47,.03) 76%, rgba(184,134,47,0) 100%); transform:translateX(-50%) scaleY(.62); transform-origin:50% 0; opacity:0; transition:opacity .75s var(--ease), transform .85s var(--ease); } #business .booster.is-open::after{ opacity:1; transform:translateX(-50%) scaleY(1); } /* 글씨는 반원 위로 */ #business .booster > *{position:relative; z-index:1} @media (prefers-reduced-motion:reduce){ #business .booster::before, #business .booster::after{transition:none} } /* ══════════════════════════════════════════════════════════════ 2026.09.27 (15) · 다섯 가지 정리 ══════════════════════════════════════════════════════════════ */ /* 1. BENEFIT 4장 — 모바일에서 2×2 창문형으로 ─────────────────── 세로로 네 칸이 이어지면서 화면을 크게 차지했습니다. */ @media (max-width:760px){ .benefit{grid-template-columns:repeat(2,1fr) !important; gap:10px} .bf{padding:18px 15px} .bf .n{font-size:10.5px; margin:0 0 7px} .bf h3{font-size:14.5px; line-height:1.45} } @media (max-width:360px){ .bf{padding:15px 12px} .bf h3{font-size:13.5px} } /* 2. 02 브랜드 철학 가운데 문구 — 왼쪽 정렬 ─────────────────── */ #about > .inner > .card{text-align:left !important; padding-left:0 !important} #about > .inner > .card .copy, #about > .inner > .card .big{text-align:left} /* 3. 05 창업 경쟁력 큰 문구 — 크기 축소 ────────────────────── */ #strength > .inner > .big{font-size:23px; line-height:1.68} @media (max-width:1180px){ #strength > .inner > .big{font-size:21px} } @media (max-width:760px){ #strength > .inner > .big{font-size:18.5px; line-height:1.62} } /* 4. 08 최소 비용 업종변경 — 바깥 흰 박스 제거 ─────────────── 안쪽 BEFORE/AFTER/승계 카드는 그대로 두고 감싸던 상자만 뺍니다. */ #store > .inner > .card{ background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; margin-top:40px !important; } #store > .inner > .card:hover{transform:none; box-shadow:none} /* 5. BOOSTER — 상단 라인만 남기고 반원 배경 삭제 ─────────────── */ #business .booster::after{content:none !important; display:none !important} #business .booster.is-open::after{content:none !important; display:none !important} /* ── 2026.09.27 · 12 상담 신청 — 좌우 첫 박스 윗선 맞춤 ───────── 왼쪽 첫 칸(.field)에는 위 여백 8px 이, 오른쪽 첫 칸(.card)에는 위 여백이 없어서 두 박스의 윗선이 어긋나 있었습니다. 두 칸 모두 위 여백을 0 으로 맞춥니다. */ #contact .grid.g2{align-items:start} #contact .grid.g2 > div > *:first-child{margin-top:0 !important} /* ══════════════════════════════════════════════════════════════ 2026.09.28 · 06 매장 인테리어 — 가운데 사진을 크게, 중앙 배치 기존에는 카드가 232px 에 가운데만 1.04배라 거의 차이가 없었고 사진을 넓게 보기 어려웠습니다. · 카드 기본 폭 232 → 300px, 사진 높이 168 → 216px · 가운데 1.45배 / 양옆 0.80배 — 가운데 사진이 약 두 배로 보입니다 · 커진 카드가 양옆 위로 올라오도록 z-index 를 줍니다 ══════════════════════════════════════════════════════════════ */ #intTrack.track.car{ padding-top:62px; padding-bottom:58px; margin-top:-44px; margin-bottom:-40px; align-items:center; } #intTrack .slide{ flex:0 0 min(300px, 78vw); position:relative; z-index:1; transform-origin:50% 50%; transform:scale(calc(.80 + var(--f,0) * .65)); /* 가운데 1.45배 */ opacity:calc(.46 + var(--f,0) * .54); transition:transform .55s var(--ease), opacity .5s var(--ease); } #intTrack .slide.is-center{z-index:3} #intTrack .slide .ph{height:216px} #intTrack .slide p{font-size:11px; margin-top:8px} #intTrack .slide small{font-size:10px} #intTrack .slide.is-center .ph{ box-shadow:0 26px 60px rgba(0,0,0,.42); } @media (max-width:760px){ #intTrack.track.car{ padding-top:48px; padding-bottom:44px; margin-top:-34px; margin-bottom:-30px; } #intTrack .slide{ flex:0 0 min(272px, 76vw); transform:scale(calc(.82 + var(--f,0) * .48)); /* 좁은 화면은 1.30배 */ } #intTrack .slide .ph{height:196px} } @media (prefers-reduced-motion:reduce){ #intTrack .slide{transform:none; opacity:1; transition:none} } /* ── 2026.09.28 · 지점별 외관도 같은 슬라이드로 ────────────────── 8칸 격자에서 캐러셀로 바꿨습니다. 가운데 사진이 크게 보이도록 위 인테리어 슬라이드와 같은 규칙을 적용합니다. */ #brTrack.track.car{ padding-top:62px; padding-bottom:58px; margin-top:-44px; margin-bottom:-34px; align-items:center; } #brTrack .slide{ flex:0 0 min(300px, 78vw); position:relative; z-index:1; transform-origin:50% 50%; transform:scale(calc(.80 + var(--f,0) * .65)); opacity:calc(.46 + var(--f,0) * .54); transition:transform .55s var(--ease), opacity .5s var(--ease); } #brTrack .slide.is-center{z-index:3} #brTrack .slide .ph{height:216px} #brTrack .slide p{font-size:11px; margin-top:8px} #brTrack .slide small{font-size:10px} #brTrack .slide.is-center .ph{box-shadow:0 26px 60px rgba(0,0,0,.42)} @media (max-width:760px){ #brTrack.track.car{ padding-top:48px; padding-bottom:44px; margin-top:-34px; margin-bottom:-26px; } #brTrack .slide{ flex:0 0 min(272px, 76vw); transform:scale(calc(.82 + var(--f,0) * .48)); } #brTrack .slide .ph{height:196px} } @media (prefers-reduced-motion:reduce){ #brTrack .slide{transform:none; opacity:1; transition:none} } /* 지점 슬라이드는 섹션 배경까지 바꾸지는 않습니다 (인테리어 사진 유지) */ #interior > .bgswap{pointer-events:none} /* ══════════════════════════════════════════════════════════════ 2026.09.28 · 지점별 외관 슬라이드 = 인테리어 슬라이드와 동일하게 · 확대·흐림 규칙을 '.car' 가 붙은 뒤에만 적용합니다. .car 는 스크립트가 캐러셀을 켤 때 붙는 표시입니다. 예전처럼 조건 없이 걸어 두면 스크립트가 늦거나 빠졌을 때 모든 카드가 0.8배·반투명으로 굳어 버립니다(캡처가 그 상태였습니다). · 가운데만 또렷하게 — 양옆은 아주 살짝 흐리게 처리해 활성 사진이 확실히 선명해 보이도록 했습니다. ══════════════════════════════════════════════════════════════ */ /* 캐러셀이 켜지기 전 기본 모습 — 정상 크기 · 선명 */ #intTrack .slide, #brTrack .slide{transform:none; opacity:1; filter:none} #intTrack.car .slide, #brTrack.car .slide{ transform-origin:50% 50%; transform:scale(calc(.80 + var(--f,0) * .65)); opacity:calc(.42 + var(--f,0) * .58); filter:blur(calc((1 - var(--f,0)) * 1.5px)); transition:transform .55s var(--ease), opacity .5s var(--ease), filter .5s var(--ease); } #intTrack.car .slide.is-center, #brTrack.car .slide.is-center{ filter:none; opacity:1; } @media (max-width:760px){ #intTrack.car .slide, #brTrack.car .slide{ transform:scale(calc(.82 + var(--f,0) * .48)); filter:blur(calc((1 - var(--f,0)) * 1.1px)); } } @media (prefers-reduced-motion:reduce){ #intTrack.car .slide, #brTrack.car .slide{ transform:none; opacity:1; filter:none; transition:none} } /* ── 2026.09.28 · 09 창업 타입 카드 제목 앞 아이콘 ────────────── */ #business .type h3{display:flex; align-items:center; gap:11px} #business .type .ticon{ flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--redbg); border:1px solid #EFD3CA; color:var(--red); transition:transform .45s var(--ease), background .3s, border-color .3s; } #business .type .ticon svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } @media (hover:hover){ #business .type:hover .ticon{ transform:translateY(-2px) scale(1.06); background:var(--red); border-color:var(--red); color:#fff; } } @media (max-width:760px){ #business .type .ticon{width:34px; height:34px; border-radius:10px} #business .type .ticon svg{width:19px; height:19px} #business .type h3{gap:9px} } @media (prefers-reduced-motion:reduce){ #business .type .ticon{transition:none} } /* ── 2026.09.28 · 06 슬라이드 위쪽 빈 띠 정리 ────────────────── 가운데 카드가 커질 자리를 만들려고 트랙에 위아래 여백을 크게 줬는데, 음수 마진으로 덜 상쇄해서 카드 위에 빈 띠가 남았습니다. 상쇄값을 맞춰 빈 공간을 없앱니다. */ #intTrack.track.car, #brTrack.track.car{ margin-top:-58px; margin-bottom:-50px; } #interior .slider{margin-top:14px !important} #interior .branches .slider{margin-top:2px !important} @media (max-width:760px){ #intTrack.track.car, #brTrack.track.car{ margin-top:-44px; margin-bottom:-38px; } } /* ══════════════════════════════════════════════════════════════ 2026.09.28 · 슬라이드가 위 문구를 덮던 문제 — 제가 만든 오류입니다 가운데 카드는 1.45배로 커지면서 위쪽으로 약 56px 더 자랍니다. 그만큼 트랙에 위 여백(62px)을 줬는데, 직전 수정에서 음수 마진을 -58px 까지 올려버려 카드가 문구 위로 올라탔습니다. 여백을 다시 잡아 겹침 없이, 빈 띠도 남지 않게 맞춥니다. ══════════════════════════════════════════════════════════════ */ #interior .slider{margin-top:40px !important} #interior .branches .slider{margin-top:40px !important} #intTrack.track.car, #brTrack.track.car{ margin-top:-34px; margin-bottom:-30px; } @media (max-width:760px){ #interior .slider, #interior .branches .slider{margin-top:30px !important} #intTrack.track.car, #brTrack.track.car{ margin-top:-26px; margin-bottom:-22px; } } /* ── 2026.09.28 · 슬라이드 카드 위쪽 얇은 빈 줄 제거 ──────────── 사진 슬라이드(.ph.has-img)에 자리표시용 테두리와 옅은 배경이 그대로 남아 있어, 사진 위에 가느다란 회색 줄로 보였습니다. 사진이 들어간 칸은 테두리·배경을 없애고 사진만 남깁니다. */ .slide .ph.has-img{ border:0 !important; background:none !important; padding:0 !important; overflow:hidden; line-height:0; } .slide .ph.has-img img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; } /* ── 2026.09.28 · 07 CHECK 카드 배경 아이콘 ──────────────────── 오른쪽 아래에 크게, 아주 옅게. 글씨를 방해하지 않도록 카드 밖으로 나가는 부분은 잘라 냅니다. */ #support .chk{position:relative; overflow:hidden; isolation:isolate} #support .chk > *{position:relative; z-index:1} #support .chk .chkbg{ position:absolute; z-index:0; right:-16px; bottom:-18px; width:118px; height:118px; color:var(--red); opacity:.085; pointer-events:none; transition:opacity .45s var(--ease), transform .55s var(--ease); } #support .chk .chkbg svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; } @media (hover:hover){ #support .chk:hover .chkbg{opacity:.15; transform:translate(-4px,-4px) scale(1.04)} } @media (max-width:1180px){ #support .chk .chkbg{width:100px; height:100px; right:-12px; bottom:-14px} } @media (max-width:760px){ #support .chk .chkbg{width:88px; height:88px; opacity:.075} } @media (prefers-reduced-motion:reduce){ #support .chk .chkbg{transition:none} } /* ── 2026.09.28 · CHECK 카드 배경 아이콘 — 밝은 회색 · 1.5배 ──── */ #support .chk .chkbg{ width:177px; height:177px; /* 118 × 1.5 */ right:-26px; bottom:-28px; color:#9A9A9A; opacity:.30; } #support .chk .chkbg svg{stroke-width:1.05} @media (hover:hover){ #support .chk:hover .chkbg{opacity:.42; transform:translate(-5px,-5px) scale(1.04)} } @media (max-width:1180px){ #support .chk .chkbg{width:150px; height:150px; right:-20px; bottom:-22px} } @media (max-width:760px){ #support .chk .chkbg{width:132px; height:132px; opacity:.26} } /* ── 2026.09.28 · 05 시간대 카드 배경 아이콘 ──────────────────── 어두운 카드 위라 회색을 낮은 농도로 얹어 은은하게 둡니다. 막대(.tl)와 글씨는 아이콘 위로 올려 가독성을 지킵니다. */ .daypart .dp{overflow:hidden; isolation:isolate} .daypart .dp > *{position:relative; z-index:1} .daypart .dp .dpbg{ position:absolute; z-index:0; right:-24px; bottom:-20px; width:150px; height:150px; color:#A9A39B; opacity:.18; pointer-events:none; transition:opacity .45s var(--ease), transform .55s var(--ease); } .daypart .dp .dpbg svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; } @media (hover:hover){ .daypart .dp:hover .dpbg{opacity:.28; transform:translate(-4px,-4px) scale(1.04)} } @media (max-width:1180px){ .daypart .dp .dpbg{width:132px; height:132px; right:-20px; bottom:-18px} } @media (max-width:760px){ .daypart .dp .dpbg{width:116px; height:116px; opacity:.16} } @media (prefers-reduced-motion:reduce){ .daypart .dp .dpbg{transition:none} } /* ── 2026.09.28 · 시간대 카드 아이콘 — 하단 색 막대 위로 올림 ──── 아이콘이 카드 아래 모서리에 걸쳐 있어서 막대(.tl)와 겹쳤습니다. 막대 높이 6px + 위 여백 16px + 카드 아래 여백 22px 을 피해 바닥에서 42px 위에 놓고, 그 공간에 온전히 들어가는 크기로 줄였습니다(윗부분이 잘리지 않습니다). */ .daypart .dp .dpbg{ bottom:42px !important; right:-8px !important; width:98px !important; height:98px !important; } @media (max-width:1180px){ .daypart .dp .dpbg{ bottom:40px !important; right:-6px !important; width:88px !important; height:88px !important; } } @media (max-width:760px){ .daypart .dp .dpbg{ bottom:38px !important; right:-4px !important; width:82px !important; height:82px !important; } } /* ── 2026.09.28 · 03 전 연령 카드 배경 아이콘 ─────────────────── 흰 카드라 회색을 옅게 얹습니다. */ #proof .grid.g4 > .card{position:relative; overflow:hidden; isolation:isolate} #proof .grid.g4 > .card > *{position:relative; z-index:1} #proof .grid.g4 > .card .audbg{ position:absolute; z-index:0; right:-18px; bottom:-16px; width:112px; height:112px; color:#9A9A9A; opacity:.26; pointer-events:none; transition:opacity .45s var(--ease), transform .55s var(--ease); } #proof .grid.g4 > .card .audbg svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; } @media (hover:hover){ #proof .grid.g4 > .card:hover .audbg{opacity:.38; transform:translate(-4px,-4px) scale(1.04)} } @media (max-width:1180px){ #proof .grid.g4 > .card .audbg{width:96px; height:96px} } @media (max-width:760px){ #proof .grid.g4 > .card .audbg{width:84px; height:84px; opacity:.22} } /* ── BENEFIT 카드 — 글씨 옆 빈 자리에 아이콘 ──────────────────── 글씨는 왼쪽, 아이콘은 오른쪽 세로 가운데. 흰색을 옅게 써서 빨간 배경에서 도드라지지 않게 둡니다. */ .benefit .bf{position:relative; overflow:hidden; padding-right:78px} .benefit .bf > *{position:relative; z-index:1} .benefit .bf .bfico{ position:absolute; z-index:0; right:14px; top:50%; transform:translateY(-50%); width:58px; height:58px; color:#fff; opacity:.30; pointer-events:none; transition:opacity .45s var(--ease), transform .55s var(--ease); } .benefit .bf .bfico svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; } @media (hover:hover){ .benefit .bf:hover .bfico{opacity:.45; transform:translateY(-50%) scale(1.07)} } @media (max-width:1180px){ .benefit .bf{padding-right:68px} .benefit .bf .bfico{width:50px; height:50px; right:12px} } @media (max-width:760px){ .benefit .bf{padding-right:52px} .benefit .bf .bfico{width:40px; height:40px; right:9px; opacity:.26} } @media (max-width:360px){ .benefit .bf{padding-right:44px} .benefit .bf .bfico{width:34px; height:34px; right:7px} } @media (prefers-reduced-motion:reduce){ #proof .grid.g4 > .card .audbg, .benefit .bf .bfico{transition:none} } /* ══════════════════════════════════════════════════════════════ 2026.09.28 · 빠른 상담 접수 연출 ① 입력창이 아래로 스르륵 내려가고 ② 초록 '상담 신청 완료' 가 올라와 2.8초 머문 뒤 원래 바로 복귀 ══════════════════════════════════════════════════════════════ */ /* ① 내려가는 동작 */ .dock .row, .dockform, .dockdone{ transition:opacity .34s var(--ease), transform .42s var(--ease); } .dock.leaving .row, .dock.leaving .dockform{opacity:0; transform:translateY(22px)} .form#heroForm{transition:opacity .34s var(--ease), transform .42s var(--ease)} .form#heroForm.sending{opacity:0; transform:translateY(22px); pointer-events:none} /* ② 초록 완료 */ .dock.done{background:#EDF7F1; border-top-color:#C3E2D1} .dockdone{opacity:0; transform:translateY(18px); color:#1F6B45} .dock.done .dockdone{opacity:1; transform:none} .dockdone span{background:#1F6B45} /* 하단바가 없는 넓은 화면용 — 가운데 아래 알림 */ .thdone{ position:fixed; left:50%; bottom:30px; z-index:300; display:flex; align-items:center; gap:10px; padding:14px 24px; border-radius:999px; background:#EDF7F1; border:1px solid #C3E2D1; color:#1F6B45; font-size:15px; font-weight:700; letter-spacing:-.01em; box-shadow:0 18px 40px rgba(26,23,20,.16); opacity:0; transform:translate(-50%,20px); transition:opacity .42s var(--ease), transform .5s var(--ease); pointer-events:none; } .thdone.on{opacity:1; transform:translate(-50%,0)} .thdone i{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#1F6B45; color:#fff; font-size:13px; font-style:normal; } @media (max-width:760px){ .thdone{bottom:96px; font-size:14px; padding:12px 20px} } @media (prefers-reduced-motion:reduce){ .dock .row, .dockform, .dockdone, .form#heroForm, .thdone{transition:none} } /* ── 2026.09.28 · 내려간 입력창이 빈 칸으로 남지 않도록 ────────── 보이지 않는 동안에는 클릭도 막습니다(잘못 눌리는 것 방지). */ .dock.leaving .row, .dock.leaving .dockform{pointer-events:none} /* ══════════════════════════════════════════════════════════════ 2026.09.28 · 빠른 상담 폼 안의 자동등록방지(캡차) 칸 숫자 캡차는 한 페이지에 하나만 유효해, 하단 상담 폼에 있던 칸을 그대로 옮겨 씁니다. 옮겨진 뒤의 모양만 잡아 줍니다. ══════════════════════════════════════════════════════════════ */ .captcha.qcap{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px; padding:12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22); border-radius:10px; } .captcha.qcap img{max-height:40px; border-radius:6px; display:block} .captcha.qcap input[name="captcha_key"]{ flex:1 1 110px; min-width:0; height:40px; padding:0 12px; background:var(--fill); border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; color:var(--ink); } .captcha.qcap button{ height:34px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:transparent; color:inherit; font:inherit; font-size:12px; cursor:pointer; } .captcha.qcap #captcha_info, .captcha.qcap .captcha_info{ flex:1 1 100%; font-size:11.5px; line-height:1.6; opacity:.8; margin:0; } /* 히어로(어두운 배경)용 */ #heroForm .captcha.qcap input[name="captcha_key"]{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:#fff; } #heroForm .captcha.qcap button{border-color:rgba(255,255,255,.4); color:#fff} /* 하단바(밝은 배경)용 */ #dockForm .captcha.qcap{ flex:1 1 100%; background:#F6F2EC; border-color:var(--line); } #dockForm .captcha.qcap input[name="captcha_key"]{background:#fff; color:var(--ink)} @media (max-width:760px){ .captcha.qcap{padding:10px} .captcha.qcap img{max-height:36px} } /* ── 2026.09.28 · 하단바 캡차는 입력칸 줄이 아니라 아래 한 줄로 ── 입력칸 줄 안에 넣었더니 세 칸이 잘게 쪼개져 세로 막대처럼 보였습니다. 폼의 마지막 줄로 빼서 가로를 온전히 씁니다. */ #dockForm .captcha.qcap{flex:1 1 100%; order:9; margin-top:2px} #dockForm .dockform-in{flex:1 1 380px} #dockForm .dockform-in input{flex:1 1 0; min-width:96px} /* ══════════════════════════════════════════════════════════════ 2026.09.28 · 접수 완료 연출 — 흰 배경에서 빨강이 왼→오른쪽으로 초록 계열은 모두 걷어냅니다. ① 흰 바탕 · 빨간 글자로 등장 ② 빨간색이 왼쪽에서 오른쪽으로 스르륵 채워짐 (0.75초) ③ 채워지는 순간에 맞춰 글자가 흰색으로 바뀜 ══════════════════════════════════════════════════════════════ */ /* ── 화면 아래 알림 ─────────────────────────────────────── */ .thdone{ position:fixed; left:50%; bottom:30px; z-index:300; display:flex; align-items:center; gap:10px; padding:14px 26px; border-radius:999px; background:#fff !important; border:1px solid #EBD5CF !important; color:var(--red) !important; font-size:15px; font-weight:800; letter-spacing:-.01em; box-shadow:0 18px 40px rgba(26,23,20,.18); overflow:hidden; isolation:isolate; } .thdone::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--red); transform:scaleX(0); transform-origin:left center; transition:transform .75s cubic-bezier(.22,.9,.24,1) .18s; } .thdone.on::before{transform:scaleX(1)} .thdone > *{position:relative; z-index:1} .thdone b{color:var(--red); transition:color .26s var(--ease) .62s} .thdone.on b{color:#fff} .thdone i{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--red); color:#fff; font-size:13px; font-style:normal; transition:background .26s var(--ease) .58s, color .26s var(--ease) .58s; } .thdone.on i{background:#fff; color:var(--red)} /* ── 모바일 하단바 완료 ─────────────────────────────────── */ .dock{position:relative; isolation:isolate} .dock > *{position:relative; z-index:1} .dock::after{ content:""; position:absolute; inset:0; z-index:0; background:var(--red); transform:scaleX(0); transform-origin:left center; opacity:0; transition:transform .75s cubic-bezier(.22,.9,.24,1) .14s, opacity 0s; pointer-events:none; } .dock.done{background:#fff !important; border-top-color:#EBD5CF !important} .dock.done::after{opacity:1; transform:scaleX(1)} .dockdone{color:var(--red) !important} .dockdone b{font-weight:800; transition:color .26s var(--ease) .6s} .dock.done .dockdone b{color:#fff} .dockdone span{ background:var(--red) !important; color:#fff; transition:background .26s var(--ease) .56s, color .26s var(--ease) .56s; } .dock.done .dockdone span{background:#fff !important; color:var(--red)} @media (prefers-reduced-motion:reduce){ .thdone::before, .dock::after, .thdone b, .thdone i, .dockdone b, .dockdone span{transition:none} } /* ── 2026.09.28 · 하단 고정바가 푸터에 붙어버린 문제 (수정) ────── 완료 연출을 넣으며 .dock 에 position:relative 를 줬는데, 원래 값이 position:fixed 였습니다. 화면 고정이 풀려 문서 흐름에 섞이면서 페이지 맨 아래에 놓였습니다. fixed 를 되돌립니다. */ .dock{ position:fixed !important; left:0; right:0; bottom:0; isolation:isolate; } /* ══════════════════════════════════════════════════════════════ 관리자 전용 — 상담 접수 내역 패널 (2026.09.28) 관리자로 로그인하면 오른쪽에서 열립니다. 방문자에게는 출력되지 않습니다. ══════════════════════════════════════════════════════════════ */ .inqbtn{ position:fixed; top:calc(var(--header) + 14px); right:16px; z-index:190; display:inline-flex; align-items:center; gap:8px; padding:9px 14px 9px 12px; border-radius:999px; background:#1A1714; color:#fff; border:1px solid rgba(255,255,255,.14); font:inherit; font-size:13px; font-weight:700; letter-spacing:-.01em; box-shadow:0 10px 26px rgba(26,23,20,.28); cursor:pointer; transition:transform .3s var(--ease), background .25s; } .inqbtn:hover{background:#2A2420; transform:translateY(-1px)} .inqbtn .ic{font-size:13px; opacity:.85} .inqbtn .badge{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--red); color:#fff; font-size:11.5px; font-style:normal; font-weight:800; } body.inq-open .inqbtn{transform:translateX(-436px)} .inqpanel{ position:fixed; top:0; right:0; bottom:0; z-index:180; width:420px; max-width:100vw; background:#FAF7F2; color:var(--ink); border-left:1px solid var(--line); box-shadow:-18px 0 48px rgba(26,23,20,.16); display:flex; flex-direction:column; transform:translateX(104%); transition:transform .48s var(--ease); } .inqpanel.open{transform:none} .inqhead{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:calc(var(--header) + 14px) 18px 14px 20px; background:#fff; border-bottom:1px solid var(--line); position:relative; } .inqhead::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, var(--red) 0%, #D9694F 60%, rgba(168,50,31,.25) 100%); } .inqhead b{display:block; font-family:var(--serif); font-weight:700; font-size:19px; letter-spacing:-.02em} .inqhead small{display:block; margin-top:4px; font-size:12px; color:var(--ink3)} .inqhead small strong{color:var(--red); font-weight:800} .inqtools{display:flex; align-items:center; gap:6px; flex:none; margin-top:2px} .inqtools a, .inqtools button{ height:30px; padding:0 11px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink2); font:inherit; font-size:12px; font-weight:600; text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; } .inqtools a:hover, .inqtools button:hover{border-color:var(--red); color:var(--red)} .inqtools #inqClose{width:30px; padding:0; justify-content:center} .inqempty{margin:0; padding:40px 20px; text-align:center; color:var(--ink3); font-size:14px; line-height:1.8} .inqempty code{font-size:11.5px; background:#fff; padding:2px 6px; border-radius:4px; border:1px solid var(--line)} .inqlist{list-style:none; margin:0; padding:12px 14px 30px; overflow:auto; flex:1 1 auto; scrollbar-width:thin} .inqrow{ position:relative; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px 12px; margin-bottom:10px; transition:box-shadow .3s var(--ease), border-color .3s; } .inqrow:hover{border-color:#E4CFC7; box-shadow:0 10px 26px rgba(26,23,20,.08)} .inqrow.is-new{border-color:#EFD3CA; background:#FFFBF9} .inqrow.is-new::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:var(--red); } .inqtop{display:flex; align-items:center; gap:8px} .inqtop .nm{font-size:15.5px; font-weight:800; letter-spacing:-.02em} .inqtop .new{ font-style:normal; font-size:10px; font-weight:800; letter-spacing:.06em; color:#fff; background:var(--red); padding:2px 6px; border-radius:4px; } .inqtop .dt{margin-left:auto; font-size:12px; color:var(--ink3); font-variant-numeric:tabular-nums} .inqtel{display:flex; align-items:center; gap:10px; margin-top:6px; font-size:14px} .inqtel a{color:var(--ink); font-weight:700; text-decoration:none; letter-spacing:.01em} .inqtel a:hover{color:var(--red)} .inqtel .area{color:var(--ink2)} .inqtel .area::before{content:"·"; margin-right:8px; color:var(--ink3)} .inqtags{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px} .inqtags span{ font-size:11.5px; font-weight:600; color:var(--ink2); background:#F3EEE6; border:1px solid #E8E0D3; padding:3px 8px; border-radius:999px; } .inqtags .from{background:#FBF3E3; border-color:#EAD9B6; color:#8C6417} .inqtags .mkt{background:#EAF1EE; border-color:#CFE0D7; color:#2E5C4A} .inqmemo{margin:9px 0 0; font-size:12.5px; line-height:1.65; color:var(--ink2)} .inqopen{ display:inline-block; margin-top:9px; font-size:12px; font-weight:700; color:var(--red); text-decoration:none; } .inqopen:hover{text-decoration:underline} @media (max-width:760px){ .inqbtn{top:auto; bottom:calc(84px + env(safe-area-inset-bottom)); right:12px; padding:8px 12px; font-size:12.5px} body.inq-open .inqbtn{transform:translateY(-8px); opacity:0; pointer-events:none} .inqpanel{width:100vw} .inqhead{padding:16px 14px 12px 16px} .inqlist{padding:10px 12px 90px} } @media (prefers-reduced-motion:reduce){ .inqpanel, .inqbtn{transition:none} } /* ── 2026.09.28 · 상담 접수 패널 — 헤더 아래로 · 로고 · 펼치기/접기 ── 패널 머리에 사이트 헤더 높이만큼 여백을 넣었더니 위가 텅 비어 보였습니다. 패널 자체를 헤더 밑에서 시작하게 하고 여백은 뺍니다. */ .inqpanel{top:var(--header); z-index:59} /* 헤더(z 60) 아래 */ .inqhead{padding:16px 16px 14px 20px; align-items:center} .inqbrand{display:flex; flex-direction:column; gap:2px; min-width:0} .inqbrand img{ display:block; width:auto; height:22px; margin-bottom:8px; object-fit:contain; object-position:left center; } .inqbrand b{font-size:18px; line-height:1.2} .inqbrand small{margin-top:3px} /* 버튼도 헤더 바로 아래에 */ .inqbtn{top:calc(var(--header) + 12px)} .inqbtn .st{ font-size:11.5px; font-weight:600; opacity:.72; padding:2px 7px; border-radius:999px; border:1px solid rgba(255,255,255,.25); } body.inq-open .inqbtn{transform:translateX(-436px)} @media (max-width:760px){ .inqpanel{top:var(--header)} .inqhead{padding:14px 14px 12px 16px} .inqbrand img{height:20px; margin-bottom:6px} .inqbtn{top:auto; bottom:calc(84px + env(safe-area-inset-bottom))} body.inq-open .inqbtn{transform:none; opacity:1; pointer-events:auto; bottom:12px; z-index:200} /* 폰에서는 접기 버튼이 패널 위에 떠 있게 */ } /* ══════════════════════════════════════════════════════════════ 서브 페이지(게시판) — 페이지 번호 정렬 · 활성 페이지 빨강 (2026.09.28) 그누보드 기본 페이지네이션(.pg_wrap) 마크업을 그대로 두고 모양만 원페이지 톤으로 맞춥니다. ══════════════════════════════════════════════════════════════ */ .sub-body .pg_wrap{display:flex; justify-content:flex-start; margin:22px 0 0; text-align:left} .sub-body .pg{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap} .sub-body .pg .pg_page, .sub-body .pg .pg_current{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:40px; height:40px; padding:0 10px; border:1px solid transparent; border-radius:8px; background:#F0ECE5; color:var(--ink2); font:inherit; font-size:14px; font-weight:600; line-height:1; text-decoration:none; transition:background .2s, color .2s, border-color .2s; } .sub-body .pg .pg_page:hover{background:#E6E0D6; color:var(--ink)} .sub-body .pg .pg_current{ background:var(--red); border-color:var(--red); color:#fff; font-weight:800; } /* 처음·이전·다음·맨끝 — 글자 대신 화살표 */ .sub-body .pg .pg_start, .sub-body .pg .pg_prev, .sub-body .pg .pg_next, .sub-body .pg .pg_end{ font-size:0; color:var(--ink3); background:#F5F2ED; } .sub-body .pg .pg_start::before{content:"«"; font-size:14px} .sub-body .pg .pg_prev::before {content:"‹"; font-size:16px} .sub-body .pg .pg_next::before {content:"›"; font-size:16px} .sub-body .pg .pg_end::before {content:"»"; font-size:14px} .sub-body .pg .pg_start:hover, .sub-body .pg .pg_prev:hover, .sub-body .pg .pg_next:hover, .sub-body .pg .pg_end:hover{color:var(--red)} /* 목록 아래 버튼 · 검색 줄도 같은 톤으로 */ .sub-body .btn_bo_user, .sub-body .bo_fx{display:flex; gap:8px; align-items:center} .sub-body .btn_bo_user a, .sub-body .btn_bo_user button, .sub-body .bo_fx .btn_bo_adm button{ height:40px; padding:0 16px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink2); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; } .sub-body .btn_bo_user a:hover, .sub-body .btn_bo_user button:hover{border-color:var(--red); color:var(--red)} .sub-body .btn_bo_user .btn_b02{background:#1A1714; color:#fff; border-color:#1A1714} .sub-body .btn_bo_user .btn_b02:hover{background:#2A2420; color:#fff} @media (max-width:760px){ .sub-body .pg .pg_page, .sub-body .pg .pg_current{min-width:36px; height:36px; font-size:13px} } /* ── 2026.09.28 · 05 조리시간·식사시간 숫자 → 독도(붓글씨) ─────── */ .metric strong{ font-family:var(--brush); font-weight:400; font-size:44px; line-height:1.05; letter-spacing:0; margin-top:6px; } @media (max-width:1180px){ .metric strong{font-size:40px} } @media (max-width:760px){ .metric strong{font-size:36px} } /* ── 2026.09.28 · 07 CHECK 카드 배경 아이콘 — 한 단계 더 연하게 ─── 회색 30% 가 글씨와 경쟁해 보여 16% 로 낮추고 색도 밝은 회색으로. 선도 조금 더 가늘게 해서 배경에 가라앉게 둡니다. */ #support .chk .chkbg{ color:#B8B4AE; opacity:.16; } #support .chk .chkbg svg{stroke-width:.95} @media (hover:hover){ #support .chk:hover .chkbg{opacity:.24} } @media (max-width:760px){ #support .chk .chkbg{opacity:.14} } /* ══════════════════════════════════════════════════════════════ 2026.09.28 · 모바일 관리자 버튼 — 정리본 (앞선 시행착오 블록 제거) · '상담 접수 내역' : PC 와 같은 검은 가로 알약, 오른쪽 아래 · '주석 ON' : 그 바로 아래 오른쪽 · 하단 고정바가 올라오면 둘 다 그 위로, 입력창 펼침 시 숨김 · 열림/닫힘에 따라 위치·색이 바뀌지 않음 (글자만 펼치기/접기) ══════════════════════════════════════════════════════════════ */ @media (max-width:760px){ .inqbtn{ top:auto; left:auto; right:12px; bottom:calc(58px + env(safe-area-inset-bottom)); transform:none; padding:9px 13px 9px 12px; font-size:12.5px; z-index:200; transition:bottom .45s var(--ease); } .inqbtn .st{padding:2px 7px; font-size:11px} body.inq-open .inqbtn{transform:none; opacity:1; pointer-events:auto} body.dock-on .inqbtn{bottom:calc(130px + env(safe-area-inset-bottom))} body.dock-form-open .inqbtn{display:none} .annobar{ top:auto; left:auto; right:12px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:200; transition:bottom .45s var(--ease); } body.dock-on .annobar{bottom:calc(86px + env(safe-area-inset-bottom))} body.dock-form-open .annobar{display:none} .inqpanel{width:100vw} .inqhead{padding:14px 14px 12px 16px} .inqlist{padding-bottom:calc(150px + env(safe-area-inset-bottom))} } /* ── 2026.09.28 · 헤더 아래 섹션 탭이 생기면 관리자 버튼·패널 자동 하강 ─ --chips-h 는 스크립트가 탭 높이를 재서 넣습니다(없으면 0). */ .inqbtn{top:calc(var(--header) + var(--chips-h, 0px) + 12px)} .inqpanel{top:calc(var(--header) + var(--chips-h, 0px))} @media (max-width:760px){ .inqbtn{top:auto} /* 폰에서는 아래쪽 고정이라 무관 */ .inqpanel{top:calc(var(--header) + var(--chips-h, 0px))} } /* ══════════════════════════════════════════════════════════════ 2026.09.29 · 붓터치 아이콘 — CSS 마스크로 색 입히기 .bic 의 배경색(currentColor)이 곧 아이콘 색입니다. ══════════════════════════════════════════════════════════════ */ .bic{ display:block; width:100%; height:100%; background:currentColor; -webkit-mask:var(--bic) center / contain no-repeat; mask:var(--bic) center / contain no-repeat; } /* 붓 획이 굵어 작은 칩에서는 살짝 여유를 둡니다 */ #business .type .ticon .bic{width:26px; height:26px} .benefit .bf .bfico .bic{width:100%; height:100%} /* 워터마크용은 붓 질감이 살도록 농도를 조금 올립니다 */ #support .chk .chkbg{opacity:.20} #proof .grid.g4 > .card .audbg{opacity:.28} .daypart .dp .dpbg{opacity:.22} /* ══════════════════════════════════════════════════════════════ 2026.09.29 · 팝업레이어 — 헤더·섹션 탭을 가리지 않도록 · 층을 헤더(60)·탭(50) 아래(45)로 내려 메뉴가 항상 위에 옵니다 · 시작 위치도 헤더 + 탭 높이 아래로 자동 이동합니다 ══════════════════════════════════════════════════════════════ */ #hd_pop{z-index:45 !important} .hd_pops{margin-top:calc(var(--header) + var(--chips-h, 0px) + 10px) !important} @media (max-width:760px){ .hd_pops{margin-top:calc(var(--header) + var(--chips-h, 0px) + 8px) !important} .hd_pops_con{max-height:60vh} } /* ── 2026.09.29 · 붓터치 아이콘 인라인 SVG 모양 ─────────────────── 각 칸의 svg 규칙(선 굵기 등)은 붓 아이콘에는 쓰지 않습니다 — 획 굵기는 파일 안에 정해져 있습니다. */ .bsvg{display:block; width:100%; height:100%; overflow:visible} .bsvg *{vector-effect:none} #support .chk .chkbg .bsvg, #proof .grid.g4 > .card .audbg .bsvg, .daypart .dp .dpbg .bsvg, .benefit .bf .bfico .bsvg, #business .type .ticon .bsvg{stroke-width:initial} #business .type .ticon .bsvg{width:26px; height:26px} /* ── 2026.09.29 · 붓터치 아이콘 잘림 방지 — 오른쪽·아래 여백 확보 ── 워터마크 자리를 카드 모서리 밖(-16px 등)에 걸쳐 두었던 걸 카드 안쪽으로 들여옵니다. 붓 획은 파일 상자보다 바깥으로 조금 번지므로(필터 여백 20%) 여유를 더 둡니다. */ #proof .grid.g4 > .card .audbg{right:16px; bottom:14px; width:96px; height:96px} #support .chk .chkbg{right:18px; bottom:16px; width:150px; height:150px} .daypart .dp .dpbg{right:14px; bottom:44px; width:92px; height:92px} .benefit .bf .bfico{right:18px} @media (max-width:1180px){ #proof .grid.g4 > .card .audbg{width:84px; height:84px; right:14px; bottom:12px} #support .chk .chkbg{width:128px; height:128px; right:16px; bottom:14px} .daypart .dp .dpbg{width:84px; height:84px; right:12px; bottom:42px} } @media (max-width:760px){ #proof .grid.g4 > .card .audbg{width:76px; height:76px; right:14px; bottom:12px} #support .chk .chkbg{width:112px; height:112px; right:14px; bottom:12px} .daypart .dp .dpbg{width:78px; height:78px; right:12px; bottom:40px} } /* 호버 시 이동도 안쪽 방향으로만 */ @media (hover:hover){ #support .chk:hover .chkbg, #proof .grid.g4 > .card:hover .audbg, .daypart .dp:hover .dpbg{transform:translate(-2px,-2px) scale(1.03)} } /* ══════════════════════════════════════════════════════════════ 2026.09.29 · 모바일 붓글씨 대문 확대 — 단락 상단을 잡아주도록 현재 46/39px 이 본문과 차이가 적어 문단이 흐릿하게 시작했습니다. 각 섹션 리드를 +14px 안팎 키워 눈에 먼저 걸리게 합니다. ══════════════════════════════════════════════════════════════ */ @media (max-width:760px){ .hero h1{font-size:58px; line-height:1.22} .lead{font-size:58px; line-height:1.24} .lead.sm{font-size:50px; line-height:1.26} #support .sup-copy .lead{font-size:54px} #support .sup-copy .lead.sm{font-size:40px} /* 붓글씨 아래 본문과 간격을 조금 더 */ .lead + .copy, .lead.sm + .copy{margin-top:14px} } @media (max-width:420px){ .hero h1{font-size:52px} .lead{font-size:52px} .lead.sm{font-size:45px} #support .sup-copy .lead{font-size:48px} #support .sup-copy .lead.sm{font-size:36px} } @media (max-width:360px){ .hero h1{font-size:48px} .lead{font-size:48px} .lead.sm{font-size:42px} #support .sup-copy .lead{font-size:44px} #support .sup-copy .lead.sm{font-size:34px} } /* ══════════════════════════════════════════════════════════════ 2026.09.29 · 07 '줄일 수 있는 수고는…' — 명조 → 독도(붓글씨) 붓글씨 기준으로 크기·행간을 다시 잡고, 그 문단 위 빈 공간에 누끼 그릇 두 개를 오른쪽으로 살짝 겹쳐 얹습니다. ══════════════════════════════════════════════════════════════ */ #support .sup-copy .lead.sm{ font-family:var(--brush) !important; font-weight:400; font-size:44px; line-height:1.16 !important; letter-spacing:0; text-shadow:0 2px 14px rgba(0,0,0,.35); } @media (max-width:1180px){ #support .sup-copy .lead.sm{font-size:40px} } @media (max-width:760px) { #support .sup-copy .lead.sm{font-size:44px; line-height:1.18 !important} } @media (max-width:480px) { #support .sup-copy .lead.sm{font-size:40px} } @media (max-width:360px) { #support .sup-copy .lead.sm{font-size:36px} } /* 모바일 — 그릇 두 개를 두 번째 붓글씨 '바로 위' 오른쪽에 겹쳐서 (스크립트가 .sup-dish 를 두 문단 사이로 옮겨 놓습니다) */ @media (max-width:760px){ .sup-copy{max-width:none} .sup-dish.inflow{ position:relative; top:auto; bottom:auto; right:auto; width:100%; height:210px; margin:14px 0 6px; display:block; pointer-events:none; overflow:visible; } .sup-dish.inflow .d1{ position:absolute; top:0; right:30%; bottom:auto; width:196px; max-width:none; transform:none; z-index:2; } .sup-dish.inflow .d2{ position:absolute; top:34px; right:-26px; bottom:auto; width:206px; max-width:none; transform:none; z-index:1; } #support .sup-copy .lead.sm{margin-top:0 !important; position:relative; z-index:2} } @media (max-width:480px){ .sup-dish.inflow{height:184px} .sup-dish.inflow .d1{width:168px; right:30%} .sup-dish.inflow .d2{width:178px; right:-22px; top:30px} } @media (max-width:360px){ .sup-dish.inflow{height:166px} .sup-dish.inflow .d1{width:150px} .sup-dish.inflow .d2{width:160px; top:28px} } /* ── 2026.09.29 · 07 모바일 그릇 — 더 크게 · 가운데 배치 ──────── 두 그릇을 합친 묶음이 화면 가운데 오도록 좌우를 % 로 잡고, 크기는 화면 폭에 비례해(vw) 키웁니다. 위 그릇이 뒤, 아래 그릇이 앞으로 살짝 겹칩니다. */ @media (max-width:760px){ .sup-dish.inflow{ height:clamp(230px, 66vw, 320px); margin:16px 0 8px; } .sup-dish.inflow .d1{ left:2%; right:auto; top:0; width:clamp(220px, 60vw, 300px); z-index:1; } .sup-dish.inflow .d2{ left:auto; right:2%; top:auto; bottom:0; width:clamp(212px, 58vw, 290px); z-index:2; } } @media (max-width:420px){ .sup-dish.inflow{height:clamp(220px, 68vw, 290px)} .sup-dish.inflow .d1{width:clamp(200px, 62vw, 270px)} .sup-dish.inflow .d2{width:clamp(194px, 60vw, 262px)} } /* ── 2026.09.30 · 시간대 카드 아이콘 잘림 — 이전 !important 값 정정 ── '막대 위로 올리기' 때 right:-8px !important 를 걸어둔 게 남아 나중에 넣은 안쪽 여백(right:14px)이 먹지 않았습니다. */ .daypart .dp .dpbg{ right:18px !important; bottom:44px !important; width:96px !important; height:96px !important; } @media (max-width:1180px){ .daypart .dp .dpbg{right:16px !important; bottom:42px !important; width:88px !important; height:88px !important} } @media (max-width:760px){ .daypart .dp .dpbg{right:14px !important; bottom:40px !important; width:82px !important; height:82px !important} } /* ══════════════════════════════════════════════════════════════ 2026.09.30 · 09 매장 규모별 순이익 — 원형(링) 그래프 ══════════════════════════════════════════════════════════════ */ .rings{display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin:14px 0 8px} .ring{margin:0; text-align:center} .ring svg{display:block; width:min(100%, 300px); height:auto; margin:0 auto; filter:drop-shadow(0 14px 30px rgba(26,23,20,.16))} .ring-fg{transition:stroke-dashoffset 1.5s cubic-bezier(.22,.9,.24,1) var(--delay, 0ms)} .ring.go .ring-fg{stroke-dashoffset:var(--to)} .ring-core{transform-box:fill-box; transform-origin:center; transform:scale(.72); opacity:0; transition:transform .7s cubic-bezier(.22,.9,.24,1) calc(var(--delay,0ms) + .25s), opacity .5s var(--ease) calc(var(--delay,0ms) + .25s)} .ring.go .ring-core{transform:scale(1); opacity:1} .ring-cap, .ring-pct, .ring-won{fill:#fff; font-family:inherit; opacity:0; transition:opacity .5s var(--ease) calc(var(--delay,0ms) + .6s)} .ring.go .ring-cap, .ring.go .ring-pct, .ring.go .ring-won{opacity:1} .ring-cap{font-size:13px; font-weight:600; letter-spacing:-.01em} .ring-pct{font-size:40px; font-weight:800; letter-spacing:-.04em} .ring-won{font-size:14px; font-weight:700; letter-spacing:-.01em} .ring figcaption{margin-top:14px} .ring figcaption b{display:block; font-size:16px; font-weight:800; letter-spacing:-.02em} .ring figcaption small{display:block; margin-top:3px; font-size:12.5px; color:var(--ink3)} .ring figcaption em{display:block; margin-top:6px; font-style:normal; font-size:13px; font-weight:600; color:var(--ink2)} @media (max-width:760px){ .rings{grid-template-columns:1fr; gap:22px} .ring svg{width:min(100%, 260px)} } @media (prefers-reduced-motion:reduce){ .ring-fg, .ring-core, .ring-cap, .ring-pct, .ring-won{transition:none} .ring .ring-fg{stroke-dashoffset:var(--to)} .ring .ring-core{transform:none; opacity:1} .ring .ring-cap, .ring .ring-pct, .ring .ring-won{opacity:1} } /* ── 2026.09.30 · 링 그래프 — 사진 테두리 위 그라데이션 링 + 빛띠 ─ */ .ring svg{overflow:visible} .ring-shine{mix-blend-mode:screen; opacity:0; transition:opacity .6s var(--ease) calc(var(--delay,0ms) + 1.2s)} .ring.go .ring-shine{opacity:1} .ring-bg{filter:drop-shadow(0 2px 4px rgba(26,23,20,.12))} @media (prefers-reduced-motion:reduce){ .ring-shine{display:none} } /* ── 2026.09.30 · 링 빛띠 — 밝은 레드 톤, 은은하게 ────────────── */ .ring-shine{mix-blend-mode:normal; opacity:0} .ring.go .ring-shine{opacity:.85} /* ── 2026.09.30 · 링 빛띠 — 한 단계 더 연하게 ─────────────────── */ .ring.go .ring-shine{opacity:.6} /* ── 2026.09.30 · P&L 상단 숫자 — '월 매출' 라벨과 붓글씨 숫자 사이 간격 ─ 붓글씨는 글자 위 여백이 거의 없어 라벨과 붙어 보였습니다. 숫자 아래 여백과 같은 정도(약 14px)로 띄웁니다. */ .pl .hl span{margin-bottom:0} .pl .hl strong{margin-top:14px} @media (max-width:760px){ .pl .hl strong{margin-top:12px} } /* ── 2026.09.30 · P&L 숫자 옆 막대 그래프 ──────────────────────── */ .pl .hl > div.has-bar{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:16px; align-items:center; } .pl .hl > div.has-bar span{grid-column:1 / -1} .pl .hl > div.has-bar strong{grid-column:1; white-space:nowrap} .pl .hl > div.has-bar .hlbar{ grid-column:2; align-self:center; display:block; height:10px; border-radius:6px; background:rgba(26,23,20,.08); overflow:hidden; margin-top:14px; /* 숫자 위 여백과 맞춤 */ } .pl .hl > div.has-bar .hlbar b{ display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg, #3A3230, #6B5F5A); transition:width 1.2s cubic-bezier(.215,.61,.355,1); } .pl .hl > div.has-bar.go .hlbar b{width:var(--w)} /* 순이익 칸은 빨간 막대 */ .pl .hl > div.p.has-bar .hlbar b{background:linear-gradient(90deg, #8E2416, #E0553B)} @media (max-width:760px){ .pl .hl > div.has-bar{column-gap:12px} .pl .hl > div.has-bar .hlbar{height:8px; margin-top:12px} } @media (prefers-reduced-motion:reduce){ .pl .hl > div.has-bar .hlbar b{transition:none; width:var(--w)} } /* ── 2026.09.30 · P&L 막대 → 표 칸 전체를 채우는 방식으로 ─────── 숫자 옆 얇은 막대 대신, 칸 배경이 왼쪽에서 값만큼 차오릅니다. 글씨는 그 위에 그대로 놓입니다. */ .pl .hl > div.has-bar{ position:relative; overflow:hidden; isolation:isolate; display:block; /* 그리드 해제 */ } .pl .hl > div.has-bar > span, .pl .hl > div.has-bar > strong{position:relative; z-index:1} .pl .hl > div.has-bar .hlbar{ position:absolute; inset:0; z-index:0; height:auto; margin:0; border-radius:0; background:none; overflow:hidden; } .pl .hl > div.has-bar .hlbar b{ display:block; height:100%; width:0; border-radius:0; background:linear-gradient(90deg, rgba(58,50,48,.10), rgba(58,50,48,.18)); box-shadow:inset -3px 0 0 rgba(58,50,48,.28); /* 차오르는 앞머리 선 */ transition:width 1.2s cubic-bezier(.215,.61,.355,1); } .pl .hl > div.has-bar.go .hlbar b{width:var(--w)} /* 순이익 칸 — 붉게 */ .pl .hl > div.p.has-bar .hlbar b{ background:linear-gradient(90deg, rgba(168,50,31,.12), rgba(168,50,31,.24)); box-shadow:inset -3px 0 0 rgba(168,50,31,.55); } @media (prefers-reduced-motion:reduce){ .pl .hl > div.has-bar .hlbar b{transition:none; width:var(--w)} } /* ── 2026.09.30 · P&L 칸 채움 — 높이 0 으로 잡히던 문제 수정 ───── inset 만으로는 이전 규칙(height:10px→auto)과 얽혀 높이가 0 이 되었습니다. 위치·크기를 모두 명시합니다. */ .pl .hl > div.has-bar .hlbar{ top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; } .pl .hl > div.has-bar .hlbar b{height:100% !important; min-height:100%} /* ── 2026.09.30 · P&L 순이익 칸 — 차오르는 앞머리에 숫자가 밀려갑니다 ─ --w 는 이제 칸(div)에 걸려 있어 배경과 숫자가 같은 값을 씁니다. */ .pl .hl > div.p.has-bar strong{ display:inline-block; margin-left:0; transition:margin-left 1.2s cubic-bezier(.215,.61,.355,1); } .pl .hl > div.p.has-bar.go strong{margin-left:calc(var(--w) + 10px)} /* 순이익 칸은 비율이 작아 앞머리 선을 조금 더 또렷하게 */ .pl .hl > div.p.has-bar .hlbar b{box-shadow:inset -3px 0 0 rgba(168,50,31,.7)} @media (max-width:760px){ .pl .hl > div.p.has-bar.go strong{margin-left:calc(var(--w) + 8px)} } @media (prefers-reduced-motion:reduce){ .pl .hl > div.p.has-bar strong{transition:none} } /* ── 2026.09.30 · 순이익 칸 — '월 순이익' 라벨도 숫자와 함께 밀려갑니다 ─ */ .pl .hl > div.p.has-bar span{ display:inline-block; margin-left:0; transition:margin-left 1.2s cubic-bezier(.215,.61,.355,1); } .pl .hl > div.p.has-bar.go span{margin-left:calc(var(--w) + 10px)} @media (max-width:760px){ .pl .hl > div.p.has-bar.go span{margin-left:calc(var(--w) + 8px)} } @media (prefers-reduced-motion:reduce){ .pl .hl > div.p.has-bar span{transition:none} } /* ── 2026.09.30 · 순이익 칸 — 라벨과 숫자를 같은 왼쪽 선에, 두 줄로 ── inline-block 으로 두어 한 줄에 나란히 놓였습니다. 둘 다 블록으로 바꿔 '월 매출' 칸과 같은 2줄 구성이 되고 왼쪽 선이 맞습니다. */ .pl .hl > div.p.has-bar span, .pl .hl > div.p.has-bar strong{display:block !important; width:max-content; max-width:100%} /* ── 2026.09.30 · 순이익 칸 밀어내기 — 칸 여백(padding) 방식으로 통일 ── 라벨·숫자에 각각 걸던 margin 은 모두 0 으로 돌리고, 스크립트가 칸의 padding-left 를 채움 폭만큼 늘립니다(인라인). 채움 배경은 칸 전체 기준이라 padding 과 무관하게 같은 비율을 유지합니다. */ .pl .hl > div.p.has-bar{transition:padding-left 1.2s cubic-bezier(.215,.61,.355,1)} .pl .hl > div.p.has-bar span, .pl .hl > div.p.has-bar strong, .pl .hl > div.p.has-bar.go span, .pl .hl > div.p.has-bar.go strong{margin-left:0 !important; transition:none} .pl .hl > div.p.has-bar .hlbar{left:0 !important; right:0 !important} /* 배경은 padding 영향 없음 */ @media (prefers-reduced-motion:reduce){ .pl .hl > div.p.has-bar{transition:none} } /* ─── 08 매장 현황 · 최소 비용 업종변경 BEFORE/AFTER — 2026.09.30 추가 ───────── index.php 08 섹션의 .card.conv 블록과 세트. 시안 토큰(--red, --board, --line, --fill, --ink*, --ease) 사용. */ .conv{margin-top:44px; padding:36px 32px} .conv .head{max-width:720px} .ba{margin-top:28px} /* 결과 헤드라인 — 한 줄 · 같은 크기, 숫자만 레드. 0→300 카운트업 + 상승 화살표 드로잉 */ .ba .res{text-align:center; margin-bottom:26px} .ba .res .lbl{display:block; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--ink3)} .ba .res strong{display:inline-flex; align-items:center; gap:10px; font-size:32px; line-height:1.3; letter-spacing:-.04em; font-weight:800; color:var(--ink); margin-top:6px} .ba .res strong em{font-style:normal; color:var(--red); font-variant-numeric:tabular-nums} .ba .res .rise{width:56px; height:56px; overflow:visible; flex:none} .ba .rise .ink{filter:url(#brushRise)} /* 붓터치 — 붓터치 아이콘 11종과 동일 필터 */ .ba .rise .line{fill:none; stroke:var(--red); stroke-width:7.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.8s cubic-bezier(.35,0,.25,1) .1s} /* 화살촉이 선 끝을 타고 함께 올라갑니다 (offset-path · 선 드로잉과 같은 타이밍) */ .ba .rise .tip{fill:none; stroke:var(--red); stroke-width:7.5; stroke-linecap:round; stroke-linejoin:round; offset-rotate:auto; offset-distance:0%; transition:offset-distance 1.8s cubic-bezier(.35,0,.25,1) .1s} .ba .rise .base{fill:none; stroke:var(--line); stroke-width:4; stroke-linecap:round} .ba.in .rise .line{stroke-dashoffset:0} .ba.in .rise .tip{offset-distance:100%} @supports not (offset-path:path("M0,0 L1,1")){ /* 구형 브라우저 — 끝점에 고정 */ .ba .rise .tip{transform:translate(90px,14px) rotate(-58deg)} } /* 겹침 비교 — BEFORE(회색 · 뒤) 위로 AFTER(컬러 · 앞)가 올라와 덮습니다 */ .stack{display:grid; grid-template-columns:repeat(12,1fr); align-items:start} .stack figure{margin:0; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; grid-row:1} .stack .before{grid-column:1/8; background:#E8E4DC; border:1px solid #D9D3C8; margin-bottom:44px; z-index:1} .stack .after{grid-column:6/13; background:var(--board); border:1px solid var(--line); margin-top:44px; z-index:2; box-shadow:0 22px 48px rgba(26,23,20,.18); opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease) .35s, transform .9s var(--ease) .35s} .ba.in .stack .after{opacity:1; transform:none} .stack .img{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--fill)} .stack .img img{width:100%; height:100%; object-fit:cover; display:block} .stack .before .img img{object-position:center 26%; filter:grayscale(1) brightness(.72) contrast(1.05); opacity:.92} /* 보조 이미지 흑백 · 한 단계 어둡게 */ .stack .tag{position:absolute; left:14px; top:14px; z-index:2; font-size:11px; font-weight:800; letter-spacing:.12em; padding:6px 12px; border-radius:999px; background:rgba(26,23,20,.7); color:#fff} .stack .after .tag{background:var(--red)} .stack .imgnote{position:absolute; left:10px; bottom:8px; z-index:2; font-size:10.5px; line-height:1.4; color:#fff; background:rgba(26,23,20,.55); padding:3px 8px; border-radius:4px} .stack figcaption{padding:16px 20px 18px} .stack figcaption strong{display:block; font-size:18px; font-weight:800; letter-spacing:-.03em; line-height:1.4} .stack figcaption span{display:block; font-size:13px; color:var(--ink2); margin-top:2px} .stack .before figcaption{background:#E8E4DC} .stack .before figcaption strong{color:#6E675E} /* 회색 톤 — 뒤로 물러난 느낌 */ .stack .before figcaption span{color:#8F887D} .stack .after figcaption strong{color:var(--red)} .ba + .disc{margin-top:14px} @media (prefers-reduced-motion:reduce){ .ba .rise .line{stroke-dashoffset:0 !important; transition:none} .ba .rise .tip{offset-distance:100% !important; transition:none} .stack .after{opacity:1 !important; transform:none !important; transition:none} } @media (max-width:760px){ .conv{padding:26px 18px} .ba .res strong{font-size:25px; gap:9px} .ba .res .rise{width:36px; height:36px} .stack{display:block} .stack .before{width:88%; margin:0; flex-direction:column-reverse} /* 모바일: 캡션을 위로 올려 가려지지 않게 */ .stack .before figcaption{padding:14px 18px 12px} .stack .before .imgnote{left:auto; right:10px; bottom:auto; top:10px} .stack .after{width:88%; margin:-72px 0 0 auto} /* 칼국수 박스 위로 겹쳐 올라옵니다 */ } .card.conv:hover{transform:none; box-shadow:none} /* 블록 전체 호버 리프트는 끔 */ /* ── 2026.09.30 · BOOSTER 카드 상단 라인 — 그래프 막대와 같은 색 구성 ───────── BOOSTER 01 = 홀(레드) + 배달(민트) 2색 / BOOSTER 02 = 홀(레드) + 배달(민트) + 저녁(골드) 3색 색은 그래프 계열색(S1 #A8321F · S3 #0F9E8F · S2 #B07D1A)과 동일 */ #business .booster:nth-child(1)::before{ background:linear-gradient(90deg, #A8321F 0%, #A8321F 42%, #0F9E8F 58%, #0F9E8F 100%); } #business .booster:nth-child(2)::before{ background:linear-gradient(90deg, #A8321F 0%, #A8321F 30%, #0F9E8F 42%, #0F9E8F 60%, #B07D1A 72%, #B07D1A 100%); } /* ── 2026.09.30 · 모바일 전용 줄바꿈 (CHECK 4 교육 문구 등) ───────── 데스크톱에서는 한 줄로 흐르고, 모바일(760px 이하)에서만
지점에서 줄이 바뀝니다. */ .mb-br{display:none} @media (max-width:760px){ .mb-br{display:inline} } /* ── 2026.10.01 · 밀키트 본문 — 창 폭에 따라 1~2줄로 흐르는 문장 ───────── index.php 의 .mk-copy 두 문단. 고정 줄바꿈(pre-line) 대신 자연 줄바꿈, 어절 단위 유지. */ #support .milkit .copy.mk-copy{white-space:normal; word-break:keep-all; overflow-wrap:anywhere; max-width:34em; margin-bottom:12px} #support .milkit .copy.mk-copy + .note{margin-top:4px} /* ── 2026.10.01 · 밀키트 761~980px — 두 칸이면 사진이 제목을 덮으므로 한 칸으로. 사진은 버튼 아래로 내려가고(실제 img), 잘림 없이 통째로 보입니다. */ @media (min-width:761px) and (max-width:980px){ #support .milkit{background-image:none !important; min-height:0 !important} /* 배경 사진 대신 아래 실제 img */ #support .milkit .grid.g2{grid-template-columns:1fr !important; max-width:none} .milkit-shot{display:block !important; margin:26px -32px -36px !important; height:auto; overflow:hidden} .milkit-shot img{display:block !important; width:100%; height:auto; max-height:460px; object-fit:cover; object-position:center 40%} } /* ── 2026.10.01 · 헤더 로고 1.5배 (캘리그라피 로고는 가로가 짧아 같은 높이면 작아 보임) ── */ .hd .logo img{height:60px} .hd .logo{gap:0} @media (max-width:760px){ .hd .logo img{height:42px} } /* ── 2026.10.01 · 로고 아래 "한우사골 곰탕" 우측 정렬 ── */ .hd .logo{align-items:flex-end} .hd .logo small{text-align:right} /* ── 2026.10.01 · 점주 인터뷰 유튜브 (클릭 재생) ────────────────────── .ph.yt : 썸네일 + ▶ 버튼. 활성(.on) 카드에서 ▶ 를 누르면 JS 가 iframe 을 넣어 재생. 비활성 카드는 투명 덮개(::before)가 클릭을 받아 카드 확대로만 이어집니다. */ .vid .ph.yt{padding:0; border-style:solid; background:#111; overflow:hidden} .vid .ph.yt img, .vid .ph.yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block} .vid .ph.yt img{object-fit:cover; -webkit-user-drag:none} .vid .ph.yt::after{display:none} /* 기존 가짜 ▶ 는 끔 — 아래 .play 버튼이 대신 */ .vid .ph.yt .play{position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; z-index:3; border:0; border-radius:50%; background:var(--red); color:#fff; cursor:pointer; padding:0; box-shadow:0 8px 20px rgba(168,50,31,.35); animation:vidpulse 2s ease-in-out infinite} .vid .ph.yt .play::before{content:""; position:absolute; left:50%; top:50%; margin:-11px 0 0 -7px; border-left:20px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent} .vid .ph.yt .play:hover{background:#8E2A19} .vid .ph.yt .play:focus-visible{outline:3px solid #fff; outline-offset:2px} .vid:not(.on) .ph.yt .play{display:none} .vid .ph.yt.is-playing .play, .vid .ph.yt.is-playing img{display:none} .vid:not(.on) .ph.yt::before{content:""; position:absolute; inset:0; z-index:2; cursor:pointer} .vid:not(.on) .ph.yt{opacity:.72} .vid:not(.on):hover .ph.yt{opacity:.95} .vid:has(.ph.yt) .note{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.5} /* 캡션 2줄까지 */ .vid:focus:not(:focus-visible){outline:0} @media (max-width:760px){ .vid:not(.on) .ph.yt{height:100px !important} /* 접힌 띠 64 → 100px: 썸네일 글귀(세로 35~65% 구간 ≈ 60px) 위아래 20px 여유 */ .vid:not(.on) .ph.yt img{top:50px; height:calc((100vw - 32px) * .5625); transform:translateY(-50%)} /* 썸네일 정중앙(글귀 중심)을 띠 가운데에 */ } @media (prefers-reduced-motion:reduce){ .vid .ph.yt .play{animation:none} } /* ── 2026.10.02 · 04 메뉴 경쟁력 — 배경 밝게 ────────────────────── 어두운 스크림(50~70%)을 28~44% 로 낮춰 한상차림 사진이 환하게 보이게. 흰 글씨는 유지하되 카드 바탕을 살짝 더 진하게 해 가독성 보완. */ #menu{--scrim:linear-gradient(180deg,rgba(26,21,17,.28) 0%,rgba(26,21,17,.36) 48%,rgba(26,21,17,.44) 100%)} #menu .card{background:rgba(28,22,18,.34); backdrop-filter:blur(6px) saturate(1.05)} #menu .lead, #menu h2, #menu h3, #menu .copy, #menu .card p{text-shadow:0 1px 10px rgba(0,0,0,.35)} @media (max-width:760px){ #menu{--scrim:linear-gradient(180deg,rgba(26,21,17,.36) 0%,rgba(26,21,17,.44) 50%,rgba(26,21,17,.52) 100%)} } /* ═══════════════════════════════════════════════════════════════ 2026.10.03 · 추가분 (①②) — 2026.10.02 적용본 위에 덧붙임 ═══════════════════════════════════════════════════════════════ */ /* ── ① 08 업종변경 · "매출 300% 증가" 헤드라인을 AFTER 사진 위 오버레이로 ── index.php #baConv : .res 가 .stack .after .img 안으로 들어갔습니다. 사진 하단에 어두운 스크림을 깔고 흰 글씨 · 숫자/화살표는 밝은 레드. 카운트업·붓터치 화살표 모션은 그대로. */ .stack .after .img .res{position:absolute; left:0; right:0; bottom:0; z-index:3; margin:0; padding:52px 18px 16px; text-align:left; background:linear-gradient(180deg, rgba(26,23,20,0) 0%, rgba(26,23,20,.46) 38%, rgba(26,23,20,.80) 100%)} .stack .after .img .res .lbl{color:rgba(255,255,255,.82); font-size:12.5px; letter-spacing:.08em; text-shadow:0 1px 6px rgba(0,0,0,.4)} .stack .after .img .res strong{display:inline-flex; align-items:center; gap:8px; margin-top:4px; font-size:28px; line-height:1.25; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.45)} .stack .after .img .res strong em{color:#FF7A5C} /* 어두운 사진 위 가독용 밝은 레드 */ .stack .after .img .res .rise{width:46px; height:46px} .stack .after .img .res .rise .line, .stack .after .img .res .rise .tip{stroke:#FF7A5C; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))} .stack .after .img .res .rise .base{stroke:rgba(255,255,255,.35)} /* AFTER 카드가 올라온 뒤(0.35s 지연 + 0.8s) 화살표가 그어지도록 시작을 0.1s → 0.6s 로 */ .stack .after .img .res .rise .line{transition-delay:.6s} .stack .after .img .res .rise .tip{transition-delay:.6s} /* 사진 비율 — 오버레이 글줄이 들어갈 높이 확보 (4:3 → 5:4) */ .stack .after .img{aspect-ratio:5/4} /* 오버레이로 옮겼으니 캡션은 한 줄 톤으로 가볍게 */ .stack .after figcaption strong{font-size:17px} @media (max-width:760px){ .stack .after .img .res{padding:40px 14px 12px} .stack .after .img .res .lbl{font-size:11.5px} .stack .after .img .res strong{font-size:22px; gap:6px} .stack .after .img .res .rise{width:32px; height:32px} .stack .after .img{aspect-ratio:4/3} } @media (max-width:400px){ .stack .after .img .res strong{font-size:19px} } /* ── ② 11 창업 비용 표 — 모바일 가로 스크롤 + "좌우로 밀어보세요" 유도 ── index.php : .pl.tbl-wrap > .tbl-scroll > table. js/theme.js 가 넘침 여부를 보고 .has-more / .swipe-hint 를 붙입니다. */ .tbl-wrap{position:relative} .tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; outline:0} .tbl-scroll:focus-visible{box-shadow:inset 0 0 0 2px var(--red)} .tbl-scroll::-webkit-scrollbar{height:6px} .tbl-scroll::-webkit-scrollbar-thumb{background:rgba(26,23,20,.18); border-radius:3px} /* 오른쪽에 더 있다는 그림자 — 끝까지 밀면 사라짐 */ .tbl-wrap::after{content:""; position:absolute; top:0; right:0; bottom:0; width:48px; pointer-events:none; opacity:0; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92)); transition:opacity .3s} .tbl-wrap.has-more::after{opacity:1} /* 유도 배지 "← 좌우 스크롤이 가능합니다 →" — index.php 에 정적으로 들어 있고(JS 없이도 동작), 표가 넘칠 때(.has-more) 떠올랐다가 5초 뒤 저절로 사라집니다. 사용자가 밀면(.swiped) 즉시 사라짐. */ .swipe-hint{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4; pointer-events:none; display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:999px; background:rgba(26,23,20,.88); color:#fff; font-size:13px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; box-shadow:0 8px 24px rgba(26,23,20,.28); opacity:0; visibility:hidden} .tbl-wrap.has-more .swipe-hint{animation:thHintCycle 5.6s ease forwards} .tbl-wrap.swiped .swipe-hint{animation:none; opacity:0; visibility:hidden} .swipe-hint .ch{font-size:15px; font-weight:800; animation:thHintArrow 1.4s ease-in-out infinite} .swipe-hint .ch:first-child{animation-direction:alternate} .swipe-hint .ch:last-child{animation-direction:alternate-reverse} @keyframes thHintCycle{0%{opacity:0; visibility:visible; transform:translate(-50%,-50%) scale(.94)} 8%,82%{opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; visibility:hidden; transform:translate(-50%,-50%) scale(1)}} @keyframes thHintArrow{0%{transform:translateX(-3px)} 100%{transform:translateX(3px)}} @media (min-width:761px){ .tbl-wrap::after, .swipe-hint{display:none} } /* 데스크톱에선 표가 다 들어가므로 끔 */ @media (max-width:760px){ .tbl-scroll table{min-width:520px} /* 4열이 줄바꿈 없이 보이는 최소 폭 → 좁은 화면에선 가로 스크롤 */ .tbl-scroll th, .tbl-scroll td{white-space:nowrap; padding:12px 14px} .tbl-scroll th:first-child, .tbl-scroll td:first-child{position:sticky; left:0; z-index:1; background:#fff; box-shadow:2px 0 6px rgba(26,23,20,.08), 1px 0 0 var(--line2)} /* 구분 열은 고정 — 밀어도 항목명이 보이게 */ .tbl-scroll thead th:first-child{background:var(--fill)} .tbl-scroll tr.sum td:first-child{background:var(--redbg)} } @media (prefers-reduced-motion:reduce){ .swipe-hint .ch{animation:none} .tbl-wrap.has-more .swipe-hint{animation:none; opacity:1; visibility:visible} } /* ── 2026.10.03 · 로고 띠 — 히어로와 02 사이 빨간 띠 + 로고 무한 흐름(우 → 좌) ────── 트랙 2개를 이어 붙여 -50% 까지 밀면 처음과 끝이 맞물려 끊김 없이 돕니다. */ .logoband{position:relative; z-index:2; overflow:hidden; background:var(--red); color:#fff; height:64px; display:flex; align-items:center; white-space:nowrap; box-shadow:0 10px 30px rgba(168,50,31,.25)} .logoband .trk{display:flex; align-items:center; flex:none; animation:logoband 28s linear infinite} .logoband .it{display:inline-flex; align-items:center; gap:34px; padding-right:34px} .logoband img{height:30px; width:auto; display:block; opacity:.96} .logoband .dot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55)} .logoband:hover .trk{animation-play-state:paused} @keyframes logoband{from{transform:translateX(0)} to{transform:translateX(-100%)}} @media (max-width:760px){ .logoband{height:50px} .logoband img{height:24px} .logoband .it{gap:24px; padding-right:24px} .logoband .trk{animation-duration:20s} } @media (prefers-reduced-motion:reduce){ .logoband .trk{animation:none} } /* 2차 · 08 ↔ 09 사이 띠(.lb-mid)도 같은 규칙 — 섹션 사이라 아래 그림자는 빼서 09 배경과 자연스럽게 */ .logoband.lb-mid{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)} /* ── ⑥ 05 창업 경쟁력 · 하프앤하프 (낮 밥집 / 저녁 술집) — 2026.10.03 ───────────── index.php #halfHalf 와 세트. PC 는 좌우 반반, 모바일은 위아래 두 칸. 사진은 img/half-day.jpg (1000×1100 · 밝은 곰탕) · img/half-night.jpg (1000×1100 · 어두운 전골) 두 장을 object-fit:cover 로 칸 크기에 맞춰 자릅니다 — 칸 높이를 바꿔도 사진이 늘어나지 않습니다. */ .halfhalf{display:grid; grid-template-columns:1fr 1fr; gap:0; margin:4px 0 30px; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.35); position:relative; z-index:1; isolation:isolate} .halfhalf .hh{position:relative; margin:0; height:clamp(360px, 38vw, 500px); overflow:hidden; background:#1a1714} .halfhalf .hh img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.08); transition:transform 1.6s var(--ease)} /* 2026.10.03 · 2차 — 사진을 가로형(1000×676) · 위쪽 1/4 은 빈 테이블/증기 여백으로 다시 제작. 위를 기준으로 맞춰 글자가 음식 위에 올라타지 않게 */ .halfhalf .hh.day img{object-position:50% 0} .halfhalf .hh.night img{object-position:50% 0} .halfhalf.in .hh img{transform:scale(1)} /* 글자가 앉을 자리만 살짝 정리 (낮: 위쪽을 밝게 · 밤: 위쪽을 어둡게) */ .halfhalf .hh.day::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(255,250,242,.72) 0%, rgba(255,250,242,.28) 42%, rgba(255,250,242,0) 70%)} .halfhalf .hh.night::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(10,8,6,.55) 0%, rgba(10,8,6,.18) 45%, rgba(10,8,6,0) 70%)} /* 좌우에서 열리는 등장 */ .halfhalf .hh{opacity:0; transition:opacity .9s var(--ease), transform 1s var(--ease)} .halfhalf .hh.day{transform:translateX(-10%)} .halfhalf .hh.night{transform:translateX(10%)} .halfhalf.in .hh, .halfhalf.in .hh.day, .halfhalf.in .hh.night{opacity:1; transform:none} /* 붓글씨 워딩 — 한 줄 "낮에는 밥집" / "저녁에는 술집" · 낮: 적갈색 · 밤: 흰색 (2026.10.03 4차 · 한 줄 + 해·달은 칸 좌우 끝) */ .halfhalf .hh-txt{position:absolute; z-index:2; left:0; right:0; top:4%; display:flex; flex-direction:row; justify-content:center; align-items:baseline; gap:.22em; font-family:var(--brush); font-weight:400; line-height:1.05; letter-spacing:.01em; text-align:center; pointer-events:none; padding:0 14%} .halfhalf .hh-txt .l1, .halfhalf .hh-txt .l2{display:block; opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease)} .halfhalf .hh-txt .l1{font-size:clamp(40px, 4.6vw, 66px)} .halfhalf .hh-txt .l2{font-size:clamp(56px, 6.6vw, 92px)} .halfhalf.in .hh-txt .l1{opacity:1; transform:none; transition-delay:.45s} .halfhalf.in .hh-txt .l2{opacity:1; transform:none; transition-delay:.65s} .halfhalf .day .hh-txt{color:#A8321F; text-shadow:0 1px 0 rgba(255,255,255,.6), 0 6px 22px rgba(255,255,255,.55)} .halfhalf .night .hh-txt{color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.6)} /* 해(왼쪽 끝 · 붉게 빛남) · 달(오른쪽 끝) */ .halfhalf .hh-sun, .halfhalf .hh-moon{position:absolute; top:50%; width:clamp(56px, 6.4vw, 96px); height:auto; opacity:0; transition:opacity .9s var(--ease) .3s, transform .9s var(--ease) .3s} .halfhalf .hh-sun{left:4%; transform:translateY(-50%) rotate(-30deg) scale(.6); overflow:visible} .halfhalf .hh-moon{right:3%; width:clamp(88px, 10vw, 150px); transform:translateY(-50%) rotate(25deg) scale(.6); filter:drop-shadow(0 0 10px rgba(247,214,74,.45))} /* 별 포함 viewBox 라 폭 1.6배 */ .halfhalf.in .hh-sun{opacity:1; transform:translateY(-50%); animation:hhSunGlow 2.6s ease-in-out 1.2s infinite} .halfhalf.in .hh-moon{opacity:1; transform:translateY(-50%); animation:hhFloat 4.5s ease-in-out .9s infinite} .halfhalf.in .hh-sun .rays{transform-origin:50px 50px; animation:hhSpin 28s linear infinite} .halfhalf.in .hh-sun .glow{transform-origin:50px 50px; animation:hhSunPulse 2.6s ease-in-out 1.2s infinite} /* 달 옆 별 반짝임 — 각 별이 서로 다른 박자로 커졌다 작아지며 깜빡임 */ .halfhalf .hh-moon{overflow:visible} .halfhalf .hh-moon .st{opacity:0; transform-box:fill-box; transform-origin:center} .halfhalf.in .hh-moon .st{animation:hhTwinkle 2.4s ease-in-out infinite} .halfhalf.in .hh-moon .s1{animation-delay:1.2s} .halfhalf.in .hh-moon .s2{animation-delay:1.9s; animation-duration:2.1s} .halfhalf.in .hh-moon .s3{animation-delay:1.5s; animation-duration:2.8s} .halfhalf.in .hh-moon .s4{animation-delay:2.3s; animation-duration:1.9s} .halfhalf.in .hh-moon .s5{animation-delay:2.0s; animation-duration:3.2s} .halfhalf.in .hh-moon .s6{animation-delay:1.7s; animation-duration:2.6s} @keyframes hhTwinkle{0%,100%{opacity:.15; transform:scale(.55) rotate(0deg)} 50%{opacity:1; transform:scale(1.1) rotate(25deg)}} .halfhalf .hh-moon .stars{filter:drop-shadow(0 0 3px rgba(255,243,176,.9))} @keyframes hhSpin{to{transform:rotate(360deg)}} @keyframes hhFloat{0%,100%{transform:translateY(-50%)} 50%{transform:translateY(calc(-50% - 8px))}} @keyframes hhSunGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,90,40,.55))} 50%{filter:drop-shadow(0 0 18px rgba(255,80,30,.95)) drop-shadow(0 0 34px rgba(255,120,60,.55))}} @keyframes hhSunPulse{0%,100%{transform:scale(1); opacity:.25} 50%{transform:scale(1.35); opacity:.5}} /* "매출이 2배로 상승" — 숫자만 붓터치 레드 · 카운트업 */ #strength .lead .hh-x{font-style:normal; color:#FF8A6B; font-variant-numeric:tabular-nums; white-space:nowrap} #strength .lead .hh-x span{display:inline-block; min-width:.6em; text-align:center} #strength .hh-disc{color:#CFC6B9; margin:-6px 0 18px} /* 2026.10.03 · 3차 — 하프앤하프 아래 워딩 3줄 중앙 정렬 + "배달 상시 운영으로 매출 확보" 형광펜 모션 */ #strength .hh-lead, #strength .hh-copy, #strength .hh-disc{text-align:center} #strength .hh-copy{margin-top:6px; font-size:19px; font-weight:700; letter-spacing:-.02em; text-shadow:none} #strength .hh-copy .hl{position:relative; display:inline-block; isolation:isolate; color:#fff; background:none; padding:.26em .7em; line-height:1.25; border-radius:6px; transition:color .35s ease 1.25s} /* 형광펜 띠는 가상요소 — 글자 상자(패딩 포함)를 전부 덮고, 왼쪽→오른쪽으로 펼쳐집니다 */ #strength .hh-copy .hl::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:6px; background:linear-gradient(104deg, rgba(247,214,74,.98) 0%, rgba(247,214,74,.9) 55%, rgba(247,214,74,.98) 100%); clip-path:polygon(0 0, 0 0, 0 100%, 0 100%); transition:clip-path 1.1s cubic-bezier(.3,.7,.2,1) .9s} #strength .hh-copy.in .hl::before{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%)} #strength .hh-copy.in .hl{color:#1A1714; text-shadow:none} @media (max-width:760px){ #strength .hh-copy{font-size:16.5px} } @media (prefers-reduced-motion:reduce){ #strength .hh-copy .hl{color:#1A1714; transition:none} #strength .hh-copy .hl::before{clip-path:none; transition:none} } @media (max-width:760px){ .halfhalf{grid-template-columns:1fr; border-radius:12px; margin:0 0 22px} .halfhalf .hh{height:250px} /* 모바일: 위아래 두 칸 · 각 250px (위 여백 + 음식) */ .halfhalf .hh.day{transform:translateY(-8%)} .halfhalf .hh.night{transform:translateY(8%)} .halfhalf .hh.day img{object-position:50% 0} .halfhalf .hh.night img{object-position:50% 0} .halfhalf .hh-txt{top:8%; padding:0 6%; align-items:center} .halfhalf .hh-txt .l1{font-size:40px} .halfhalf .hh-txt .l2{font-size:56px} /* 모바일: 해·달을 글자 줄 안, "집" 오른쪽에 나란히 */ .halfhalf .hh-sun, .halfhalf .hh-moon{position:static; order:3; width:42px; margin-left:.14em; transform:none} .halfhalf .hh-moon{width:66px; margin-left:0} .halfhalf .hh-sun{transform:rotate(-30deg) scale(.6)} .halfhalf .hh-moon{transform:rotate(25deg) scale(.6)} .halfhalf.in .hh-sun{transform:none; animation:hhSunGlow 2.6s ease-in-out 1.2s infinite} .halfhalf.in .hh-moon{transform:none; animation:hhFloatM 4.5s ease-in-out .9s infinite} } @keyframes hhFloatM{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}} @media (max-width:380px){ .halfhalf .hh-txt .l1{font-size:36px} .halfhalf .hh-txt .l2{font-size:50px} .halfhalf .hh-sun, .halfhalf .hh-moon{width:36px} } @media (prefers-reduced-motion:reduce){ .halfhalf .hh, .halfhalf .hh img, .halfhalf .hh-txt .l1, .halfhalf .hh-txt .l2, .halfhalf .hh-sun, .halfhalf .hh-moon{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important} .halfhalf .hh-moon .st{opacity:.9 !important; animation:none !important} } /* ── ⑧ 05 점심 / 저녁 / 상시 카드 — 모바일에서도 3단 1줄 (2026.10.03) ────────── 기존엔 760px 이하에서 세로 3줄로 쌓였음. 좁은 폭에 맞춰 안쪽 여백·글자·아이콘을 줄이고, 아이콘은 우상단에 작게. */ @media (max-width:760px){ .daypart{grid-template-columns:repeat(3,1fr) !important; gap:8px; margin-top:22px} .daypart .dp{padding:14px 12px 14px; border-radius:10px; min-width:0} .daypart .dp .t{font-size:10px; letter-spacing:.06em; margin-bottom:4px} .daypart .dp h3{font-size:17px; margin-bottom:3px} .daypart .dp p{font-size:12px} .daypart .dp .tl{height:5px; margin-top:12px} .daypart .dp .dpbg{right:8px !important; bottom:auto !important; top:8px !important; width:38px !important; height:38px !important; opacity:.42} .daypart .dp.d .tl i{margin-left:46%; width:40%} } @media (max-width:380px){ .daypart{gap:6px} .daypart .dp{padding:12px 10px} .daypart .dp h3{font-size:15.5px} .daypart .dp p{font-size:11.5px} .daypart .dp .dpbg{width:32px !important; height:32px !important} } /* 하프앤하프가 카드 아래로 내려오면서 — 카드와 띄우고, 아래 워딩은 lead.sm 크기 */ .halfhalf.below{margin-top:34px} #strength .hh-lead{margin-top:26px} @media (max-width:760px){ .halfhalf.below{margin-top:24px} #strength .hh-lead{margin-top:20px} } /* ── 2026.10.03 · 09 BOOSTER 막대 — 호랭이 곳간 워드마크 패턴이 사선으로 흐름 ───────── js/theme.js drawBooster() 의