/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}
ol, ul { list-style: none;}
a { text-decoration: none; color: inherit; }

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img{max-width:100%}

html{font-size:62.5%}

@media screen and (min-width: 0\0) {
  /* IE 9, IE 10, IE 11 */
  :root,
  html {
    font-size: 10px;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* IE 10, IE 11 */
  :root,
  html {
    font-size: 10px;
  }
}

body{font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;font-size:1.6rem;line-height:1.2;color:#333;font-weight:400;letter-spacing:-2.5%;overflow-x:hidden}

input,textarea{font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;font-size:1.6rem;line-height:1.5;color:#333;font-weight:400;letter-spacing:-2.5%}

html,body{width:100%;height:100%}

.header{position:fixed;top:0;left:0;width:100%;z-index:100;background:#fff;transition:transform .4s ease;animation:headerDrop .7s cubic-bezier(.22,.61,.36,1)}
.header.hide{transform:translateY(-100%)}
@keyframes headerDrop{
  from{transform:translateY(-100%)}
  to{transform:translateY(0)}
}
.header .logo{margin:0 auto;padding:24px 0;text-align:center}
.header .gnb{display:flex;justify-content:center;background:#e60012}
.header .gnb ul{display:flex}
.header .gnb ul li a{position:relative;display:block;padding:16px 24px;color:#fff;transition:color .3s}
.header .gnb ul li a::after{content:'';position:absolute;left:24px;right:24px;bottom:12px;height:2px;background:#ddd;border-radius:999px;transform:scaleX(0);transition:transform .3s}
.header .gnb ul li a:hover,
.header .gnb ul li.current a{color:#fff}
.header .gnb ul li a:hover::after,
.header .gnb ul li.current a::after{transform:scaleX(1)}

section{width:100%}
section .container{width:1194px;margin:64px auto}

/* JS가 reveal을 준비하기 전, 비-히어로 섹션·푸터를 숨겨 첫 화면 깜빡임 방지 */
.js-reveal main > section:not(.hero),
.js-reveal footer{visibility:hidden}

/* 스크롤 진입 시 순차 등장 (translate 사용 → 호버 transform과 충돌 없음) */
.reveal{opacity:0;translate:0 40px;transition:opacity .8s cubic-bezier(.22,.61,.36,1),translate .8s cubic-bezier(.22,.61,.36,1)}
.reveal.on{opacity:1;translate:0 0}

/* 이미지(full): 왼쪽부터 오른쪽으로 드러나는 와이프 */
.reveal.img.full{opacity:1;translate:0 0;overflow:hidden;border-radius:16px;clip-path:inset(0 100% 0 0);transition:clip-path .9s ease}
.reveal.img.full.on{clip-path:inset(0 0 0 0)}
.reveal.fullimg{opacity:1;translate:0 0;overflow:hidden;clip-path:inset(0 100% 0 0);transition:clip-path .9s ease}
.reveal.fullimg.on{clip-path:inset(0 0 0 0)}

/* 섹션 h1 랜덤 글자 등장(트리거 시 재생) */
h1.rand .char{display:inline-block;opacity:0}
h1.rand.on .char{animation:heroFadeUp .6s ease both}

.hero{position:relative;padding:120px 0}
.hero .container{margin:0 auto}
.hero .bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden;opacity:0;animation:heroBgShow .6s ease .7s forwards}
.hero .bg img{width:100%;height:100%;object-fit:cover;animation:heroReveal 1.1s ease .7s both}
.hero .bg::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to right,rgba(0,0,0,.8) 0%,rgba(0,0,0,.3) 60%,rgba(0,0,0,0) 100%)}
@keyframes heroBgShow{from{opacity:0}to{opacity:1}}
@keyframes heroReveal{
  0%{filter:blur(24px);transform:scale(1.08)}
  40%{filter:blur(24px);transform:scale(1.08)}
  100%{filter:blur(0);transform:scale(1)}
}
.hero .title_cap,
.hero .contents,
.hero .btn_group{opacity:0;animation:heroFadeUp .8s ease both}
.hero .title_cap{animation-delay:1.5s}
.hero h1 .char{display:inline-block;opacity:0;animation:heroFadeUp .6s ease both}
.hero .contents{animation-delay:2.1s}
.hero .btn_group{animation-delay:2.3s}
@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
.hero header{color:#fff}
.hero .btn_group .btn{transition:transform .3s ease,box-shadow .3s ease}
.hero .btn_group .btn:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,.2),0 0 20px rgba(255,255,255,.4)}
.hero .btn_group .primary.btn:hover{box-shadow:0 10px 20px rgba(0,0,0,.2),0 0 20px rgba(230,0,18,.45)}
.hero .title_cap{display:inline-block;padding:10px 24px;background:#fbd576;border-radius:999px;font-size:1.3rem;color:#1a1a1a}
.hero.sub .title_cap{padding:10px 0;background:none;border-radius:0;color:#fff}
.hero h1{padding:24px 0;font-size:7.2rem;font-weight:600;line-height:1.1}
.hero.sub h1{font-size:5.6rem;font-weight:500}
.hero .contents{font-size:2rem;line-height:1.5;color:#ddd}

section .div{display:flex;justify-content:space-between}
section div.text{width:596px}
section header{position:relative}
section header .title_cap{font-size:1.3rem;color:#e60012}
section header h1{padding:24px 0;font-size:4.8rem;font-weight:700}
section .text .contents{padding-right:64px}
section .contents+p{margin-top:24px;line-height:1.6}
section .contents strong{font-size:2rem}
section .img{width:596px;height:450px}
section .img.full{width:100%;height:400px;margin-top:40px}
section .img.full.hl{height:auto}
section .img img{border-radius:16px}
section img{width:100%;height:100%;object-fit:cover}
section .visit{position:relative;overflow:hidden;padding:60px 64px;border-radius:16px;box-sizing:border-box}
section .visit::before{content:'';position:absolute;inset:0;z-index:0;background:url(../images/index_02.png) no-repeat 0 60%;background-size:100%;opacity:0;filter:blur(24px);transform:scale(1.08);transition:opacity 1.2s ease,filter 1.2s ease,transform 1.2s ease}
section .visit::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to right,rgba(0,0,0,.8) 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,0) 100%)}
section .visit > *{position:relative;z-index:2}
section .visit.in-view::before{opacity:1;filter:blur(0);transform:scale(1)}
section .visit .title_cap{color:#f2902c}
section .visit h1{color:#fff}
section .visit .contents{font-size:2.4rem;line-height:1.6;color:#ddd}
section .visit .biz_hour{margin:24px 0;color:#aaa}
section .visit .btn{transition:transform .3s ease,box-shadow .3s ease}
section .visit .btn:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,.2),0 0 20px rgba(242,144,44,.45)}

.fullimg{height:420px}

.menu_gorup{display:flex;gap:30px;flex-wrap:wrap}
.menu_gorup .item{position:relative;flex:0 0 378px;padding-bottom:24px;background:#f7f7f7;border-radius:16px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,opacity .8s cubic-bezier(.22,.61,.36,1),translate .8s cubic-bezier(.22,.61,.36,1)}
.menu_gorup .item::after{content:'';position:absolute;inset:0;border:1px solid #ddd;border-radius:16px;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:1}
.menu_gorup .item:hover{transform:translateY(-2px);box-shadow:0 8px 8px rgba(0,0,0,.1)}
.menu_gorup .item:hover::after{opacity:1}
.menu_gorup .item div{padding:0 24px}
.menu_gorup .item .img{width:378px;height:313px;overflow:hidden;padding:0}
.menu_gorup .item .img img{border-radius:0;transition:transform .4s ease}
.menu_gorup .item .name_en{margin-top:16px;font-weight:500;color:#4b4b4b}
.menu_gorup .item .name_ko{margin-top:8px;font-size:2.4rem;color:#1a1a1a;font-weight:500}
.menu_gorup .item .contents{margin:16px 0;font-size:1.3rem;line-height:1.4;color:#666;min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.menu_gorup .item .price{color:#1a1a1a}
/* 텍스트 래퍼: 데스크톱/태블릿/스크롤에서는 투명(기존 레이아웃 유지), 모바일 리스트에서만 활성 */
.menu_gorup .item .info{display:contents}

/* NEW 뱃지: .item.new 우측 상단 */
.menu_gorup .item.new::before,
.item_group .item.new::before{content:'NEW';position:absolute;top:16px;right:16px;z-index:2;padding:4px 8px;background:#f58d3c;color:#fff;font-size:1rem;line-height:1;border-radius:999px;font-weight:300}

.item_group{display:flex;gap:16px;margin-top:32px}
.item_group .item{position:relative;width:386px;padding:32px;box-sizing:border-box;background:#f7f7f7;border:1px solid transparent;border-radius:8px;transition:background .4s ease,border-color .4s ease,box-shadow .4s ease,opacity .8s cubic-bezier(.22,.61,.36,1),translate .8s cubic-bezier(.22,.61,.36,1)}
.item_group .item:hover{background:#f8efd9;border-color:#bf8c69;box-shadow:0 8px 24px rgba(242,144,44,.2)}
.item_group .item:hover .icon{background:#f2902c}
.item_group .item .num{font-family:"Roboto Mono", monospace;font-size:1.1rem;color:#4b4b4b}
.item_group .item div+div{margin-top:20px}
.item_group .item .num span+span{padding-left:4px;color:#888}
.item_group .item .icon{display:flex;justify-content:center;align-items:center;width:56px;height:56px;background:#A9A9A9;border-radius:8px;color:#fff;transition:background .4s ease}
.item_group .item .title{font-size:2.8rem;color:#1a1a1a;font-weight:500}
.item_group .item .contents{font-size:1.5rem;color:#666;font-weight:300}

.tab{margin-bottom:40px}
.tab ul{display:flex;gap:16px}
.tab ul li a{display:block;padding:16px 24px;border:1px solid #ddd;border-radius:999px;transition:border-color .3s ease,background .3s ease,color .3s ease}
.tab ul li.current a,.tab ul li a:hover{border-color:#e60012;background:#e60012;color:#fff}
.tab_select_wrap{display:none}

.talent{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:12px}
.talent .item{padding:32px;background:#f3f1f0;border:1px solid #d8c8db;box-sizing:border-box;border-radius:8px;color:#4b4b4b;transition:transform .3s ease,box-shadow .3s ease,opacity .8s cubic-bezier(.22,.61,.36,1),translate .8s cubic-bezier(.22,.61,.36,1)}
.talent .item:hover{transform:translateY(-2px);box-shadow:0 8px 8px rgba(0,0,0,.1)}
.talent .item .icon{display:flex;justify-content:center;align-items:center;width:56px;height:56px;margin-bottom:30px;box-sizing:border-box;background:#fff;border:1px solid #ddd;border-radius:8px}
.talent .item .title_cap{font-family:"Roboto Mono", monospace;font-size:1.1rem}
.talent .item .title{margin:20px 0 24px;font-size:2rem}

.benefits{display:flex}
.benefits .item{padding:24px;width:288px}

.data{margin-top:48px}
.data table{width:100%;box-sizing:border-box}
.data table{border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.data table th{background:#f7f7f7;font-size:1.4rem;border-right:1px solid #ddd;border-bottom:1px solid #ddd}
.data table td{font-size:1.4rem;color:#666;font-weight:300;border-right:1px solid #ddd;border-bottom:1px solid #ddd}
.data table td:first-child{text-align:center}
.data table td:last-child,.data table th:last-child{border-right:none}
.data table th,.data table td{padding:12px}
.data table tbody tr{transition:background .2s ease}
.data table tbody tr:hover td{background:#f2f2f2}

.detail{margin-top:48px}
.detail .subject{padding:24px 0;border-top:1px solid #666;border-bottom:1px solid #ddd}
.detail .subject .title{margin-bottom:16px;color:#1a1a1a}
.detail .subject .date{font-size:1.3rem;color:#666}
.detail .subject .date span{margin-left:16px}
.detail .contents{padding:16px;border-bottom:1px solid #ddd;color:#666;font-weight:300}
.detail .contents p{margin:24px 0}
.detail .prev,.detail .next{display:flex;justify-content:space-between;padding:16px;border-bottom:1px solid #ddd;cursor:pointer;transition:background .2s ease;font-size:1.3rem}
.detail .prev:hover,.detail .next:hover{background:#f2f2f2}
.detail .prev .title,.detail .next .title{color:#333;font-weight:300}
.detail .prev .title span,.detail .next .title span{margin-right:16px;color:#1a1a1a;font-weight:400}
.detail .prev .date,.detail .next .date{color:#666;font-weight:300}

.list_btn{margin-top:48px;display:flex;justify-content:end}

.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:40px}
.pagination button{display:flex;justify-content:center;align-items:center;width:36px;height:36px;border:none;background:none;border-radius:999px;font-size:1.4rem;color:#666;cursor:pointer;transition:background .2s ease,color .2s ease}
.pagination .page:hover{background:#f2f2f2}
.pagination .page.current{background:#1a1a1a;color:#fff}
.pagination .nav{color:#bbb}
.pagination .nav:hover{color:#1a1a1a}
.pagination .material-symbols-outlined{font-size:2rem}

.input{margin-top:48px}
.input .title{margin-bottom:16px;font-size:2.8rem;color:#1a1a1a}
.input table{width:100%;box-sizing:border-box;border-top:1px solid #666;border-bottom:1px solid #ddd}
.input table th{height:56px;padding:0 16px;background:#f7f7f7;font-size:1.4rem;color:#333;font-weight:500;text-align:left;vertical-align:middle;border-bottom:1px solid #ddd}
.input table td{padding:12px 16px;vertical-align:middle;border-bottom:1px solid #ddd}
.input input[type=text],.input input[type=email],.input input[type=file],.input select,.input textarea{box-sizing:border-box;height:40px;padding:0 12px;border:1px solid #ddd;font-size:1.4rem;color:#666;font-weight:300;background:#fff;font-family:inherit;transition:border-color .2s ease}
.input input:focus,.input select:focus,.input textarea:focus{outline:none;border-color:#e60012}
.input input[type=text],.input input[type=email]{width:100%}
.input select{cursor:pointer}
.input textarea{width:100%;height:160px;padding:12px;line-height:1.6;resize:vertical}
.input input[type=file]{width:100%;padding:6px 12px;color:#666;cursor:pointer}
.input .field{display:flex;align-items:center;gap:8px}
.input .field .sep{color:#888;font-size:1.4rem}
.input .field select,.input .field input{flex:1;min-width:0}
.input .field.contact select{flex:0 0 130px}
.input .field.email select{flex:0 0 160px}
.input .radio_group{display:flex;flex-wrap:wrap;gap:12px 28px}
.input .radio_group label{display:inline-flex;align-items:center;gap:8px;font-size:1.4rem;color:#333;font-weight:300;cursor:pointer}
.input .radio_group input[type=radio]{width:16px;height:16px;accent-color:#333;cursor:pointer}
.input .radio_select{display:none}
.input .cselect{display:contents}
.input .cselect_btn,.input .cselect_list{display:none}
.input .form_btn{margin-top:40px}
.input .form_btn .btn{padding:14px 24px;background:#333;color:#fff}
.input .form_btn .btn:hover{background:#c8000f}

.use_of_personal{margin-top:48px}
.use_of_personal .title{font-size:2.8rem;}
.use_of_personal .contents{padding:8px 16px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;color:#888}
.use_of_personal .contents p{line-height:2.5em}
.use_of_personal .contents ul{margin-left:18px}
.use_of_personal .contents li{list-style-type:disc;line-height:1.8em}
.use_of_personal .check{margin-top:16px}
.use_of_personal .check label{display:inline-flex;align-items:center;gap:8px;font-size:1.5rem;color:#666;cursor:pointer}
.use_of_personal .check input{position:absolute;width:0;height:0;opacity:0}
.use_of_personal .check .material-symbols-outlined{font-size:2.2rem;color:#ccc;transition:color .2s ease}
.use_of_personal .check input:checked + .material-symbols-outlined{color:#e60012}
.use_of_personal .check input:checked ~ .txt{color:#1a1a1a}


footer{background:#f7f7f7}
footer .container{width:1194px;margin:0 auto;padding:56px 0}
.foot_top{display:flex;justify-content:space-between}
.foot_top .logo_foot{margin-bottom:16px}
.foot_top .logo_foot .txt{margin-top:16px;font-size:1.5rem;color:#888}
.foot_top .menu_foot{display:flex;gap:96px}
.foot_top .menu_foot .item p{padding:8px 16px;font-size:1.5rem;color:#666}
.foot_top .menu_foot .item li{padding:8px 16px;font-size:1.3rem;color:#888}
.foot_top .menu_foot .item li a{position:relative;display:inline-block;transition:color .3s ease}
.foot_top .menu_foot .item li a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:#333;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.foot_top .menu_foot .item li a:hover{color:#333}
.foot_top .menu_foot .item li a:hover::after{transform:scaleX(1)}

.foot_bottom{display:flex;justify-content:space-between;margin-top:16px;padding-top:16px;color:#888;font-size:1.3rem;border-top:1px solid #ddd}


.btn_group{display:flex;gap:8px;margin-top:24px}
.btn{display:inline-flex;justify-content:center;align-items:center;padding:12px 24px 13px 24px;gap:8px;border:none;background:#fff;border-radius:999px;font-size:1.5rem;cursor:pointer}
.btn.txt{margin-top:24px;padding:12px 0 13px 0;font-weight:500;color:#333}
.btn.txt:hover .icon{animation:arrowBounce .6s ease-in-out infinite}
@keyframes arrowBounce{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(4px)}
}
.btn .icon{font-size:1.6rem}
.btn.icon{padding-left:28px}
.btn.h1{position:absolute;right:0;top:32px}

.btn.primary{background:#e60012;color:#fff}
.btn.secondary{background:#f2902c;color:#fff}


/* ============================================================
   반응형 (Responsive)
   - 태블릿: max-width 1200px
   - 모바일: max-width 768px
   ============================================================ */

/* ===== 태블릿 ===== */
@media (max-width:1200px){
  /* 고정폭 컨테이너 → 유동폭 + 좌우 여백 */
  section .container{width:auto;margin:56px 32px}
  .hero .container{margin:0 32px}
  footer .container{width:auto;margin:0;padding:48px 32px}

  /* 히어로: 폰트만 축소(상단 여백은 고정 헤더와 겹치지 않도록 유지) */
  .hero h1{font-size:5.6rem}
  .hero.sub h1{font-size:4.4rem}

  section header h1{font-size:3.6rem}

  /* 탭: 줄바꿈 없이 가로 스크롤 */
  .tab ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tab ul::-webkit-scrollbar{display:none}
  .tab ul li{flex:0 0 auto}
  .tab ul li a{white-space:nowrap}

  /* 스토리(2단) → 유동 2단 */
  section .div{gap:32px}
  section div.text{width:auto;flex:1 1 0;min-width:0}
  section .text .contents{padding-right:0}
  section .div .img{width:auto;height:auto;flex:1 1 0;aspect-ratio:596/450}

  /* 대표메뉴 카드 → 유동 컬럼 */
  .menu_gorup{gap:20px}
  .menu_gorup .item{flex:1 1 300px}
  .menu_gorup .item .img{width:auto;height:auto;aspect-ratio:378/313}

  /* 브랜드 스텝 카드 → 2단 */
  .item_group{flex-wrap:wrap}
  .item_group .item{width:calc(50% - 8px)}

  /* 복리후생 → 2행 2열 그리드 */
  .benefits{display:grid;grid-template-columns:repeat(2,1fr)}
  .benefits .item{width:auto}

  /* 방문 안내 */
  section .visit{padding:48px 40px}
  section .visit .contents{font-size:2rem}

  .fullimg{height:340px}
  section .img.full{height:320px}

  /* 푸터 간격 축소 */
  .foot_top{gap:40px}
  .foot_top .menu_foot{gap:48px}
}

/* ===== 모바일 ===== */
@media (max-width:768px){
  section .container{margin:40px 20px}
  .hero .container{margin:0 20px}
  footer .container{padding:40px 20px}

  /* 헤더: 로고 축소, 메뉴는 가로 스크롤 */
  .header .logo{padding:14px 0}
  .header .logo img{height:26px;width:auto}
  .header .gnb ul{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .header .gnb ul::-webkit-scrollbar{display:none}
  .header .gnb ul li a{padding:12px 14px;font-size:1.4rem;white-space:nowrap}
  .header .gnb ul li a::after{left:14px;right:14px;bottom:8px}

  /* 히어로: 상단 여백을 헤더 높이에 맞춰 조정 + 폰트 축소 */
  .hero{padding:64px 0 64px}
  .hero h1{font-size:3.6rem}
  .hero.sub h1{font-size:2.8rem}
  .hero .contents{font-size:1.6rem}
  .hero .btn_group{flex-wrap:wrap}

  section .container{margin-top:32px;margin-bottom:32px}
  section header h1{font-size:2.6rem}
  /* 인덱스 대표메뉴 / 브랜드 THREE PILLARS h1: 하단 패딩 제거 */
  section .container:has(> .menu_gorup.scroll) header h1,
  section .container:has(> .item_group) header h1{padding-bottom:8px}
  section .contents strong{font-size:1.8rem}
  /* 헤더 우측 상단 버튼 → 흐름 배치 */
  .btn.h1{position:static;margin-top:0}

  /* 스토리 → 세로 스택 */
  section .div{flex-direction:column;gap:24px}
  section div.text{flex:none}
  section .div .img{flex:none;height:300px;aspect-ratio:auto}
  /* 브랜드 이야기 더 보기 버튼: 상단 마진 제거 */
  section div.text .btn.txt{margin-top:8px}

  /* 메뉴 페이지: 컴팩트 리스트(썸네일 + 이름/설명/가격 전체) — 인덱스 스크롤 캐러셀은 제외 */
  .menu_gorup:not(.scroll){flex-direction:column;gap:8px}
  .menu_gorup:not(.scroll) .item{display:flex;flex:none;align-items:flex-start;gap:24px;padding:16px;border-radius:12px}
  .menu_gorup:not(.scroll) .item div{padding:0}
  .menu_gorup:not(.scroll) .item .img{flex:0 0 80px;width:80px;height:80px;aspect-ratio:auto;border-radius:8px}
  .menu_gorup:not(.scroll) .item .info{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
  .menu_gorup:not(.scroll) .item .name_en{display:none}
  .menu_gorup:not(.scroll) .item .name_ko{margin:0;font-size:1.6rem;line-height:1.3}
  .menu_gorup:not(.scroll) .item .contents{margin:0;min-height:0;display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;font-size:1.3rem;line-height:1.4}
  .menu_gorup:not(.scroll) .item .price{margin:0;font-size:1.5rem;font-weight:500}
  /* NEW 뱃지: 모바일에서는 글자 없이 원형 점으로 */
  .menu_gorup .item.new::before{content:'';top:8px;right:8px;width:10px;height:10px;padding:0;border-radius:50%}

  /* 시그니처(인덱스): 아이템 축소 + 좌우 스크롤 (모바일 전용) */
  .menu_gorup.scroll{flex-wrap:nowrap;gap:16px;margin-left:-20px;margin-right:-20px;overflow-x:auto;overflow-y:hidden;padding:12px 20px 0;scroll-snap-type:x proximity;scroll-padding-left:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .menu_gorup.scroll::-webkit-scrollbar{display:none}
  .menu_gorup.scroll .item{flex:0 0 260px;padding-bottom:20px;scroll-snap-align:start}
  .menu_gorup.scroll .item .img{width:auto;height:auto;aspect-ratio:378/313}
  .menu_gorup.scroll .item .name_ko{font-size:2.1rem}

  /* 스텝 카드: 축소 + 좌우 스크롤 (모바일) */
  .item_group{flex-wrap:nowrap;gap:12px;margin-left:-20px;margin-right:-20px;overflow-x:auto;overflow-y:hidden;padding:0 20px 12px;scroll-snap-type:x proximity;scroll-padding-left:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .item_group::-webkit-scrollbar{display:none}
  .item_group .item{flex:0 0 260px;width:260px;padding:24px;scroll-snap-align:start}
  .item_group .item .title{font-size:2.2rem}

  /* career(인재상·복리후생): 아이템 축소 + 좌우 스크롤(우측 화면 끝까지 확장) */
  .talent{display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;margin-left:-20px;margin-right:-20px;overflow-x:auto;overflow-y:hidden;padding:0 20px 12px;scroll-snap-type:x proximity;scroll-padding-left:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .talent::-webkit-scrollbar{display:none}
  .talent .item{flex:0 0 240px;width:240px;padding:24px;scroll-snap-align:start}

  /* 방문 안내 */
  section .visit{padding:32px 24px;border-radius:12px}
  /* 배경 이미지가 세로로 긴 박스를 꽉 채우도록 cover 처리 */
  section .visit::before{background-size:cover;background-position:center}
  section .visit .contents{font-size:1.8rem}

  .fullimg{height:220px}
  section .img.full{height:220px}

  /* 탭 */
  .tab{margin-bottom:24px}
  .tab ul{flex-wrap:wrap;gap:8px}
  .tab ul li a{padding:12px 18px;font-size:1.4rem}
  /* 메뉴 페이지 탭: 왼쪽 커스텀 드롭다운 + 오른쪽 선택값 pill(빨강) */
  .tab:has(.tab_select_wrap) > ul{display:none}
  .tab_select_wrap{display:flex;align-items:center;gap:8px}
  .tab_dd{position:relative;flex:1;min-width:0}
  .tab_dd_btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:50px;padding:0 20px;border:1px solid #ddd;border-radius:999px;background:#fff;font-size:1.5rem;color:#333;font-family:inherit;cursor:pointer;transition:border-color .3s ease}
  .tab_dd_btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tab_dd_btn::after{content:'';flex:0 0 16px;width:16px;height:16px;background:url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center;background-size:16px;transition:transform .3s ease}
  .tab_dd.open .tab_dd_btn{border-color:#e60012}
  .tab_dd.open .tab_dd_btn::after{transform:rotate(180deg)}
  .tab_dd_list{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:20;margin:0;padding:6px;background:#fff;border:1px solid #eee;border-radius:16px;box-shadow:0 12px 28px rgba(0,0,0,.14);max-height:60vh;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
  .tab_dd.open .tab_dd_list{opacity:1;visibility:visible;transform:translateY(0)}
  .tab_dd_opt{padding:13px 18px;border-radius:999px;font-size:1.4rem;color:#666;cursor:pointer;transition:background .2s ease,color .2s ease}
  .tab_dd_opt:hover{background:#f7f7f7;color:#333}
  .tab_dd_opt.active{background:#e60012;color:#fff}
  .tab_current{flex:0 0 auto;display:inline-flex;align-items:center;height:50px;padding:0 24px;border:1px solid #e60012;border-radius:999px;background:#e60012;color:#fff;font-size:1.4rem;white-space:nowrap}

  /* 공지사항 게시판: 모바일에서 제목 중심 리스트 */
  .data{overflow-x:visible}
  .data table{display:block;min-width:0;border:none;border-top:1px solid #ddd}
  .data thead{display:none}
  .data tbody{display:block}
  .data tbody tr{display:flex;flex-direction:column;gap:4px;padding:16px 4px;border-bottom:1px solid #eee}
  .data tbody tr td{display:block;padding:0;border:none;text-align:left}
  .data tbody td:first-child{display:none}
  .data tbody td:last-child{font-size:1.5rem;font-weight:500;color:#1a1a1a;line-height:1.45}
  /* 빈 상태(등록된 글 없음) colspan 셀은 유지 */
  .data tbody td[colspan]{display:block;text-align:center;font-size:1.4rem;font-weight:400;color:#999;line-height:1.5;padding:28px 0}

  /* 문의/제안 폼: 라벨을 입력 위로 쌓고 입력요소 정돈 */
  .input .title,.use_of_personal .title{font-size:2.2rem}
  .input table,.input tbody,.input tr,.input th,.input td{display:block;width:100%;box-sizing:border-box}
  .input table tr{padding:16px 0;border-bottom:1px solid #eee}
  .input table th{height:auto;padding:0 0 8px;background:none;border:none;font-size:1.4rem;font-weight:600;color:#1a1a1a}
  .input table td{padding:0;border:none}
  .input input[type=text],.input input[type=email],.input input[type=file],.input select,.input textarea{height:46px;border-radius:8px;font-size:1.5rem}
  .input textarea{height:140px}
  .input .field select,.input .field input{width:100%;flex:none;min-width:0}
  /* 라디오 그룹 → 커스텀 둥근 드롭다운으로 대체 */
  .input .radio_group{display:none}
  .input .radio_select{display:block;position:relative;width:100%}
  /* 나머지 폼 셀렉트도 커스텀 드롭다운으로 */
  .input .cselect{display:block;position:relative;width:100%}
  .input .cselect > select{display:none}
  .input .field.email .cselect{grid-column:1 / -1}
  /* 커스텀 드롭다운 공통 스타일(라디오/일반 셀렉트) */
  .input .radio_select_btn,
  .input .cselect_btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:46px;padding:0 16px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:1.5rem;color:#333;font-family:inherit;cursor:pointer;transition:border-color .3s ease}
  .input .radio_select_btn::after,
  .input .cselect_btn::after{content:'';flex:0 0 16px;width:16px;height:16px;background:url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center;background-size:16px;transition:transform .3s ease}
  .input .radio_select.open .radio_select_btn,
  .input .cselect.open .cselect_btn{border-color:#e60012}
  .input .radio_select.open .radio_select_btn::after,
  .input .cselect.open .cselect_btn::after{transform:rotate(180deg)}
  .input .radio_select_list,
  .input .cselect_list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;margin:0;padding:6px;background:#fff;border:1px solid #eee;border-radius:14px;box-shadow:0 12px 28px rgba(0,0,0,.14);max-height:50vh;overflow-y:auto;display:none}
  .input .radio_select.open .radio_select_list,
  .input .cselect.open .cselect_list{display:block}
  .input .radio_select_opt,
  .input .cselect_opt{padding:12px 14px;border-radius:8px;font-size:1.4rem;color:#555;cursor:pointer;transition:background .2s ease,color .2s ease}
  .input .radio_select_opt:hover,
  .input .cselect_opt:hover{background:#f7f7f7;color:#333}
  .input .radio_select_opt.active,
  .input .cselect_opt.active{background:#e60012;color:#fff}
  /* 생년월일: 3등분 */
  .input .field.birth{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  /* 연락처: 통신사 | 국번 | 번호 (구분선 숨김) */
  .input .field.contact{display:grid;grid-template-columns:0.9fr 1fr 1fr;align-items:center;gap:8px}
  .input .field.contact .sep{display:none}
  /* 이메일: 아이디 @ 도메인 + 도메인 선택(아래 전체폭) */
  .input .field.email{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
  .input .field.email select{grid-column:1 / -1}

  /* 상세: 이전/다음 세로 배치 */
  .detail .prev,.detail .next{flex-direction:column;gap:6px}

  /* 푸터 세로 스택 */
  .foot_top{flex-direction:column;gap:32px}
  .foot_top .menu_foot{flex-wrap:wrap;gap:24px 48px}
  .foot_bottom{flex-direction:column;gap:8px;text-align:center}
}