@charset "UTF-8";

:root{
  --contact-hero-title:clamp(3rem, 10vw, 8.75rem);
  --contact-reveal-ease:cubic-bezier(.2,.8,.2,1);
  --contact-max-wide:1800px;
}

html{scrollbar-gutter: stable;}

/* =========================================================
   Scroll Lock (prevents layout shift)
========================================================= */
html.is-scrollLocked,body.is-scrollLocked{overflow: hidden;}
body.is-scrollLocked{padding-right: var(--sbw,0px);}

/* =========================================================
   Modal (Contact Submit)
========================================================= */
.contact-modal{position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,.8);}
.contact-modal.is-open{display: flex;}
.contact-modal__card{width: min(370px,100%); border-radius: 18px; background: #fff; padding: var(--space-10); text-align: center; box-shadow: 0 24px 80px rgba(0,0,0,.18);}
.contact-modal__title{margin: 0 0 var(--space-3); font-size: clamp(1.125rem, 1.6vw, 1.625rem); font-weight: 700; color: var(--color-black);}
.contact-modal__desc{margin: 0 0 var(--space-fluid-40); line-height: 1.55; color: #666;}
.contact-modal__actions{display: flex; gap: 10px; justify-content: center;}

/* wide container (about class reuse, but padX 기준으로 통일) */
.about-container--wide{max-width: var(--contact-max-wide); margin: 0 auto; padding-left: var(--padX-desktop); padding-right: var(--padX-desktop);}

@media(max-width:768px){
  .about-container--wide{padding-left: var(--padX-mobile); padding-right: var(--padX-mobile);}
}

/* =========================================================
   Contact Hero
========================================================= */
.contact-hero{min-height: calc(100svh - var(--header-h)); display: flex; align-items: flex-end; padding: 0 0 var(--space-fluid-60); background: var(--color-white);}
.contact-hero__inner{width: 100%; padding-top: calc(var(--header-h) + var(--space-12));}
.contact-hero__eyebrow{margin-top: 0; margin-left: .8%; font-size: var(--fs-h6); font-weight: 700; letter-spacing: .02em; color: var(--color-black); margin-bottom: var(--space-3);}
.contact-hero__title{font-size: var(--contact-hero-title); line-height: 1.13; letter-spacing: -0.02em; font-weight: 900; color: var(--color-black); text-transform: uppercase; margin: 0;}
.contact-hero__title .w{display: inline-block; overflow: hidden; vertical-align: bottom;}
.contact-hero__title .w>i{display: inline-block; transform: translateY(120%); opacity: 0; will-change: transform,opacity; transition: transform 700ms var(--contact-reveal-ease),opacity 700ms var(--contact-reveal-ease);}
.contact-hero__title.is-animated .w>i{transform: translateY(0); opacity: 1;}
.contact-hero__title .w:last-of-type>i{color: var(--color-primary);}

/* =========================================================
   Body / Layout
========================================================= */
.contact-shell{background: var(--color-white);}
.contact-container{max-width: 1280px; margin: 0 auto; padding-left: var(--padX-desktop); padding-right: var(--padX-desktop); padding-top: var(--space-section-lg); padding-bottom: var(--space-section-xl); width: 100%;}

@media(max-width:768px){
  .contact-container{padding-left: var(--padX-mobile); padding-right: var(--padX-mobile);}
}

.contact-grid{display: grid; grid-template-columns: minmax(0,360px) minmax(0,720px); gap: clamp(40px,3vw,60px); justify-content: center; max-width: 1280px; align-items: start;}
.contact-left{max-width: 360px; min-width: 0;}
.contact-right{min-width: 0;}

.contact-desc{font-size: var(--fs-h3); font-weight: 700; line-height: 1.4; margin: 0;}
.contact-form{max-width: 720px; position: relative;}
.contact-hp{position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;}

/* =========================================================
   Viewport / Stage
========================================================= */
.contact-viewport{position: relative; overflow: visible; border-radius: 22px; padding: 0; background: transparent; border: 0;}
.contact-stage{position: relative; padding: 0;}
.contact-panel{position: sticky; top: calc(var(--header-h) + 10px); z-index: 5; background: var(--color-white);}
.contact-feed{margin-top: var(--space-fluid-60); display: flex; flex-direction: column; gap: 10px; padding: 0 0 20px;}

/* =========================================================
   Card / Field
========================================================= */
.c-label{display: block; margin: 0 0 var(--space-1); font-size: var(--fs-body-lg); font-weight: 700; color: var(--color-black);}
.c-field{position: relative;}

.c-input,.c-textarea{width: 100%; border: 1px solid rgba(11,25,60,.18); border-radius: 8px; padding: 14px 46px 14px 16px; font: inherit; color: var(--color-secondary); background: #fff; outline: none;}
.c-input:focus,.c-textarea:focus{border-color: rgba(11,25,60,.45);}
.c-input[type="month"]{padding-right: 46px;}

/* 옵션들을 세로 카드 리스트로 */
.c-fieldset{display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; margin: 0;}
.c-fieldset .c-chip{width: 100%;}
.c-legend{font-size: var(--fs-body-lg); font-weight: 700; margin: 0 0 var(--space-3); color: var(--color-black);}
.c-chip{position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(11,25,60,.14); background: rgba(11,25,60,.03); cursor: pointer; user-select: none; transition: background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease; color: var(--color-secondary); font-weight: 800; line-height: 1.2;}
.c-chip:hover{transform: translateY(-1px); border-color: rgba(11,25,60,.22); background: rgba(11,25,60,.05); box-shadow: 0 10px 24px rgba(11,25,60,.06);}

/* 라디오 숨김(동작 유지) */
.c-chip>input[type="radio"]{position: absolute; inset: 0; opacity: 0; pointer-events: none;}

/* 선택 상태 */
.c-chip:has(>input[type="radio"]:checked){border-color: rgba(73,248,196,.8); background: rgba(73,248,196,.5); box-shadow: 0 12px 28px rgba(11,25,60,.10);}

/* 키보드 포커스(접근성) */
.c-chip:has(>input[type="radio"]:focus-visible){outline: 2px solid rgba(11,25,60,.35); outline-offset: 2px;}

.c-schedule{margin-top: var(--space-8); padding: var(--space-8); border-radius: 8px; border: 1px solid rgba(11,25,60,.14); background: rgba(11,25,60,.03);}
.c-schedule[aria-hidden="true"]{display: none;}
.c-hint{margin: 0 0 var(--space-8); padding-bottom: var(--space-4); color: var(--color-black); opacity: .8; font-size: var(--fs-body-lg); font-weight: 700; border-bottom: 1px solid var(--color-gray400);}
.c-row{display: flex; gap: 14px; flex-wrap: wrap;}
.c-col{flex: 1 1 240px;}

.c-status{position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 999px; border: 2px solid rgba(11,25,60,.22); opacity: 0; transition: opacity 180ms ease,border-color 180ms ease,background 180ms ease,transform 180ms ease;}
.c-status::after{content: ""; position: absolute; inset: 0; display: block; mask-repeat: no-repeat; mask-position: center; mask-size: 14px 14px; background: transparent;}
.c-field.is-touched .c-status{opacity: 1;}
.c-field.is-valid .c-status{border-color: #16a34a; background: rgba(22,163,74,.10); transform: translateY(-50%) scale(1.02);}
.c-field.is-invalid .c-status{border-color: var(--color-primary); background: rgba(220,38,38,.10); transform: translateY(-50%) scale(1.02);}

.c-field.is-valid .c-status::after{background: #16a34a; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M8.3 14.3L3.7 9.7l1.4-1.4 3.2 3.2 6.7-6.7 1.4 1.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M8.3 14.3L3.7 9.7l1.4-1.4 3.2 3.2 6.7-6.7 1.4 1.4z'/%3E%3C/svg%3E");}
.c-field.is-invalid .c-status::after{background: var(--color-primary); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M5.3 4.7L10 9.4l4.7-4.7 1.4 1.4L11.4 10l4.7 4.7-1.4 1.4L10 11.4l-4.7 4.7-1.4-1.4L8.6 10 3.9 5.3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M5.3 4.7L10 9.4l4.7-4.7 1.4 1.4L11.4 10l4.7 4.7-1.4 1.4L10 11.4l-4.7 4.7-1.4-1.4L8.6 10 3.9 5.3z'/%3E%3C/svg%3E");}

.c-field.is-invalid .c-input,.c-field.is-invalid .c-textarea{border-color: rgba(220,38,38,.55);}
.c-field.is-valid .c-input,.c-field.is-valid .c-textarea{border-color: rgba(22,163,74,.35);}

/* =========================================================
   Buttons (+ Arrow)
========================================================= */
.c-next{margin-top: var(--space-5); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 20px; border-radius: 999px; border: 0; background: var(--color-secondary); color: var(--color-white); font-size: var(--fs-body-md); font-weight: 800; cursor: pointer; transition: transform .18s ease,background .18s ease,color .18s ease;}
.c-next:hover{transform: translateY(-1px); background: var(--color-accent); color: var(--color-secondary);}
.c-next:disabled{opacity: .45; cursor: not-allowed; transform: none;}
.c-next .c-arrow{width: 14px; height: 14px; display: block;}
.c-next--primary{background: var(--color-primary); color: var(--color-white);}
.c-next--primary:hover{background: var(--color-secondary); color: var(--color-white);}

/* =========================================================
   Feed item
========================================================= */
.feed-item{border-radius: 8px; background: #fff; border: 1px solid rgba(11,25,60,.10); padding: 20px; cursor: pointer; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.feed-item:hover{transform: translateY(-1px); border-color: rgba(11,25,60,.22); box-shadow: 0 10px 24px rgba(11,25,60,.08);}
.feed-top{display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.feed-key{font-size: var(--fs-body-lg); font-weight: 800; color: var(--color-black); letter-spacing: -0.01em;}
.feed-edit{font-size: var(--fs-body-sm); color: rgba(11,25,60,.55); font-weight: 900;}
.feed-val{margin: 8px 0 0; font-size: var(--fs-body-lg); color: rgba(11,25,60,.85); line-height: 1.5; word-break: break-word;}
.feed-item.is-active{border-color: rgba(11,25,60,.32); box-shadow: 0 12px 28px rgba(11,25,60,.10);}

.contact-privacy{margin: var(--space-4) 0 0; font-size: var(--fs-body-xs); color: var(--color-gray500);}

/* =========================================================
   Assistant
========================================================= */
.assist-card{position: sticky; top: calc(var(--header-h) + 18px); border-radius: 22px; padding: 18px; background: rgba(11,25,60,.02); border: 1px solid rgba(11,25,60,.08); overflow: hidden; margin-top: clamp(14px,2vw,22px);}
.assist-mascot{display: block; width: min(520px,100%); height: auto; margin: 10px auto 0; transform-origin: 50% 80%; animation: assistNod 2.2s ease-in-out infinite;}

@keyframes assistNod{
  0%,100%{transform: translateY(0) rotate(0deg);}
  25%{transform: translateY(1px) rotate(-1.2deg);}
  55%{transform: translateY(0) rotate(1.2deg);}
  75%{transform: translateY(1px) rotate(-.6deg);}
}

.assist-bubble{position: absolute; top: 14px; left: 14px; width: 56px; height: 56px; border-radius: 18px; background: #fff; border: 1px solid rgba(11,25,60,.10); box-shadow: 0 10px 24px rgba(11,25,60,.08); display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--color-secondary);}
.assist-bubble::after{content: ""; position: absolute; left: 16px; bottom: -10px; width: 14px; height: 14px; background: #fff; border-left: 1px solid rgba(11,25,60,.10); border-bottom: 1px solid rgba(11,25,60,.10); transform: rotate(45deg);}
.assist-q,.assist-e{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.625rem; line-height: 1; letter-spacing: -0.02em;}
.assist-q{opacity: 1; animation: bubbleSwapQ 3.2s ease-in-out infinite;}
.assist-e{opacity: 0; animation: bubbleSwapE 3.2s ease-in-out infinite;}

@keyframes bubbleSwapQ{
  0%,55%{opacity: 1; transform: scale(1);}
  70%,100%{opacity: 0; transform: scale(.96);}
}
@keyframes bubbleSwapE{
  0%,60%{opacity: 0; transform: scale(.96);}
  75%,100%{opacity: 1; transform: scale(1);}
}

/* =========================================================
   Media Queries
========================================================= */
@media(max-width:960px){
  .contact-grid{grid-template-columns: 1fr;}
  .contact-left{order: -1; width: 100%; max-width: none; padding-bottom: var(--space-fluid-40); border-bottom: 1px solid var(--color-gray400);}
  .contact-right{order: 0;}
  .contact-form{width: 100%; max-width: none;}
  .assist-card{position: relative; top: auto;}
}
@media(max-width:30em){
  .contact-hero__title{font-size: var(--fs-h2);}
}
@media(prefers-reduced-motion:reduce){
  .contact-hero__title .w>i{transition: none; transform: none; opacity: 1;}
  .c-status,.c-next,.feed-item,.assist-mascot,.assist-q,.assist-e{transition: none; animation: none;}
}

/* Contact: display / headline */
.contact-hero__eyebrow,.contact-hero__title,.contact-desc,.contact-modal__title{font-family: var(--font-display);}

/* Contact: body copy */
.contact-modal__desc,.c-hint,.feed-val,.contact-privacy{font-family: var(--font-body);}