/* ====== Base ====== */
:root{
  --header-h:88px; --brand:#0a62ff; --text:#111; --muted:#667085;
  --border:#e6e8ee; --radius:14px; --maxw:1320px; --dur:1.2s;
  --easing:cubic-bezier(.22,.61,.36,1);
  --hero-img:url('../images/new_index.jpg');

  --control-h:54px; --control-radius:18px;
  --control-px:16px; --control-py:14px;
  --control-border:#d0d5dd; --control-hover:#bfc5d2;
  --control-focus:rgba(10,98,255,.12);

  --pc-banner-wvw:78.2vw; --pc-banner-max:646px;
  --mo-banner-wvw:82.8vw; --mo-banner-max:684px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); background:#fff; overflow-x:hidden;
  font-family:"Pretendard","Noto Sans KR",system-ui,-apple-system,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
a{color:inherit; text-decoration:none}

/* ====== Header ====== */
header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:100;
  display:flex; align-items:center; transition:background .28s ease, color .28s ease;
}
header .nav{width:100vw; padding:0 50px; margin:0; display:flex; align-items:center; justify-content:space-between; gap:16px}
.logo img{height:40px; display:block}
.menu{display:flex; gap:18px; align-items:center; white-space:nowrap; margin-left:auto}
.menu a{padding:12px 16px; border-radius:999px; font-weight:400; transition:font-weight .2s}
.menu a:hover,.menu a.active{font-weight:700}
.contact-num{margin-left:24px; font-size:15px; font-weight:600; white-space:nowrap}
header.on-hero{background:transparent; color:#fff}
header.is-solid{background:#000; color:#fff}

/* ====== Sections ====== */
section{
  min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--header-h) + 32px) 16px 80px; scroll-margin-top:var(--header-h);
}
.container{width:min(var(--maxw),92vw); margin:0 auto}

/* ====== Hero ====== */
#home{position:relative; color:#fff; padding:calc(var(--header-h) - 70px) 0 64px}
#home::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--hero-img) 60% 50% / 120% auto no-repeat;
  filter:brightness(.99);
}
#home>.container{position:relative; z-index:1}

