/* 추성고을 — 기본 스타일 (퍼플트리 작성). 화면 구조는 아임웹 편집 결과(행·열·위젯)를 옮겼고, 그 구조를 그리는 규칙은 여기서 정한다. */
@font-face{font-family:Pretendard;font-weight:400;font-display:swap;src:url(/assets/fonts/pretendard-400.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:500;font-display:swap;src:url(/assets/fonts/pretendard-500.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:600;font-display:swap;src:url(/assets/fonts/pretendard-600.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:700;font-display:swap;src:url(/assets/fonts/pretendard-700.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:800;font-display:swap;src:url(/assets/fonts/pretendard-800.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-latin-700-normal.woff2) format("woff2")}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:10px}   /* 아임웹 루트 = 10px. 편집 텍스트의 rem(4rem 등)이 이 값을 기준으로 한다 — 실측: 도자기 제목 글리프 아임웹 35px(모바일) 대 16px 기준 57px */
body{margin:0;font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;font-size:18px;line-height:1.6;color:#111;background:#fff;word-break:keep-all;overflow-x:hidden}
body.lang-jp{font-family:Pretendard,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif}
body.lang-cn{font-family:Pretendard,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}
body.noscroll{overflow:hidden}
img{max-width:100%;height:auto;vertical-align:middle;border:0}
a{color:inherit;text-decoration:none}
p{margin:0;word-break:keep-all}
ul{margin:0;padding:0;list-style:none}
strong,b{font-weight:700}
iframe{border:0}
hr{margin:0;border:0;border-top:1px solid #111}
[hidden]{display:none!important}

/* ── 헤더 ── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:1000;height:90px;color:#212121;transition:background .25s,box-shadow .25s,color .25s}
.hdr-in{position:relative;height:100%;display:flex;align-items:center;padding:0 40px}
.logo{display:flex;align-items:center;height:56px}
.logo img{height:56px;width:auto}
.logo .logo-light{display:none}
.hdr-light{color:#fff}
.hdr-light .logo .logo-dark{display:none}.hdr-light .logo .logo-light{display:block}
.hdr.scrolled{background:rgba(255,255,255,.65);color:#212121;box-shadow:none}   /* 아임웹 실측: 스크롤 후 헤더 흰색 65% 반투명 */
.hdr.scrolled .logo .logo-dark{display:block}.hdr.scrolled .logo .logo-light{display:none}
.gnb{position:absolute;left:50%;top:0;transform:translateX(-50%);height:100%}
.gnb>ul{display:flex;height:100%}
.gnb>ul>li{position:relative;height:100%}
.gnb>ul>li>a{display:flex;align-items:center;height:100%;padding:0 18px;font-family:Poppins,Pretendard,sans-serif;font-size:16px;font-weight:400;white-space:nowrap}
.gnb>ul>li.on>a{font-weight:700}
.gnb .sub{position:absolute;left:0;top:100%;min-width:180px;padding:10px 0;background:#fff;color:#111;box-shadow:0 6px 24px rgba(0,0,0,.12);display:none}
.gnb>ul>li:hover .sub,.gnb>ul>li:focus-within .sub{display:block}
.gnb .sub a{display:block;padding:8px 18px;font-size:15px;line-height:1.5}
.gnb .sub a:hover{background:#f4f1ec}
.lang{position:relative;margin-left:auto}
.lang-btn{display:flex;align-items:center;gap:6px;height:36px;padding:0 8px;border:0;background:none;color:inherit;font:inherit;font-size:13px;cursor:pointer}
.caret{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;border-bottom:0;margin-left:2px}
.lang-list{position:absolute;right:0;top:100%;min-width:150px;padding:6px 0;background:#fff;color:#111;box-shadow:0 6px 24px rgba(0,0,0,.12);display:none}
.lang-btn[aria-expanded="true"]+.lang-list{display:block}
.lang-list a{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:14px}
.lang-list a[aria-current]{font-weight:700}
.flag{display:inline-block;width:18px;height:12px;border-radius:2px;background:#ddd;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.flag-kr{background:linear-gradient(#fff,#fff)}.flag-kr::before{content:"";display:block;width:8px;height:8px;margin:2px auto 0;border-radius:50%;background:linear-gradient(180deg,#cd2e3a 50%,#0047a0 50%)}
.flag-en{background:linear-gradient(90deg,#b22234 0 14%,#fff 14% 28%,#b22234 28% 42%,#fff 42% 56%,#b22234 56% 70%,#fff 70% 84%,#b22234 84%);position:relative}.flag-en::before{content:"";position:absolute;left:0;top:0;width:8px;height:7px;background:#3c3b6e}
.flag-jp{background:#fff}.flag-jp::before{content:"";display:block;width:7px;height:7px;margin:2.5px auto 0;border-radius:50%;background:#bc002d}
.flag-cn{background:#de2910}.flag-cn::before{content:"★";display:block;color:#ffde00;font-size:8px;line-height:12px;padding-left:2px}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;padding:10px;cursor:pointer;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:currentColor}
.mnav{position:fixed;top:0;right:0;bottom:0;width:min(84vw,360px);background:#fff;z-index:1200;overflow-y:auto;padding:0 0 30px}
.mnav-head{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 8px 0 20px;border-bottom:1px solid #eee;font-weight:700}
.mnav-close{border:0;background:none;font-size:28px;width:44px;height:44px;cursor:pointer}
.mnav-list>li{border-bottom:1px solid #eee;padding:14px 20px}
.mnav-top{display:block;font-family:Poppins,Pretendard,sans-serif;font-weight:700;font-size:17px;margin-bottom:6px}
.mnav-list ul a{display:block;padding:6px 0;font-size:15px;color:#444}
.mnav-lang{display:flex;flex-wrap:wrap;gap:8px 16px;padding:18px 20px;font-size:14px;color:#666}
.mnav-lang a.on{color:#111;font-weight:700}
.mnav-dim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1100}
@media (max-width:991px){.gnb{display:none}.lang{display:none}.burger{display:flex}.hdr-in{padding:0 16px}}
@media (max-width:767px){.hdr{height:49px}.logo,.logo img{height:34px}}

/* ── 섹션 ── */
.sec{position:relative}
.sec-bg,.sec-bgc{position:absolute;inset:0;pointer-events:none}
.sec .main{position:relative;z-index:1}
.sec .inside{position:relative}
.sec.extend_section>.main{padding:0 8px}   /* 아임웹 실측: extend 섹션은 main 에 8px 여백 */
.sec.extend_section.lr_margin_none>.main{padding:0}
.sec-video{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sec-video iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-width:177.78vh;min-height:100vh;transform:translate(-50%,-50%)}
.sec .main.side{display:flex;align-items:flex-start;max-width:1560px;margin:0 auto}
.sec .main.side>.doz_aside{flex:0 0 600px;position:sticky;top:90px;padding-left:8px}
@media (max-width:1199px){.sec .main.side>.doz_aside{flex-basis:44%}}
.sec .main.side>.inside{flex:1;min-width:0;padding:0 8px}
@media (max-width:767px){.sec .main.side{display:block}.sec .main.side>.doz_aside{display:none}.sec .main.side>.inside{padding:0 15px}}   /* 모바일에서 사이드(aside)는 숨긴다 — 고객이 같은 내용의 mobile_section 을 따로 두었다 (/30 since 1990) */
.mobile_section{display:none}
@media (max-width:767px){.pc_section.mobile_hide{display:none}.mobile_section{display:block}}

/* ── 행·열 (아임웹 편집 결과의 12단 격자) ── */
.doz_row{position:relative;display:flow-root}
/* 아임웹 격자 여백 실측 — 기본: 열 좌우 8px · 행 -8px · 위젯 아래 8px. grid_gutter_0 / grid_v_gutter_0 섹션은 0 */
.sec:not(.grid_gutter_0) .doz_row{margin:0 -8px}
.sec:not(.grid_gutter_0) .col-dz{padding:0 8px}
.sec:not(.grid_v_gutter_0) .widget{margin:8px 0}
@media (max-width:767px){.sec:not(.grid_gutter_0) .doz_row{margin:0 -4px}.sec:not(.grid_gutter_0) .col-dz{padding:0 4px}.sec:not(.grid_v_gutter_0) .widget{margin:4px 0}.sec.extend_section>.main{padding:0!important}}   /* 모바일 실측(375px): 열 4px · 위젯 4px · extend main 0 */
.doz_row::after{content:"";display:table;clear:both}
.col-dz{position:relative;float:left;width:var(--w,100%);min-height:1px}
@media (max-width:767px){
  .col-dz{width:var(--xw,100%)}
  .col-xdz-clear+.col-dz{clear:left}   /* 아임웹은 모바일 열 합이 12가 되는 열에 clear 를 붙인다 = 「내 다음부터 새 줄」 */
  .mobile_section .col-dz{width:100%}
  .pc_section .text-table [style*="--fsm:"]{font-size:var(--fsm)!important}   /* PC 섹션이 모바일에 그대로 보일 때 아임웹의 글자 축소를 흉내낸다 (build.py 가 --fsm 을 계산) */
}
.side_gutter{display:none}

/* ── 위젯 ── */
.widget{position:relative}
@media (min-width:768px){.img_wrap[style*="--ih:"]{height:var(--ih);display:flex;align-items:center;justify-content:center}.img_wrap[style*="--ih:"]>img{margin:0}}   /* 아임웹 편집기의 고정 상자 높이 — 사진을 세로 가운데에 (실측 홈 소개 796px) */
.widget.padding>div{width:100%}
@media (max-width:767px){.sec.extend_section .widget.text_wrap.default_padding{padding:0 15px}}   /* 모바일 실측: extend 섹션(inside 여백 0)의 텍스트는 좌우 15px */
.widget.text_wrap{display:flex;flex-direction:column;justify-content:flex-start}
.text-table{width:100%}
.text-table p{min-height:1px}
.text-table img{display:inline-block}
.widget.image{text-align:center}
.widget.image .img_wrap{position:relative;display:block;max-width:100%;margin:0 auto;overflow:hidden}   /* 고정 높이 상자에서 사진이 넘치면 잘린다 (아임웹과 같음) */
.widget.image .hover_img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;pointer-events:none}
.widget.image .hover_img img{width:100%;height:100%;object-fit:cover}
.widget.image .img_wrap:hover .hover_img{opacity:1}
.widget.image .hover_txt,.widget.image .overlay,.widget.image .hover_overlay{display:none}
.widget.image .txt{padding-top:4px}
.widget.text_wrap:not(.default_padding) .text-table{padding:12px 0}   /* 아임웹 실측: 기본여백 아닌 텍스트 위젯은 위아래 12px. 줄간격은 본문 1.6 그대로(span 도) */
.widget.image a{display:inline-block;max-width:100%}
.widget.line .line_box{width:100%}
.widget.button{text-align:center}
.btn{display:inline-block;padding:12px 28px;background:#111;color:#fff;font-size:15px;border-radius:0}
.btn:hover{background:#333}

/* 갤러리 */
/* 갤러리 위젯 — 위젯별 실측값은 _측정/gallery_kr.json → CSS 변수. 기본값은 /21 제품 목록 (격자 -14px · 항목 14px · 정사각 cover · 글 16px 0 · 제목 18px/1.6 800 · 설명 14px #999) */
.pt-gallery{width:auto;margin-left:calc(-1 * var(--gpad,14px));margin-right:calc(-1 * var(--gpad,14px))}
.pt-grow{display:flex}
.pt-gitem{flex:1 1 0;min-width:0;display:block;color:inherit;padding:var(--gpad,14px)}
.pt-gitem.dummy{visibility:hidden}
.pt-gimg{overflow:hidden;background:#f4f4f4;border-radius:var(--gradius,0)}
.pt-gimg img{width:100%;aspect-ratio:1/1;display:block;object-fit:cover;transition:transform .5s}
a.pt-gitem:hover .pt-gimg img{transform:scale(1.04)}
.pt-gtext{padding:var(--tpad,16px 0);text-align:var(--talign,left);color:var(--tcolor,#212121);font-size:var(--tfs,18px);line-height:1.6}
.pt-gtext strong{display:block;font-weight:var(--tweight,800)}
.pt-gtext span{display:block;font-size:var(--bfs,14px);color:var(--bcolor,#999);line-height:1.6}
.pt-gtext:empty,.pt-gtext strong:empty{display:none}
@media (max-width:767px){
  .pt-gallery{margin-left:-7px;margin-right:-7px}
  .pt-grow{flex-wrap:wrap}
  .pt-gitem{flex:0 0 50%;padding:7px}
  .cols-5 .pt-gitem,.cols-6 .pt-gitem{flex:0 0 33.333%}
  .cols-1 .pt-gitem{flex:0 0 100%}
  .pt-gtext strong{font-size:15px}
}
/* 동영상 */
.pt-movie{position:relative;display:block;max-width:100%;overflow:hidden}
.pt-movie img{width:100%;display:block}
.play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.65);box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.play::after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff}
.pt-movie:hover .play{background:#000}
.vmodal{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:20px}
.vmodal-in{position:relative;width:min(1100px,100%)}
.vframe{position:relative;padding-top:56.25%;background:#000}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%}
.vmodal-close{position:absolute;right:0;top:-44px;border:0;background:none;color:#fff;font-size:32px;cursor:pointer}
/* 지도 */
.gmap{display:block;width:100%;height:450px;border:0}   /* 아임웹 코드 위젯의 height 속성이 있으면 그 값(오시는 길 855px) */
@media (max-width:767px){.gmap{height:300px}}

/* 리빌 */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── 폼(문의·예약) · 공지 ── */
.pt-form-wrap{max-width:1100px;margin:0 auto;padding:40px 16px 100px}
.pt-form-head{text-align:center;margin-bottom:40px}
.pt-form-head h2{font-size:32px;font-weight:700;margin:0 0 12px}
.pt-form-head p{color:#555;font-size:16px}
.pt-form .fld{display:grid;grid-template-columns:200px 1fr;gap:12px 24px;align-items:center;padding:14px 0;border-bottom:1px solid #eee}
.pt-form .fld.top{align-items:start}
.pt-form label{font-weight:700;font-size:16px}
.pt-form label .req{color:#c0392b;margin-left:4px}
.pt-form input,.pt-form textarea,.pt-form select{width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:0;font:inherit;font-size:16px;background:#fff}
.pt-form textarea{min-height:200px;resize:vertical}
.pt-form .phone{display:flex;gap:8px}
.pt-form .row2{display:flex;gap:12px}
.pt-form .row2>*{flex:1}
.pt-form .agree{display:flex;align-items:flex-start;gap:10px;padding:20px 0;font-size:15px}
.pt-form .agree input{width:auto;margin-top:5px}
.pt-form .agree small{display:block;color:#777;font-size:13px;margin-top:4px}
.pt-form .actions{text-align:center;padding-top:20px}
.pt-form .submit{min-width:160px;padding:14px 32px;border:0;background:#111;color:#fff;font:inherit;font-size:16px;cursor:pointer}
.pt-form .submit[disabled]{opacity:.5;cursor:default}
.pt-form .msg{margin-top:16px;text-align:center;font-size:15px}
.pt-form .msg.ok{color:#1a7f37}.pt-form .msg.err{color:#c0392b}
.pt-form .hp{position:absolute;left:-9999px;top:-9999px}
@media (max-width:767px){.pt-form .fld{grid-template-columns:1fr;gap:6px}.pt-form-head h2{font-size:26px}.pt-form-wrap{padding:20px 16px 60px}}
.pt-notice{max-width:1100px;margin:0 auto;padding:20px 16px 100px}
.pt-notice table{width:100%;border-collapse:collapse;border-top:2px solid #111}
.pt-notice th,.pt-notice td{padding:16px 10px;border-bottom:1px solid #e5e5e5;text-align:left;font-size:16px}
.pt-notice th{font-weight:700;background:#fafafa}
.pt-notice .no,.pt-notice .date{width:110px;text-align:center;color:#777}
.pt-notice .empty{padding:80px 0;text-align:center;color:#888}
.pt-notice .empty::before{content:"";display:block;width:56px;height:40px;margin:0 auto 14px;border:2px solid #ccc;border-radius:4px}
.pt-notice details{border-bottom:1px solid #e5e5e5}
.pt-notice summary{display:flex;gap:16px;padding:16px 10px;cursor:pointer;list-style:none}
.pt-notice summary::-webkit-details-marker{display:none}
.pt-notice .body{padding:10px 10px 30px;white-space:pre-wrap;color:#333;font-size:16px}
/* 약관 */
.pt-legal{max-width:960px;margin:0 auto;padding:140px 16px 100px;font-size:15px;line-height:1.8;color:#333;white-space:pre-wrap}
.pt-legal h1{font-size:28px;margin:0 0 30px;color:#111}
@media (max-width:767px){.pt-legal{padding-top:90px}}
/* 반응형 숨김 (부트스트랩 규약) */
@media (max-width:767px){.hidden-xs{display:none!important}}
@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}
@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important}}
@media (min-width:1200px){.hidden-lg{display:none!important}}

#content{overflow-x:clip}
.pt-legal .legal-text{white-space:pre-wrap}
.pt-legal .legal-body{white-space:normal}
.pt-legal .legal-body h2{font-size:18px;margin:40px 0 0;padding-bottom:8px;border-bottom:1px solid #e5e5e5;color:#111}
.pt-legal .legal-body p{margin:14px 0 0}
.pt-legal .legal-body .meta{padding:12px 16px;background:#f6f6f4;border:1px solid #e5e5e5;font-size:14px}
.pt-legal .legal-body table{width:100%;border-collapse:collapse;margin:14px 0 0;font-size:14px}
.pt-legal .legal-body th,.pt-legal .legal-body td{border:1px solid #e5e5e5;padding:10px 12px;text-align:left;vertical-align:top}
.pt-legal .legal-body th{background:#f6f6f4;white-space:nowrap}
/* 하위 메뉴 위젯(제품 분류 탭) */
.sub-menu ul{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 8px}
.sub-menu a{display:inline-block;padding:8px 20px;border-radius:22px;font-size:15px;color:#333;line-height:1.4}
.sub-menu a:hover{background:#f0ede8}
.sub-menu a.active{background:#111;color:#fff}
/* 이미지 위 겹침 글(text_position_overlay)은 사진에 이미 새겨져 있어 숨긴다 */
.text_position_overlay .txt,.text_position_overlay .hover_txt{display:none}

/* 제품 상세(간이) */
.pd .pd-back{margin:0;font-size:15px}.pd .pd-back a{color:#666;text-decoration:none;border-bottom:1px solid #ccc;padding-bottom:2px}.pd .pd-back a:hover{color:#111;border-color:#111}
.pd h1{font-weight:700}
@media (max-width:767px){.pd .pd-top{height:80px!important}.pd h1{font-size:2.6rem!important}}