@charset "utf-8";

/* ========== 전체 서브페이지 스타일 (컨텐츠만) ========== */

/* ── 서비스 소개 ── */
.about-head {margin:0 0 56px; text-align:left;}
.about-head-title {margin:0 0 20px; font-size:clamp(32px,3.6vw,52px); font-weight:600; line-height:1.2em; letter-spacing:-.04em; color:#121212; word-break:keep-all;}
.about-head-lead {max-width:720px; margin:0; font-size:22px; font-weight:400; line-height:1.7em; letter-spacing:-.03em; color:#505050; word-break:keep-all;}
.about-visual {margin-bottom:80px; overflow:hidden; border-radius:16px; background:#111113;}
.about-visual img {display:block; width:100%; height:420px; object-fit:cover; object-position:center 88%;}
.about-essay {display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:80px; align-items:start; margin-bottom:100px;}
.about-essay-main p {margin:0 0 28px; font-size:20px; font-weight:400; line-height:1.85em; letter-spacing:-.03em; color:#121212; word-break:keep-all;}
.about-essay-main p:last-child {margin-bottom:0;}
.about-aside-kicker {margin:0 0 20px; font-size:13px; font-weight:700; letter-spacing:.12em; color:var(--brand-green);}
.about-essay-aside {padding:32px 0 0; border-top:2px solid #121212;}
.about-essay-aside ul {margin:0; padding:0; list-style:none;}
.about-essay-aside li {margin:0 0 16px; padding:0 0 16px; border-bottom:1px solid #e6e6e6; font-size:18px; line-height:1.6em; letter-spacing:-.03em; color:#121212; word-break:keep-all;}
.about-essay-aside li:last-child {margin-bottom:0; padding-bottom:0; border-bottom:none;}
.about-offer {margin-bottom:0;}
.about-offer-title {margin:0 0 40px; font-size:32px; font-weight:700; letter-spacing:-.04em; color:#121212; word-break:keep-all;}
.about-offer-list {display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0; padding:0; list-style:none; border-top:1px solid #e6e6e6;}
.about-offer-list li {display:flex; gap:24px; padding:36px 40px 36px 0; border-bottom:1px solid #e6e6e6;}
.about-offer-list li:nth-child(even) {padding-right:0; padding-left:40px; border-left:1px solid #e6e6e6;}
.about-offer-num {flex:0 0 auto; font-size:15px; font-weight:700; letter-spacing:.06em; color:var(--brand-cyan);}
.about-offer-list h4 {margin:0 0 12px; font-size:22px; font-weight:700; letter-spacing:-.03em; color:#121212; word-break:keep-all;}
.about-offer-list p {margin:0; min-height:calc(1.75em * 2); font-size:17px; line-height:1.75em; letter-spacing:-.03em; color:#333; word-break:keep-all;}

/* ── 이용방법 ── */
.guide-layout {display:flex; flex-direction:column; align-items:center; gap:80px;}
.guide-intro {max-width:100%; text-align:center;}
.guide-title {margin:0 0 28px; font-size:40px; font-weight:600; line-height:1.3em; letter-spacing:-.04em; color:#121212; word-break:keep-all;}
.guide-title-line {display:inline;}
.guide-em {font-weight:700;}
.guide-em--cyan {color:var(--brand-cyan);}
.guide-em--green {color:var(--brand-green);}
.guide-lead {margin:0; font-size:22px; font-weight:400; line-height:1.7em; letter-spacing:-.03em; color:#121212; word-break:keep-all;}
.guide-steps {display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-start; gap:0; width:100%; margin:0; padding:0; list-style:none;}
.guide-step {display:flex; flex-direction:column; align-items:center; flex:1 1 0; width:auto; min-width:0; max-width:297px; gap:20px; margin:0; text-align:center;}
.guide-arrow {flex:0 0 60px; width:60px; height:24px; margin-top:38px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 4L16 12L8 20' stroke='%237ED957' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% no-repeat;}
.guide-step-icon {flex:0 0 100px; width:100px; height:100px;}
.guide-step-icon img {display:block; width:100px; height:100px;}
.guide-step-body {min-width:0;}
.guide-step-body h4 {margin:0 0 12px; font-size:22px; font-weight:700; line-height:1.4em; letter-spacing:-.03em; color:#121212; word-break:keep-all;}
.guide-step-body p {margin:0; font-size:16px; font-weight:400; line-height:1.7em; letter-spacing:-.03em; color:#505050; word-break:keep-all;}

/* ── 문화 · 축제 · 관광 ── */
.story-section {margin:0 0 100px;}
.story-section:last-child {margin-bottom:0;}
.story-section-head {margin:0 0 40px;}
.story-kicker {margin:0 0 12px; font-size:52px; font-weight:700; line-height:1.2em; letter-spacing:-.04em; color:#121212; word-break:keep-all;}
.story-section-title {margin:0; font-size:22px; font-weight:400; line-height:1.6em; letter-spacing:-.03em; color:#505050; word-break:keep-all;}
.story-videos {position:relative;}
.story-videos:not(.is-slider) .swiper {overflow:visible;}
.story-videos:not(.is-slider) .swiper-wrapper {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; transform:none !important;}
.story-videos:not(.is-slider) .swiper-slide {width:auto !important; margin:0 !important;}
.story-videos.is-slider {padding:0 52px;}
.story-videos.is-slider .swiper {overflow:hidden;}
.story-videos .swiper-button-prev,
.story-videos .swiper-button-next {width:40px; height:40px; margin-top:0; top:36%; background:#fff; border:1px solid #e6e6e6; border-radius:50%; box-shadow:0 6px 18px rgba(18,18,18,.08);}
.story-videos .swiper-button-prev {left:0;}
.story-videos .swiper-button-next {right:0;}
.story-videos .swiper-button-prev:after,
.story-videos .swiper-button-next:after {font-size:14px; font-weight:700; color:#121212;}
.story-card {display:block; width:100%; padding:0; border:0; background:none; text-align:left; cursor:pointer;}
.story-card .thumb {position:relative; display:block; overflow:hidden; height:0; padding-bottom:177.78%; margin-bottom:16px; border-radius:16px; background:#111113;}
.story-card .thumb img {position:absolute; left:0; top:0; display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.story-card .thumb:after {content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.28) 100%);}
.story-card .play {position:absolute; top:50%; left:50%; z-index:2; width:0; height:0; margin:-10px 0 0 4px; border-style:solid; border-width:12px 0 12px 20px; border-color:transparent transparent transparent rgba(255,255,255,.92); filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));}
.story-card .tit {display:block; margin:0 0 8px; font-size:20px; font-weight:700; line-height:1.5em; letter-spacing:-.03em; color:#121212; word-break:keep-all;}
.story-card .date {display:block; font-size:14px; line-height:1.4em; color:#888;}
.story-card:hover .thumb img {transform:scale(1.04);}