/* 스크린 파크골프 홈페이지 시안 — 아임웹 섹션으로 그대로 옮길 수 있게 섹션 단위로 구성 */
:root {
  --bg: #f6f7f2;
  --paper: #ffffff;
  --ink: #14231a;
  --ink-2: #44514a;
  --ink-3: #6b766f;
  --line: #dfe3d8;
  --green: #1d6b43;
  --green-2: #134d30;
  --turf: #cfe3b0;
  --sun: #f2b632;
  --sans: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --w: 1180px;
  --gut: clamp(16px, 4vw, 40px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.7 var(--sans); word-break: keep-all; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
h1, h2, h3 { margin: 0; line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
.h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 800; }
.kicker { color: var(--green); font-weight: 700; font-size: 1rem; margin: 0 0 .6rem; }
.lead { color: var(--ink-2); font-size: 1.1rem; margin: .8rem 0 0; max-width: 46ch; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 52px; padding: 0 1.5rem; border-radius: 10px; font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-size: 1.02rem; }
.btn--main { background: var(--green); color: #fff; }
.btn--main:hover { background: var(--green-2); }
.btn--sun { background: var(--sun); color: #1b1404; }
.btn--line { border-color: currentColor; }

/* 시안 안내 띠 */
.ribbon { background: #0f1a13; color: #e9efe6; font-size: 15px; }
.ribbon .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 42px; }
.ribbon p { margin: 0; }
.ribbon a { text-decoration: none; border: 1px solid #4a5a50; border-radius: 99px; padding: .25rem .8rem; white-space: nowrap; }
.ribbon a:hover { background: #e9efe6; color: #0f1a13; }

/* 머리 */
.hd { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.hd .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; }
.logo svg { width: 36px; height: 36px; }
.logo small { display: block; font-size: .72rem; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }
.gnb { display: flex; gap: 1.6rem; margin-left: auto; }
.gnb a { text-decoration: none; font-weight: 700; padding: .5rem 0; }
.gnb a:hover { color: var(--green); }
.hd .btn { min-height: 44px; padding: 0 1rem; }
.menu-btn { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; }
.menu-btn span { display: block; width: 24px; height: 2.5px; background: var(--ink); margin: 5px auto; }
@media (max-width: 980px) {
  .gnb { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); flex-direction: column; gap: 0; padding: .5rem var(--gut) 1rem; border-bottom: 1px solid var(--line); }
  .gnb.open { display: flex; }
  .gnb a { padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .menu-btn { display: block; }
  .hd .btn { display: none; }
}

/* 슬라이드 */
.hero { position: relative; overflow: hidden; background: var(--green-2); color: #fff; }
.slides { position: relative; height: clamp(520px, 70vh, 640px); }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.slide.on { opacity: 1; visibility: visible; }
.slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 30, 18, .82) 0%, rgba(10, 30, 18, .55) 45%, rgba(10, 30, 18, .1) 100%); }
.slide__tx { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: var(--w); margin: 0 auto; padding: 0 var(--gut); }
.slide__no { font-weight: 700; color: var(--sun); margin: 0 0 1rem; }
.slide h2 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); font-weight: 800; max-width: 15ch; }
.slide p.sub { font-size: clamp(1.05rem, 2vw, 1.3rem); margin: 1rem 0 2rem; max-width: 34ch; color: #e6efe6; }
.slide .btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.slide .btn--line { color: #fff; }
.slide--booth .slide__art { position: absolute; right: max(var(--gut), calc((100vw - var(--w)) / 2 + var(--gut))); top: 50%; transform: translateY(-50%); width: min(46vw, 560px); }
@media (max-width: 860px) { .slide--booth .slide__art { display: none; } .slide__shade { background: rgba(10, 30, 18, .66); } }
.hero__ctrl { position: absolute; left: 0; right: 0; bottom: 22px; }
.hero__ctrl .wrap { display: flex; align-items: center; gap: .8rem; }
.dots { display: flex; gap: .4rem; }
.dots button { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; padding: 0; }
.dots button::before { content: ''; width: 34px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .4); }
.dots button[aria-current='true']::before { background: var(--sun); }
.hero__ctrl .pause { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: none; color: #fff; cursor: pointer; font-size: .9rem; }

/* 숫자 띠 */
.facts { background: var(--paper); border-bottom: 1px solid var(--line); }
.facts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.facts li { padding: 1.6rem 1rem; border-right: 1px solid var(--line); display: grid; gap: .2rem; }
.facts li:last-child { border-right: 0; }
.facts b { font-size: 1.9rem; font-weight: 800; color: var(--green); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.facts span { color: var(--ink-2); font-size: .98rem; }
@media (max-width: 760px) { .facts ul { grid-template-columns: 1fr 1fr; } .facts li:nth-child(2) { border-right: 0; } .facts li:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

.sec { padding: clamp(4rem, 8vw, 6.5rem) 0; scroll-margin-top: 76px; }
.sec--white { background: var(--paper); }
.sec__hd { margin-bottom: 2.6rem; }

/* 회사 소개 */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about img { border-radius: 16px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.about ul { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.about li { padding-left: 1.6rem; position: relative; }
.about li::before { content: ''; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

/* 제품 */
.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.booth { background: #e8eedf; border-radius: 18px; padding: 1.4rem; }
.booth svg { width: 100%; height: auto; display: block; }
.parts { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.parts li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem 1rem; padding: 1rem 1.1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.parts b { grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 1rem; }
.parts strong { font-size: 1.08rem; }
.parts span { color: var(--ink-2); font-size: .98rem; }
@media (max-width: 900px) { .product { grid-template-columns: 1fr; } }

/* 설치 공간 */
.space { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.space svg { width: 100%; height: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.space dl { margin: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.space dl div { display: grid; grid-template-columns: 8.5rem 1fr; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.space dt { color: var(--ink-3); font-weight: 600; }
.space dd { margin: 0; font-weight: 700; font-size: 1.1rem; }
.note { font-size: .9rem; color: var(--ink-3); margin-top: 1rem; }
@media (max-width: 860px) { .space { grid-template-columns: 1fr; } }

/* 렌탈·구매 */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.plan { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 1.8rem; display: grid; gap: .9rem; align-content: start; }
.plan--pick { border: 2px solid var(--green); }
.plan h3 { font-size: 1.4rem; }
.plan .for { color: var(--green); font-weight: 700; margin: 0; }
.plan ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; color: var(--ink-2); }
.plan .btn { margin-top: .4rem; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
.steps { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; counter-reset: s; }
.steps li { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; counter-increment: s; font-weight: 700; display: grid; gap: .2rem; }
.steps li::before { content: counter(s, decimal-leading-zero); color: var(--green); font-size: .9rem; }
.steps span { font-weight: 400; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }

/* 도입처 */
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.who a { display: grid; gap: .6rem; padding: 1.8rem; border-radius: 16px; background: var(--green); color: #fff; text-decoration: none; min-height: 220px; align-content: end; }
.who a:nth-child(2) { background: #2f5c86; }
.who a:nth-child(3) { background: #8a5a1c; }
.who h3 { font-size: 1.45rem; }
.who p { margin: 0; color: rgba(255, 255, 255, .88); }
.who em { font-style: normal; font-weight: 700; color: var(--sun); }
@media (max-width: 900px) { .who { grid-template-columns: 1fr; } .who a { min-height: 0; } }

/* 사례 */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.case img { border-radius: 14px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.case h3 { font-size: 1.15rem; margin-top: .8rem; }
.case p { margin: .2rem 0 0; color: var(--ink-3); font-size: .95rem; }
.badge { display: inline-block; font-size: .8rem; font-weight: 700; padding: .1rem .55rem; border-radius: 99px; background: var(--turf); color: var(--green-2); margin-bottom: .3rem; }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; } }

/* 자주 묻는 질문 */
.faq { display: grid; gap: .6rem; max-width: 860px; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.faq summary { cursor: pointer; padding: 1.1rem 1.3rem; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; min-height: 56px; align-items: center; }
.faq summary::after { content: '+'; font-size: 1.4rem; color: var(--green); }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--ink-2); }

/* 문의 */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); }
.contact__info dl { margin: 1.6rem 0 0; display: grid; gap: .8rem; }
.contact__info dt { color: var(--ink-3); font-size: .92rem; }
.contact__info dd { margin: 0; font-weight: 700; font-size: 1.2rem; }
form.ask { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.3rem, 3vw, 2rem); display: grid; gap: 1.1rem; }
.ask fieldset { border: 0; padding: 0; margin: 0; }
.ask legend, .ask label { font-weight: 700; display: block; margin-bottom: .4rem; }
.types { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.types label { margin: 0; }
.types input { position: absolute; opacity: 0; }
.types span { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1.5px solid var(--line); border-radius: 10px; font-weight: 700; cursor: pointer; }
.types input:checked + span { border-color: var(--green); background: #e7f1e6; color: var(--green-2); }
.types input:focus-visible + span { outline: 3px solid var(--sun); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ask input[type=text], .ask input[type=tel], .ask select, .ask textarea { width: 100%; font: inherit; padding: .75rem .9rem; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; min-height: 50px; }
.ask textarea { min-height: 110px; resize: vertical; }
.agree { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400 !important; font-size: .95rem; color: var(--ink-2); }
.agree input { width: 22px; height: 22px; margin-top: .15rem; }
.toast { margin: 0; padding: 1rem; border-radius: 10px; background: #e7f1e6; color: var(--green-2); font-weight: 600; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } .types { grid-template-columns: 1fr 1fr; } .row2 { grid-template-columns: 1fr; } }

/* 바닥 */
.ft { background: #0f1a13; color: #c7d2c9; padding: 3rem 0 4rem; font-size: .95rem; }
.ft strong { color: #fff; font-size: 1.1rem; }
.ft p { margin: .3rem 0; }
.ft small { display: block; margin-top: 1.4rem; color: #8b9a8f; font-size: .82rem; line-height: 1.6; }
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: grid; gap: .5rem; }
.fab a { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; font-weight: 800; font-size: .85rem; line-height: 1.2; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.fab .tel { background: var(--sun); color: #1b1404; }
.fab .ask-btn { background: var(--green); color: #fff; }

/* 제안서 페이지 */
.pp h1 { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 800; }
.pp table { width: 100%; border-collapse: collapse; background: var(--paper); min-width: 560px; }
.pp th, .pp td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 1rem; }
.pp th { background: #edf1e8; font-size: .9rem; color: var(--ink-2); }
.pp td:first-child { font-weight: 700; white-space: nowrap; }
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.pp .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.pp ul.check { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.pp ul.check li { padding-left: 1.8rem; position: relative; }
.pp ul.check li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 800; }
@media (max-width: 860px) { .pp .grid2 { grid-template-columns: 1fr; } }
.pp .grid2 > * { min-width: 0; }
@media (max-width: 640px) { .hide-sm { display: none; } }

/* ===== 모션 (아임웹 '애니메이션 효과'로 옮길 수 있는 것 위주: 등장·슬라이드·호버) ===== */
@keyframes kb { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes putt { 0%, 15% { transform: translate(0, 0) scale(1); opacity: 1; } 70% { transform: translate(0, -150px) scale(.45); opacity: 1; } 80%, 100% { transform: translate(0, -160px) scale(.4); opacity: 0; } }
@keyframes beam { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes floaty { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 10px)); } }

.slide.on .slide__bg { animation: kb 7s ease-out both; }
.slide .slide__tx > * { opacity: 0; }
.slide.on .slide__tx > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.slide.on .slide__tx > *:nth-child(2) { animation-delay: .12s; }
.slide.on .slide__tx > *:nth-child(3) { animation-delay: .24s; }
.slide.on .slide__tx > *:nth-child(4) { animation-delay: .36s; }
.slide--booth.on .slide__art { animation: floaty 6s ease-in-out infinite; }
.dots button { position: relative; }
.dots button::after { content: ''; position: absolute; left: 5px; right: 5px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--sun); transform-origin: left; transform: scaleX(0); }
.hero.playing .dots button[aria-current='true']::after { animation: bar 5.5s linear both; }
.hero.playing .dots button[aria-current='true']::before { background: rgba(255, 255, 255, .4); }

.ball { transform-box: fill-box; transform-origin: center; animation: putt 3.4s cubic-bezier(.3, .6, .3, 1) infinite; }
.beam { animation: beam 3.4s ease-in-out infinite; }
.in .badge-n, .slide .badge-n { transform-box: fill-box; transform-origin: center; animation: pop .5s cubic-bezier(.2, .8, .3, 1.4) both; }
.badge-n:nth-of-type(2) { animation-delay: .15s; } .badge-n:nth-of-type(3) { animation-delay: .3s; } .badge-n:nth-of-type(4) { animation-delay: .45s; } .badge-n:nth-of-type(5) { animation-delay: .6s; }

.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

.plan, .who a, .case, .parts li, .steps li { transition: transform .25s, box-shadow .25s; }
.plan:hover, .who a:hover, .parts li:hover, .steps li:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(20, 35, 26, .12); }
.case img { transition: transform .5s; }
.case { overflow: hidden; }
.case:hover img { transform: scale(1.04); }
.btn { transition: background .2s, transform .2s; }
.btn:hover { transform: translateY(-2px); }
.fab a { transition: transform .2s; }
.fab a:hover { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .slide .slide__tx > * { opacity: 1; }
  .js .rv { opacity: 1; transform: none; }
}