@charset "utf-8";
/* =====================================================================
   TON펜션 사용자 사이트 (layouts/pension) — 벤치마킹 펜션 레이아웃 재현
   (analysis/benchmark/storefront/01-storefront.md 1~5장: 토큰·헤더·서브배너·SNB·푸터·메인 8섹션·서브 페이지)
   - 단위는 px (common.css 의 html 62.5% 와 무관하게)
   - 이미지: /images/ton/*.svg (README.md 파일명별 쓰는 곳)
   ===================================================================== */
:root {
  --ton-primary: #A08A60;
  --ton-dark: #2A231A;
  --ton-brown: #4A3F2F;
  --ton-text-brown: #7A6842;
  --ton-hover: #BFA882;
  --ton-hl: #E6DBC4;
  --ton-icon-bg: #E8DFD2;
  --ton-beige: #F5F0E8;
  --ton-text: #777;
  --ton-line: #e1e1e1;
  --ton-sun: #d7001e;
  --ton-sat: #1f77b3;
  --ton-ok: #41bbaf;
  --ton-main-font: "Gowun Batang", "Noto Serif KR", serif;
  --ton-k-font: "Pretendard GOV", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* ---------- 기본 ---------- */
body.ton-body { margin: 0; min-width: 0; background: #fff; color: var(--ton-text); font-family: var(--ton-k-font); font-size: 15px; line-height: 1.8; word-break: keep-all; }
.ton-body a { color: inherit; text-decoration: none; }
.ton-body img { max-width: 100%; display: block; }
.ton-body ul, .ton-body ol { list-style: none; margin: 0; padding: 0; }
.ton-body h1, .ton-body h2, .ton-body h3, .ton-body h4, .ton-body p, .ton-body dl, .ton-body dd { margin: 0; }
.ton-body button { font: inherit; cursor: pointer; }
.ton-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ton-skip a { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #000; color: #fff; padding: 8px 12px; }
.ton-skip a:focus { left: 0; }
.ton-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.ton-serif { font-family: var(--ton-main-font); }
.ton-ico { display: inline-block; width: 1em; height: 1em; background: currentColor; vertical-align: -0.15em;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }

/* ---------- 섹션 제목 (.group-tit) ---------- */
.ton-tit { text-align: center; margin-bottom: 60px; font-family: var(--ton-main-font); }
.ton-tit .en { display: block; font-size: 15px; font-weight: 700; color: var(--ton-primary); letter-spacing: 2px; margin-bottom: 12px; }
.ton-tit .ko { display: block; font-size: 40px; line-height: 1.35; color: var(--ton-dark); font-weight: 400; }
.ton-tit .desc { margin-top: 18px; font-size: 16px; color: var(--ton-text-brown); white-space: pre-line; }
.ton-tit.left { text-align: left; }
.ton-tit.white .ko, .ton-tit.white .desc { color: #fff; }

/* ---------- 버튼 ---------- */
.ton-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 180px; height: 55px; padding: 0 26px;
  border-radius: 100px; font-size: 15px; font-weight: 700; border: 1px solid transparent; box-sizing: border-box; transition: background .3s, color .3s, border-color .3s; font-family: var(--ton-main-font); }
.ton-btn::after { content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.ton-btn.no-arrow { justify-content: center; }
.ton-btn.no-arrow::after { display: none; }
.ton-btn.white { background: #fff; color: var(--ton-dark); }
.ton-btn.white:hover { background: var(--ton-hover); color: #fff; }
.ton-btn.line-white { border-color: rgba(255,255,255,.8); color: #fff; }
.ton-btn.line-white:hover { background: #fff; color: var(--ton-dark); }
.ton-btn.dark { background: var(--ton-brown); color: #fff; }
.ton-btn.dark:hover { background: var(--ton-primary); }
.ton-btn.line { border-color: var(--ton-brown); color: var(--ton-brown); background: #fff; }
.ton-btn.line:hover { background: var(--ton-brown); color: #fff; }
.ton-btn.gray { background: #aaa; color: #fff; }
.ton-btn.sm { min-width: 0; height: 42px; padding: 0 20px; font-size: 14px; }
.ton-btn:disabled { opacity: .45; cursor: not-allowed; }
.ton-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }

/* =====================================================================
   헤더 (#sh_hd) — 투명, 배너 위 absolute. 1024 이하 모바일 헤더
   ===================================================================== */
.ton-hd { position: absolute; top: 0; left: 0; right: 0; z-index: 100; }
.ton-hd-wrap { max-width: 1700px; margin: 0 auto; padding: 10px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; }
.ton-logo img { width: 110px; height: auto; }
.ton-gnb > ul { display: flex; align-items: center; }
.ton-gnb > ul > li { position: relative; }
.ton-gnb > ul > li > a { display: block; padding: 0 30px; line-height: 80px; color: #fff; font-size: 15px; font-weight: 700; font-family: var(--ton-main-font); transition: color .2s; }
.ton-gnb > ul > li > a:hover, .ton-gnb > ul > li.on > a { color: var(--ton-hl); }
.ton-gnb .sub { display: none; position: absolute; top: 75px; left: 50%; transform: translateX(-50%); min-width: 150px; background: var(--ton-dark); border-radius: 5px; padding: 10px 0; text-align: center; }
.ton-gnb li:hover > .sub, .ton-gnb li:focus-within > .sub { display: block; }
.ton-gnb .sub a { display: block; padding: 6px 16px; color: #ddd; font-size: 14px; white-space: nowrap; }
.ton-gnb .sub a:hover { color: #fff; }
.ton-gnb .ton-gnb-rsv > a { margin-left: 10px; padding: 0 24px; line-height: 44px; border: 1px solid rgba(255,255,255,.8); border-radius: 100px; }
.ton-gnb .ton-gnb-rsv > a:hover { background: #fff; color: var(--ton-dark); }
.ton-util { position: absolute; top: 4px; right: 40px; display: flex; gap: 14px; font-size: 12px; color: rgba(255,255,255,.8); }
.ton-util a:hover { color: #fff; }
.ton-hd.solid { position: relative; background: var(--ton-dark); }

/* 모바일 헤더 */
.ton-mhd { display: none; align-items: center; justify-content: space-between; padding: 12px 20px; }
.ton-mhd .ton-logo img { width: 65px; }
.ton-mbtn { width: 30px; height: 24px; background: none; border: 0; padding: 0; position: relative; }
.ton-mbtn span, .ton-mbtn::before, .ton-mbtn::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #fff; }
.ton-mbtn::before { top: 2px; } .ton-mbtn span { top: 11px; } .ton-mbtn::after { bottom: 2px; }
.ton-mnav-dim { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 900; opacity: 0; visibility: hidden; transition: .3s; }
.ton-mnav { position: fixed; top: 0; right: 0; bottom: 0; width: 75%; min-width: 300px; max-width: 420px; background: #fff; z-index: 901; transform: translateX(100%); transition: transform .35s; overflow-y: auto; display: flex; flex-direction: column; }
.ton-mnav.open { transform: none; }
.ton-mnav.open + .ton-mnav-dim, .ton-mnav-dim.open { opacity: 1; visibility: visible; }
.ton-mnav-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid #eee; font-size: 13px; color: #555; }
.ton-mnav-top .links { display: flex; gap: 14px; }
.ton-mnav-close { background: none; border: 0; font-size: 22px; line-height: 1; color: #333; }
.ton-mnav ul.lnb > li { border-bottom: 1px solid #eee; }
.ton-mnav ul.lnb > li > a, .ton-mnav ul.lnb > li > button { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 52px; padding: 0 20px; background: none; border: 0; text-align: left; color: #222; font-size: 15px; font-weight: 700; font-family: var(--ton-main-font); box-sizing: border-box; }
.ton-mnav ul.lnb > li > button::after { content: "+"; font-weight: 400; }
.ton-mnav ul.lnb > li.open > button::after { content: "−"; }
.ton-mnav .msub { display: none; background: #f2f3f5; }
.ton-mnav li.open .msub { display: block; }
.ton-mnav .msub a { display: block; padding: 10px 30px; font-size: 14px; color: #555; }
.ton-mnav .copy { margin-top: auto; padding: 20px; font-size: 12px; color: #999; }

/* =====================================================================
   서브 배너 (#subBnr) + SNB (#shSnb)
   ===================================================================== */
.ton-subbnr { position: relative; height: 650px; overflow: hidden; color: #fff; }
.ton-subbnr .bg { position: absolute; inset: 0; background: #2a231a center / cover no-repeat; transform: scale(1.05); animation: tonBgIn 1.2s ease forwards; }
.ton-subbnr .bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.25); }
@keyframes tonBgIn { to { transform: scale(1); } }
.ton-subbnr .txt { position: absolute; left: 50%; top: 57%; transform: translate(-50%, -50%); width: 100%; max-width: 1200px; padding: 0 20px; box-sizing: border-box; font-family: var(--ton-main-font); }
.ton-subbnr .btxt { font-size: 42px; font-weight: 700; line-height: 1.3; }
.ton-subbnr .stxt { margin-top: 10px; font-size: 18px; opacity: .9; }
.ton-snb { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; }
.ton-snb a { position: relative; padding: 0 34px; color: #fff; font-size: 16px; opacity: .65; font-family: var(--ton-main-font); }
.ton-snb a + a::before { content: ""; position: absolute; left: 0; top: 50%; height: 14px; margin-top: -7px; border-left: 1px solid rgba(255,255,255,.4); }
.ton-snb a.on, .ton-snb a:hover { opacity: 1; }
.ton-content { max-width: 1200px; margin: 70px auto 80px; padding: 0 20px; box-sizing: border-box; }
.ton-content.wide { max-width: 1400px; }

/* =====================================================================
   푸터 (#sh_ft)
   ===================================================================== */
.ton-ft { background: var(--ton-dark); color: var(--ton-text-brown); font-size: 16px; padding: 35px 0 46px; text-align: center; font-family: var(--ton-main-font); }
.ton-ft .ft-logo { width: 120px; margin: 0 auto 14px; }
.ton-ft h2 { font-size: 18px; font-weight: 700; color: #c8b99c; }
.ton-ft h3 { margin-top: 6px; font-size: 15px; font-weight: 400; }
.ton-ft .ft-btn { display: flex; justify-content: center; gap: 10px; margin: 22px 0; }
.ton-ft .ft-btn a { width: 51px; height: 51px; border-radius: 50%; background: var(--ton-brown); color: #e8dfd2; display: flex; align-items: center; justify-content: center; transition: background .3s; }
.ton-ft .ft-btn a:hover { background: var(--ton-primary); }
.ton-ft .ft-btn svg { width: 20px; height: 20px; }
.ton-ft address { font-style: normal; font-size: 14px; white-space: pre-line; line-height: 1.9; font-family: var(--ton-k-font); }
.ton-ft small { display: block; margin-top: 14px; font-size: 13px; }
.ton-ft .links { margin-top: 12px; display: flex; gap: 16px; justify-content: center; font-size: 13px; font-family: var(--ton-k-font); }
.ton-ft .links a:hover { color: #fff; }
.ton-ft-btns { display: none; }
.ton-fix-tel { display: none; }
.ton-ft-btns svg, .ton-fix-tel svg, .ton-ft .ft-btn svg { flex: none; max-width: 32px; max-height: 32px; }
.ton-top { position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 50%; background: var(--ton-brown); color: #fff; border: 0; font-size: 12px; z-index: 50; opacity: 0; visibility: hidden; transition: .3s; }
.ton-top.is-on { opacity: 1; visibility: visible; }

/* =====================================================================
   메인 (#main_banner, #inc01 ~ #inc08)
   ===================================================================== */
.ton-mv { position: relative; height: 816px; background: #222 center / cover no-repeat; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--ton-main-font); }
.ton-mv::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.36); }
.ton-mv .txt { position: relative; padding: 0 20px; }
.ton-mv .en { font-size: 15px; font-weight: 700; letter-spacing: 2px; opacity: .8; }
.ton-mv h2 { margin-top: 18px; font-size: 56px; line-height: 1.35; font-weight: 400; }
.ton-mv p { margin-top: 20px; font-size: 17px; line-height: 1.8; opacity: .9; }
.ton-mv .ton-btns { margin-top: 44px; }
.ton-mv-slides { position: absolute; inset: 0; }
.ton-mv-slides .s { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 1s; }
.ton-mv-slides .s.on { opacity: 1; }

.ton-sec { position: relative; }
/* inc01 ABOUT */
.ton-about { padding: 110px 0 130px; border-bottom: 1px solid var(--ton-line); overflow: hidden; }
.ton-about .deco { position: absolute; top: 30px; right: 0; width: 554px; z-index: -1; opacity: .9; }
.ton-about-cards { display: flex; gap: 30px; justify-content: center; }
.ton-about-cards li { position: relative; flex: 1; max-width: 447px; aspect-ratio: 447 / 422; overflow: hidden; }
.ton-about-cards img { width: 100%; height: 100%; object-fit: cover; }
.ton-about-cards .ov { position: absolute; inset: 0; background: rgba(0,0,0,.5); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; opacity: 0; transition: opacity .4s; font-family: var(--ton-main-font); }
.ton-about-cards li.on .ov, .ton-about-cards li:hover .ov { opacity: 1; }
.ton-about-cards .ov h3 { font-size: 24px; font-weight: 700; }
.ton-about-cards .ov i { width: 4px; height: 4px; border-radius: 50%; background: #fff; margin: 14px 0; }
.ton-about-cards .ov p { font-size: 15px; line-height: 1.7; }

/* inc02 SPACE */
.ton-space { padding: 96px 0 120px; }
.ton-space-grid { display: flex; justify-content: center; align-items: flex-start; gap: 75px; position: relative; }
.ton-space-card { display: block; }
.ton-space-card .img { overflow: hidden; }
.ton-space-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ton-space-card:hover .img img { transform: scale(1.07); }
.ton-space-card .lb { font-size: 14px; color: var(--ton-primary); font-weight: 700; letter-spacing: 1px; }
.ton-space-card h3 { display: inline; font-size: 22px; font-weight: 700; color: var(--ton-dark); font-family: var(--ton-main-font);
  background: linear-gradient(var(--ton-hl), var(--ton-hl)) 0 85% / 0 40% no-repeat; transition: background-size .4s; }
.ton-space-card:hover h3 { background-size: 100% 40%; }
.ton-space-card p { margin-top: 8px; font-size: 15px; }
.ton-space-card.left { width: 570px; }
.ton-space-card.left .info { margin-bottom: 26px; }
.ton-space-card.left .img { aspect-ratio: 570 / 552; }
.ton-space-card.right { width: 608px; margin-top: 140px; text-align: right; }
.ton-space-card.right .img { aspect-ratio: 608 / 413; }
.ton-space-card.right .info { margin-top: 26px; }
.ton-space-line { position: absolute; width: 128px; height: 291px; }
.ton-space-line.l { left: 0; top: 0; border-left: 1px solid var(--ton-hl); border-bottom: 1px solid var(--ton-hl); }
.ton-space-line.r { right: 0; bottom: 0; border-right: 1px solid var(--ton-hl); border-top: 1px solid var(--ton-hl); }
.ton-slidein { opacity: 0; transition: opacity 1s, transform 1s; }
.ton-slidein.up { transform: translateY(80px); }
.ton-slidein.down { transform: translateY(-80px); }
.ton-slidein.in { opacity: 1; transform: none; }

/* inc02 SPECIAL (원본 RESIDENCY) */
.ton-special { background: var(--ton-beige); padding: 170px 0; overflow: hidden; }
.ton-special .deco-l { position: absolute; left: 0; bottom: 0; width: 320px; }
.ton-special .deco-r { position: absolute; right: 0; top: 0; width: 320px; }
.ton-special-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; }
.ton-special-grid .img { justify-self: end; width: 100%; max-width: 613px; aspect-ratio: 613 / 616; }
.ton-special-grid .img img { width: 100%; height: 100%; object-fit: cover; }
.ton-special-grid .txt { padding-left: 120px; }
.ton-special-grid .txt p { margin-top: 18px; font-size: 16px; color: var(--ton-text-brown); }
.ton-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.ton-chips li { min-width: 67px; height: 34px; padding: 0 12px; border-radius: 5px; background: rgba(74,63,47,.1); color: var(--ton-brown); font-size: 14px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }

/* inc03 GALLERY */
.ton-gal { background: var(--ton-dark) center / cover; padding: 126px 0 105px; overflow: hidden; }
.ton-gal-track { display: flex; gap: 15px; transition: transform 1s ease; will-change: transform; }
.ton-gal-viewport { overflow: hidden; }
.ton-gal-track a { position: relative; flex: 0 0 calc((100% - 45px) / 4); aspect-ratio: 4 / 3; overflow: hidden; }
.ton-gal-track img { width: 100%; height: 100%; object-fit: cover; }
.ton-gal-track .ov { position: absolute; inset: 0; background: rgba(0,0,0,.6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; opacity: 0; transition: opacity .3s; font-family: var(--ton-main-font); }
.ton-gal-track a:hover .ov { opacity: 1; }

/* inc04 RESERVATION */
.ton-rsv { padding: 134px 0; overflow: hidden; }
.ton-rsv .deco-l { position: absolute; left: 3%; top: 90px; width: 220px; opacity: .8; }
.ton-rsv .deco-r { position: absolute; right: 3%; bottom: 60px; width: 220px; opacity: .8; }
.ton-rsv-items { display: flex; justify-content: center; }
.ton-rsv-items > div { flex: 1; max-width: 345px; text-align: center; padding: 10px 20px; }
.ton-rsv-items > div:nth-child(2) { border-left: 1px solid var(--ton-line); border-right: 1px solid var(--ton-line); }
.ton-rsv-items .ic { width: 55px; height: 55px; border-radius: 50%; background: var(--ton-icon-bg); color: var(--ton-brown); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.ton-rsv-items .ic svg { width: 24px; height: 24px; }
.ton-rsv-items dt { font-size: 22px; font-weight: 700; color: var(--ton-dark); font-family: var(--ton-main-font); }
.ton-rsv-items dd { margin-top: 6px; font-size: 17px; font-weight: 700; color: var(--ton-brown); }
.ton-rsv-items dd small { display: block; font-size: 14px; font-weight: 400; color: var(--ton-text); }

/* inc05 NOTICE */
.ton-notice { background: var(--ton-beige); padding: 104px 62px 130px; }
.ton-notice-list { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.ton-notice-list a { display: flex; align-items: center; gap: 24px; background: #fff; padding: 35px 63px 35px 50px; }
.ton-notice-list .bd { flex: none; width: 65px; height: 30px; border-radius: 100px; background: var(--ton-brown); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.ton-notice-list .t { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; color: var(--ton-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: padding .3s; }
.ton-notice-list a:hover .t { padding-left: 14px; }
.ton-notice-list .d { flex: none; font-size: 13px; color: var(--ton-primary); }
.ton-notice-list .empty { background: #fff; padding: 35px; text-align: center; }

/* inc06 TRAIL */
.ton-trail { padding: 160px 0 330px; }
.ton-trail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1300px; margin: 0 auto; }
.ton-trail-tabs { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.ton-trail-tabs button { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 480px; padding: 10px 24px 10px 10px; border-radius: 100px; border: 1px solid var(--ton-line); background: #fff; text-align: left; transition: .3s; }
.ton-trail-tabs button.on, .ton-trail-tabs button:hover { border-color: var(--ton-primary); background: var(--ton-beige); }
.ton-trail-tabs .ic { width: 50px; height: 50px; border-radius: 50%; background: var(--ton-icon-bg); color: var(--ton-brown); display: flex; align-items: center; justify-content: center; flex: none; }
.ton-trail-tabs .ic svg { width: 26px; height: 26px; }
.ton-trail-tabs .nm { flex: 1; font-size: 18px; color: var(--ton-dark); font-family: var(--ton-main-font); }
.ton-trail-tabs .tm { flex: none; padding: 2px 12px; border-radius: 100px; background: var(--ton-brown); color: #fff; font-size: 13px; }
.ton-trail-img { position: relative; width: 100%; max-width: 636px; aspect-ratio: 636 / 574; justify-self: end; }
.ton-trail-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; }
.ton-trail-img img.on { opacity: 1; }

/* inc07 STORY */
.ton-story { background: var(--ton-beige); padding: 120px 0 118px; }
.ton-story .band { position: absolute; left: 0; right: 0; top: -124px; height: 190px; background: center / cover no-repeat; }
.ton-story .band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(transparent, var(--ton-beige)); }
.ton-story .deco-l { position: absolute; left: 2%; top: 160px; width: 200px; }
.ton-story .deco-r { position: absolute; right: 2%; bottom: 80px; width: 200px; }
.ton-story-grid { display: flex; gap: 18px; justify-content: center; position: relative; }
.ton-story-grid li { flex: 1; max-width: 420px; }
.ton-story-grid li:nth-child(2) { margin-top: 45px; }
.ton-story-grid .img { aspect-ratio: 420 / 467; overflow: hidden; }
.ton-story-grid img { width: 100%; height: 100%; object-fit: cover; }
.ton-story-grid p { margin-top: 14px; text-align: center; font-size: 16px; font-weight: 700; color: var(--ton-text-brown); font-family: var(--ton-main-font); }

/* inc08 ACCESS */
.ton-access { background: var(--ton-beige); padding: 0 0 176px; }
.ton-access-card { display: flex; gap: 60px; background: #fff; border-radius: 13px; padding: 45px 40px 45px 98px; max-width: 1300px; margin: 0 auto; box-sizing: border-box; align-items: center; }
.ton-access-card .info { flex: 1; min-width: 0; }
.ton-access-card .addr { margin-top: 26px; font-size: 22px; font-weight: 700; color: var(--ton-dark); display: flex; gap: 8px; align-items: flex-start; font-family: var(--ton-main-font); }
.ton-access-card .addr svg { flex: none; width: 24px; height: 24px; color: var(--ton-primary); margin-top: 4px; }
.ton-access-card dl { display: flex; gap: 16px; margin-top: 26px; }
.ton-access-card dl .ic { flex: none; width: 53px; height: 53px; border-radius: 50%; background: var(--ton-icon-bg); color: var(--ton-brown); display: flex; align-items: center; justify-content: center; }
.ton-access-card dl .ic .ton-ico { width: 24px; height: 24px; }
.ton-access-card dt { font-size: 17px; font-weight: 700; color: var(--ton-dark); }
.ton-access-card dd { font-size: 15px; }
.ton-access-card .map { flex: none; width: 659px; max-width: 50%; aspect-ratio: 659 / 456; }
.ton-map { width: 100%; height: 100%; border: 0; background: #eee; }

/* 팝업(기존 디자인 영역 sfPopups — shop-popup.js) 위치 */
.ton-body .comp-sf-popups { position: relative; z-index: 1000; }
.ton-body .comp-sf-popup { position: fixed; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.25); max-width: calc(100vw - 20px); }
/* 펜션 레이아웃은 shop-skin.css 를 읽지 않으므로 본문 스크롤·이미지·닫기 줄 규칙을 여기 둔다 (세로 크기를 정한 팝업이 닫기 줄을 덮지 않게, 2026-11-03) */
.ton-body .comp-sf-popup:not([hidden]) { display: flex; flex-direction: column; }
.ton-body .comp-sf-popup-body { overflow: auto; max-height: calc(100vh - 120px); word-break: break-all; }
.ton-body .comp-sf-popup-body img { max-width: 100%; height: auto; vertical-align: top; }
.ton-body .comp-sf-popup-body iframe, .ton-body .comp-sf-popup-body video { max-width: 100%; }
.ton-body .comp-sf-popup-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; }
.ton-body .comp-sf-popup-bar label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ton-body .comp-sf-popup-bar button { background: none; border: 0; color: inherit; cursor: pointer; }

/* =====================================================================
   서브 페이지 공통
   ===================================================================== */
/* 공간소개·주변관광지 리스트 (ps_special_res) */
.ton-slist > li { display: flex; gap: 0; padding: 30px 0; border-bottom: 1px solid var(--ton-line); }
.ton-slist > li:first-child { padding-top: 0; }
.ton-slist .img { flex: 0 0 35%; }
.ton-slist .img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ton-slist .info { flex: 1; padding: 20px 40px 0; display: flex; flex-direction: column; justify-content: center; }
.ton-slist .cate { font-size: 13px; color: var(--ton-primary); font-weight: 700; letter-spacing: 1px; }
.ton-slist h3 { font-size: 24px; color: var(--ton-dark); font-family: var(--ton-main-font); margin: 6px 0 12px; }
.ton-slist p { font-size: 15px; white-space: pre-line; }
.ton-slist .meta { margin-top: 14px; font-size: 14px; color: var(--ton-text-brown); }

/* 객실 목록 (ps_room_res) */
.ton-rooms > li { display: flex; height: 320px; margin-bottom: 40px; }
.ton-rooms > li:nth-child(odd) { background: #f7f7f7; }
.ton-rooms > li:nth-child(even) { background: #fff; border: 1px solid #e5e5e5; }
.ton-rooms .img { position: relative; flex: 0 0 40%; background: #ddd center / cover no-repeat; }
.ton-rooms .img::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.2); opacity: 0; transition: .3s; }
.ton-rooms li:hover .img::after { opacity: 1; }
.ton-rooms .info { flex: 1; padding: 0 40px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.ton-rooms h3 { font-size: 28px; font-weight: 700; color: #222; font-family: var(--ton-main-font); }
.ton-rooms .type { margin-top: 8px; color: #666; }
.ton-rooms .smry { margin-top: 6px; color: #888; font-size: 14px; }
.ton-rooms .price { margin-top: 14px; font-size: 15px; color: #555; }
.ton-rooms .price b { font-size: 17px; color: #222; }
.ton-rooms .more { position: absolute; right: 40px; bottom: 30px; width: 160px; height: 55px; border-radius: 30px; background: #333; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ton-rooms .more:hover { background: var(--ton-brown); }

/* 객실 상세 */
.ton-rd-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding-bottom: 26px; border-bottom: 2px solid #333; margin-bottom: 30px; flex-wrap: wrap; }
.ton-rd-head .tit { font-size: 34px; color: #222; font-family: var(--ton-main-font); }
.ton-rd-head .tit small { display: block; font-size: 15px; color: var(--ton-primary); font-weight: 700; letter-spacing: 1px; }
.ton-rd-head ul { display: grid; grid-template-columns: auto auto; gap: 4px 40px; font-size: 15px; }
.ton-rd-head ul b { display: inline-block; min-width: 70px; color: #333; }
.ton-gallery-main { position: relative; background: #111; overflow: hidden; }
.ton-gallery-main .slides { display: flex; transition: transform .5s; }
.ton-gallery-main .slides img { flex: 0 0 100%; width: 100%; max-height: 700px; aspect-ratio: 3 / 2; object-fit: cover; }
.ton-gallery-main .nav { position: absolute; top: 50%; width: 50px; height: 50px; margin-top: -25px; background: rgba(0,0,0,.4); color: #fff; border: 0; font-size: 22px; }
.ton-gallery-main .nav.prev { left: 0; } .ton-gallery-main .nav.next { right: 0; }
.ton-gallery-main .cnt { position: absolute; right: 14px; bottom: 12px; padding: 2px 10px; background: rgba(0,0,0,.5); color: #fff; font-size: 13px; border-radius: 20px; }
.ton-gallery-thumb { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 6px; }
.ton-gallery-thumb button { position: relative; height: 86px; padding: 0; border: 0; background: #ddd center / cover no-repeat; }
.ton-gallery-thumb button::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.ton-gallery-thumb button.on::after { display: none; }
.ton-dl { margin-top: 50px; }
.ton-dl > dt { font-size: 26px; font-weight: 300; color: #222; margin-bottom: 14px; font-family: var(--ton-main-font); }
.ton-guide2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.ton-guide2 .txt { white-space: pre-line; font-size: 15px; }
.ton-other { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.ton-other a { display: block; }
.ton-other .img { height: 220px; background: #ddd center / cover no-repeat; }
.ton-other p { margin-top: 10px; font-size: 17px; color: #222; font-family: var(--ton-main-font); }

/* 표 (요금표·환불규정) */
.ton-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ton-tbl { width: 100%; border-collapse: collapse; border-top: 2px solid #333; font-size: 14px; text-align: center; min-width: 640px; }
.ton-tbl th, .ton-tbl td { border: 1px solid #ddd; padding: 12px 8px; }
.ton-tbl th { background: #f7f5f1; color: #333; font-weight: 700; }
.ton-tbl td.l { text-align: left; }
.ton-tbl td b { color: #222; }
.ton-tbl.small { min-width: 0; }
.ton-note { margin-top: 12px; font-size: 13px; color: #888; }
.ton-note li { position: relative; padding-left: 12px; }
.ton-note li::before { content: "·"; position: absolute; left: 0; }
.ton-h3 { font-size: 24px; color: #222; margin: 60px 0 18px; font-family: var(--ton-main-font); }
.ton-h3:first-child { margin-top: 0; }
.ton-box { background: #f7f5f1; padding: 24px 30px; font-size: 14px; line-height: 1.9; }
.ton-box.html p { margin: 0 0 6px; }

/* 갤러리 4열 */
.ton-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ton-gallery-grid button { padding: 0; border: 0; background: none; text-align: left; }
.ton-gallery-grid .img { aspect-ratio: 4 / 3; overflow: hidden; }
.ton-gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ton-gallery-grid button:hover img { transform: scale(1.05); }
.ton-gallery-grid p { margin-top: 8px; font-size: 14px; color: #444; }
.ton-lightbox { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; padding: 30px; }
.ton-lightbox.open { display: flex; }
.ton-lightbox img { max-width: 100%; max-height: 85vh; }
.ton-lightbox p { position: absolute; left: 0; right: 0; bottom: 20px; color: #fff; text-align: center; }
.ton-lightbox button { position: absolute; top: 16px; right: 20px; background: none; border: 0; color: #fff; font-size: 30px; }

/* 오시는 길 */
.ton-loc .lb { font-size: 15px; font-weight: 700; color: var(--ton-primary); letter-spacing: 2px; }
.ton-loc .addr { font-size: 22px; color: #222; margin: 6px 0 24px; font-family: var(--ton-main-font); }
.ton-loc .map { width: 100%; aspect-ratio: 1078 / 593; }
.ton-loc-way { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; }
.ton-loc-way > div { background: var(--ton-beige); padding: 26px 30px; }
.ton-loc-way h4 { display: flex; align-items: center; gap: 10px; font-size: 18px; color: var(--ton-dark); margin-bottom: 8px; font-family: var(--ton-main-font); }
.ton-loc-way p { white-space: pre-line; font-size: 15px; }

/* 기존 쇼핑몰 화면(layouts/shop: 회원·게시판)을 펜션 틀 안에 */
.ton-shop-wrap { max-width: 640px; margin: 50px auto 80px; padding: 0 0 20px; background: #fff; }
.comp-sf-wrap.ton-shop-wrap { max-width: 640px; min-height: 0; margin: 50px auto 80px; padding: 0 0 20px; background: #fff; }
.ton-body.comp-sf-body { background: #fff; }
/* 서브 헤더 밑줄이 게시판 목록 윗줄(2px)과 붙어 두 줄로 겹쳐 보임 → 밑줄 없애고 제목 아래 여백 */
.ton-shop-wrap .comp-sf-sub-header { border-bottom: 0; height: 56px; margin-bottom: 10px; font-size: 20px; color: var(--ton-dark, #222); }
/* 포토갤러리 목록: 작성자·날짜가 붙어 보임 → 간격 */
.ton-shop-wrap .comp-sf-bd-gallery .comp-sf-bd-meta { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 2px; }

/* =====================================================================
   반응형 (원본 breakpoint)
   ===================================================================== */
@media (max-width: 1800px) { .ton-hd-wrap { padding: 10px 40px; } }
@media (max-width: 1600px) { .ton-mv { height: 780px; } }
@media (max-width: 1400px) {
  .ton-hd-wrap { padding: 10px 30px; }
  .ton-gnb > ul > li > a { padding: 0 22px; }
  .ton-mv { height: 730px; }
  .ton-space-card.left .img { aspect-ratio: 570 / 470; }
  .ton-space-card.right .img { aspect-ratio: 608 / 380; }
  .ton-space-line { display: none; }
  .ton-access-card { padding: 40px; }
}
@media (max-width: 1200px) {
  .ton-logo img { width: 90px; }
  .ton-gnb > ul > li > a { padding: 0 14px; font-size: 14px; }
  .ton-mv { height: 675px; }
  .ton-mv h2 { font-size: 46px; }
  .ton-space-grid { gap: 40px; }
  .ton-space-card.left, .ton-space-card.right { width: 48%; }
  .ton-special-grid .txt { padding-left: 60px; }
}
@media (max-width: 1024px) {
  .ton-hd-wrap, .ton-util { display: none; }
  .ton-mhd { display: flex; }
  .ton-hd.solid .ton-mhd { background: var(--ton-dark); }
  .ton-snb { display: none; }
  .ton-subbnr { height: 450px; }
  .ton-subbnr .txt { text-align: center; }
  .ton-subbnr .btxt { font-size: 34px; }
  .ton-mv { height: 575px; }
  .ton-mv h2 { font-size: 38px; }
  .ton-tit .ko { font-size: 32px; }
  .ton-special { padding: 100px 0; }
  .ton-special-grid { grid-template-columns: 1fr; gap: 40px; }
  .ton-special-grid .img { justify-self: center; }
  .ton-special-grid .txt { padding: 0 10px; text-align: center; }
  .ton-chips { justify-content: center; }
  .ton-trail { padding: 100px 0 260px; }
  .ton-trail-grid { grid-template-columns: 1fr; }
  .ton-trail-grid .ton-tit.left { text-align: center; }
  .ton-trail-tabs { flex-direction: row; }
  .ton-trail-tabs button { flex-direction: column; padding: 14px 8px; border-radius: 16px; text-align: center; gap: 8px; }
  .ton-trail-img { justify-self: center; }
  .ton-access-card { flex-direction: column; padding: 30px; }
  .ton-access-card .map { width: 100%; max-width: none; }
  .ton-gal-track a { flex-basis: calc((100% - 30px) / 3); }
  .ton-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .ton-space-grid { flex-direction: column; align-items: center; }
  .ton-space-card.left, .ton-space-card.right { width: 100%; max-width: 608px; margin-top: 0; text-align: left; }
}
@media (max-width: 768px) {
  .ton-mhd .ton-logo img { width: 55px; }
  .ton-subbnr { height: 380px; }
  .ton-mv { height: 515px; }
  .ton-mv h2 { font-size: 30px; }
  .ton-mv p { font-size: 15px; }
  .ton-about, .ton-space, .ton-rsv, .ton-gal, .ton-story { padding-top: 70px; padding-bottom: 70px; }
  .ton-about .deco { width: 300px; }
  .ton-about-cards { flex-direction: column; align-items: center; }
  .ton-about-cards li { width: 100%; max-width: none; aspect-ratio: auto; height: 210px; flex: none; }
  .ton-about-cards .ov { opacity: 1; }
  .ton-tit { margin-bottom: 40px; }
  .ton-tit .ko { font-size: 26px; }
  .ton-tit .desc { font-size: 15px; }
  .ton-rsv-items { flex-direction: column; align-items: center; }
  .ton-rsv-items > div { width: 100%; padding: 24px 0; }
  .ton-rsv-items > div:nth-child(2) { border: 0; border-top: 1px solid var(--ton-line); border-bottom: 1px solid var(--ton-line); }
  .ton-notice { padding: 70px 20px; }
  .ton-notice-list a { padding: 20px; gap: 12px; flex-wrap: wrap; }
  .ton-notice-list .t { flex-basis: calc(100% - 80px); }
  .ton-story-grid { gap: 8px; }
  .ton-story-grid li:nth-child(2) { margin-top: 25px; }
  .ton-gal-track a { flex-basis: calc((100% - 15px) / 2); }
  .ton-slist > li { flex-direction: column; }
  .ton-slist .info { padding: 20px 0 0; }
  .ton-rooms > li { flex-direction: column; height: auto; }
  .ton-rooms .img { flex: none; height: 250px; }
  .ton-rooms .info { padding: 24px 20px 90px; }
  .ton-rooms .more { right: 20px; bottom: 20px; }
  .ton-guide2, .ton-loc-way { grid-template-columns: 1fr; }
  .ton-gallery-thumb { grid-template-columns: repeat(5, 1fr); }
  .ton-gallery-thumb button { height: 60px; }
  .ton-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ton-content { margin: 50px auto 60px; }
}
@media (max-width: 580px) { .ton-subbnr { height: 340px; } }
@media (max-width: 480px) {
  .ton-subbnr { height: 55px; background: #fff; color: #222; border-bottom: 1px solid #eee; }
  .ton-subbnr .bg { display: none; }
  .ton-subbnr .txt { top: 50%; }
  .ton-subbnr .btxt { font-size: 18px; }
  .ton-subbnr .stxt { display: none; }
  body.ton-sub .ton-hd { position: relative; background: var(--ton-dark); }
  .ton-mv { height: auto; min-height: 600px; padding: 120px 0 80px; }
  .ton-mv .ton-btns { flex-direction: column; align-items: center; }
  .ton-ft-btns { display: block; background: #978468; }
  .ton-ft-btns a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 55px; color: #fff; font-size: 16px; }
  .ton-fix-tel { display: flex; position: fixed; right: 16px; bottom: 80px; width: 65px; height: 65px; border-radius: 50%; background: var(--ton-brown); color: #fff; align-items: center; justify-content: center; z-index: 60; opacity: 0; visibility: hidden; transition: .3s; }
  .ton-fix-tel.is-on { opacity: 1; visibility: visible; }
  .ton-fix-tel svg { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .ton-top { display: none; }
  .ton-trail-tabs .nm { font-size: 15px; }
  .ton-rd-head ul { grid-template-columns: 1fr; }
}
.ton-loc-way + .ton-h3 { margin-top: 50px !important; }

/* 정상가(할인 전) 취소선 — 판매가보다 클 때만 나온다 */
del.ton-nml { color: #aaa; font-size: .85em; font-weight: 400; text-decoration: line-through; margin-right: 6px; }
td > del.ton-nml { display: block; margin: 0 0 2px; }

/* 로고 이미지 (/images/ton/ton-logo.png, 2026-11-03 사용자 요청) — 갈색 글자라 사진·진한 바탕(헤더·푸터)에서 묻히지 않게 흰 빛 테두리 */
.ton-logo img, .ton-ft .ft-logo { filter: drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,255,255,.7)); }
.ton-logo img { width: 104px; }
.ton-mhd .ton-logo img { width: 64px; }
.ton-ft .ft-logo { width: 130px; }
@media (max-width: 1024px) { .ton-logo img { width: 84px; } .ton-mhd .ton-logo img { width: 56px; } }

/* 배너 설명 줄바꿈 그대로 (관리자 디자인 > 배너 관리 '설명' — 2026-11-03) */
.ton-pre, .tm-zig .txt p, .tm-trail-list .body p, .ton-slist .info p { white-space: pre-line; }