.eyebrow{font-size:clamp(8px,2vw,15px); font-weight:500; color:#cfd6e6; letter-spacing:.04em; text-transform:uppercase}
.title{font-size:clamp(38px,7vw,92px); line-height:1; margin:10px 0}
.tagline{font-size:clamp(14px,2.2vw,24px); line-height:1.7; color:#fff; margin:0}
.tagline + .tagline{margin-top:18px}
.tagline strong{font-weight:800}

/* === 배너(검정, 희미) 공통 === */
.hero-sub{margin-top:44px; margin-bottom:0; font-size:clamp(10px, 7vw, 15px); line-height:1.3; color:#d7dce6}
.hero-sub.boxed,
.hero-promo{
  display:flex; align-items:center; justify-content:center;
  padding:16px 26px; margin:16px auto 0;
  width:min(var(--pc-banner-wvw), var(--pc-banner-max));
  color:#fff; background:rgba(0,0,0,.30);
  border:1px solid rgba(40,40,40,.14);
  border-radius:999px; box-shadow:none;
  backdrop-filter:saturate(130%) blur(3px);
  -webkit-backdrop-filter:saturate(130%) blur(3px);
}
.hero-sub.boxed{gap:8px}
.hero-promo{gap:0; margin-top:18px}
.hero-promo .promo-lead{font-weight:400; font-size:15px; letter-spacing:.01em}
.hero-promo .promo-off{font-weight:700; font-size:17px}
.hero-promo .promo-off strong{color:#fff95d}

/* === CTA 버튼(보라 단색) === */
.cta{display:flex; justify-content:center; margin-top:48px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:999px; font-weight:700; font-size:16px;
  cursor:pointer; transition:transform .2s ease; text-align:center;
}
.btn.primary{
  background:rgba(73,61,141,.9); color:#fff; border:none; box-shadow:none;
  padding:18px 26px; font-size:18px;
  width:min(var(--pc-banner-wvw), var(--pc-banner-max));
}
.btn.primary:hover{transform:translateY(-2px); background:rgba(41,31,88,.9)}
#home .mid-contact{display:inline-flex; margin:24px auto 0}

/* ====== Scroll round button ====== */
.scroll-nav{display:flex; justify-content:center; margin-top:16px}
#home .scroll-nav{
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin-top: 0;
  z-index: 6;
  transition: opacity .24s ease, transform .24s ease;

  /* 초기에는 숨김(마지막에 나타남) */
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  pointer-events: none;
}
/* 로딩/시퀀스 완료 후 표시 */
#home .scroll-nav.is-ready{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
/* 스크롤 내리면 숨김 */
#home .scroll-nav.is-hidden{
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  pointer-events: none;
}
.scroll-btn{
  width:56px; height:56px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.36); /* 희미한 흰색 */
  color:#111; border:1px solid rgba(0,0,0,.10);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.scroll-btn:hover{ transform:translateY(2px); background:rgba(255,255,255,.56); border-color:rgba(0,0,0,.14) }
.scroll-btn:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(10,98,255,.18) }
.scroll-btn svg{width:22px; height:22px; fill:currentColor}
.scroll-btn.scroll-up svg{transform:rotate(180deg)}

/* ====== Contact ====== */
#contact{background:#fff; align-items:flex-start; padding-top:var(--header-h)}
.section-head{display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; margin-bottom:28px}
.section-head h2{margin:0; font-size:clamp(34px,6vw,52px)}
.section-head .lead{margin:15px 0; color:#667085; font-size:16px; display:flex; flex-direction:column; gap:4px}
.lead .lead-line1,.lead .lead-line2{display:block}
.lead .lead-line1 .nowrap{white-space:nowrap}
.lead .est-1,.lead .est-2{display:inline}

.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:30px; text-align:left; margin:0 auto; max-width:1200px; width:100%;
  overflow-x:hidden;
}

/* ====== Form ====== */
.form-row{display:grid; grid-template-columns:200px 1fr; gap:12px 14px; align-items:flex-start; justify-items:start; margin-bottom:16px}
.form-row>*{min-width:0}
.form-row>label{font-size:19px; font-weight:400; color:#333; line-height:38px}

.form-row input:not([type="checkbox"]):not([type="radio"]),
.form-row select,.form-row textarea{
  width:100%; padding:var(--control-py) var(--control-px);
  border-radius:var(--control-radius); border:1px solid var(--control-border);
  font-size:15px; background:#fff; color:#111;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.form-row input:not([type="checkbox"]):not([type="radio"]), .form-row select{height:var(--control-h); line-height:normal}
.form-row textarea{min-height:160px; resize:vertical}
.form-row input::placeholder,.form-row textarea::placeholder{color:#98a2b3}
.form-row input:not([type="checkbox"]):not([type="radio"]):hover,
.form-row select:hover,.form-row textarea:hover{border-color:var(--control-hover)}
.form-row input:not([type="checkbox"]):not([type="radio"]):focus,
.form-row select:focus,.form-row textarea:focus{
  outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--control-focus);
}

.form-row .options{display:flex; flex-wrap:nowrap; gap:20px; align-items:center; justify-content:flex-start; min-width:0}
.form-row .options label{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-size:15px; line-height:1.4}
.form-row .options.options--methods{gap:12px}

/* 연락처 */
.form-row.phone .phone-fields{display:flex; align-items:center; gap:8px; flex-wrap:nowrap}
.form-row.phone select,.form-row.phone input{width:96px}
.form-row.phone .dash{opacity:.55}

/* 개인정보 */
.agree-box{
  box-sizing:border-box; display:block; width:100%; padding:12px 14px;
  border:1px solid var(--control-border); border-radius:var(--control-radius);
  background:#fff; color:#333; line-height:1.55; max-height:180px; overflow:auto;
  white-space:normal; word-break:keep-all; overflow-wrap:anywhere; -webkit-overflow-scrolling:touch;
}
.form-row>.agree-wrap{justify-self:stretch; width:100%; text-align:left}
.agree-check{display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:0; margin-top:10px; text-align:left}
.agree-check input[type="checkbox"]{margin:0}
.agree-check .agree-text{line-height:1.5; white-space:normal; overflow-wrap:anywhere; min-width:0}

/* Footer */
footer.footer{padding:28px 0 40px; text-align:center; color:#667085; font-size:13px; background:#f5f7fa}
footer.footer ul{list-style:none; padding:0; margin:0 10px 10px; display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; color:#475467}

/* ====== Reveal Animation ====== */
.reveal-line{opacity:0; transform:translateY(28px); will-change:opacity,transform}
.reveal-line.show{opacity:1; transform:translateY(0); transition:transform 1.05s cubic-bezier(.22,.61,.36,1), opacity 1.05s ease}

/* PC: “올인원 업무관리”는 인라인 */
.break-mobile{display:inline}

/* ====== Wedding options ====== */
.form-row .options--wedding{display:flex; flex-wrap:nowrap; gap:16px; align-items:center; justify-content:flex-start}
.form-row .options--wedding label{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; min-width:0}
.form-row .options--wedding .spacer{display:none}

/* ====== Center form submit button ====== */
.form-actions{display:flex; justify-content:center; align-items:center; margin-top:24px}
.form-actions .btn{margin:0 auto}

/* ====== Responsive ====== */
@media (max-width:768px){
  header .nav{padding-inline:max(12px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right)); gap:8px; justify-content:space-between}
  .menu{display:none !important}
  .logo img{height:32px}
  .logo{position:relative; left:-18px; display:inline-flex}
  .contact-num{font-size:clamp(12px, 3.3vw, 15px)}
  #home .eyebrow{margin-top:-12px; display:block}

  .container{width:100%}
  section{padding:calc(var(--header-h) + 16px) 16px 64px}
  #home{padding:calc(var(--header-h)) 0 56px}
  #home>.container{padding:0 16px}
  #home::before{background:var(--hero-img) 40% 50% / cover no-repeat}

  .break-mobile{display:block; margin-top:0}

  .card{padding:18px}
  .form-row{grid-template-columns:1fr}
  .form-row>label{line-height:1.3; margin-bottom:6px}

  .form-row .options--wedding{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:12px; row-gap:10px; justify-items:start; align-items:start}
  .form-row .options--wedding label{display:flex; align-items:flex-start; gap:6px; white-space:normal; min-width:0; line-height:1.35}

  #contact{padding-top:calc(var(--header-h) - 30px)}

  .section-head .lead{font-size:13px; line-height:1.5; gap:2px; margin:10px 0}
  .section-head .lead .est-1,.section-head .lead .est-2{display:block}
  .section-head .lead .est-2{margin-top:2px}

  .hero-sub.boxed, .hero-promo{width:min(var(--mo-banner-wvw), var(--mo-banner-max)); border-radius:26px}
  .hero-sub.boxed{flex-wrap:wrap; gap:0; text-align:center; padding:8px 14px; margin-top:12px}
  .hero-sub.boxed .break-mobile{display:block; flex:0 0 100%}
  .hero-promo{flex-direction:column; gap:0; padding:8px 14px; margin-top:14px; border-radius:28px}

  .btn.primary{width:min(var(--mo-banner-wvw), var(--mo-banner-max)); padding:16px 20px; font-size:17px}
  #home .cta{margin-top:52px}

  .form-actions{justify-content:center}
  .form-actions .btn{margin:0 auto}

  .scroll-btn{width:50px; height:50px}
}
@media (max-width:480px){
  header .nav{padding-inline:max(10px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right))}
  .contact-num{font-size:12.5px}
}
@media (max-width:380px){
  .title{font-size:38px}
  .section-head .lead{font-size:12.5px}
  .tagline{font-size:clamp(12px,2.2vw,24px); line-height:1.7}
}

/* 공통 보강 */
html,body{width:100%; max-width:100%; overflow-x:hidden}
img,video,canvas{max-width:100%; height:auto; display:block}

/* CTA 중앙 보강 */
#home .cta{display:flex !important; justify-content:center !important}
#home .cta .btn{margin:0 auto !important}