/* Base */
:root{
  --bg: #ffffff;           /* light background */
  --panel: #f7f8fa;        /* light panel */
  --text: #0f1115;         /* dark text */
  --muted: #4b5563;        /* muted gray (dark on light) */
  --accent: #0047AB;       /* cobalt blue */
  --accent-2: #3A66C1;     /* light cobalt secondary */
  --primary: var(--accent);
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,0.25);
  /* Doctors avatar size (desktop default). Adjust here for global change */
  --avatar-size: 200px;
}
*{box-sizing:border-box}
html,body{height:100%}
/* 인페이지 앵커 클릭 시 부드러운 스크롤 */
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Pretendard", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#ffffff 0%, #fbfbfc 40%, #f8fafc 100%);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1200px, 92%); margin:0 auto}

/* Utils */
.hidden{display:none !important}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.85);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid rgba(0,0,0,0.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:0.6px}
.brand-mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0b0f14;font-weight:800}
.brand-name{font-size:18px}

.nav{position:relative}
.nav-toggle{display:none;background:none;border:1px solid rgba(0,0,0,0.15);color:var(--text);padding:8px 10px;border-radius:10px}
.nav-list{list-style:none;display:flex;gap:26px;margin:0;padding:0;align-items:center}
.nav-list a{color:var(--muted)}
.nav-list a:hover{color:var(--text)}
.nav-list a.active{color:var(--text);font-weight:600}

.btn{display:inline-block;padding:10px 16px;border-radius:999px;border:1px solid rgba(0,0,0,0.14);transition:all .2s ease}
.btn.primary{background:linear-gradient(135deg,var(--accent), var(--accent-2)); color:#ffffff;border-color:transparent}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:#DDEEFF;color:var(--text)}
.btn.ghost:hover{background:rgba(0,0,0,0.06)}

/* Hero */
.hero{padding:72px 0 40px;background:radial-gradient(80% 60% at 80% 0%, rgba(0,71,171,0.18), rgba(58,102,193,0.08) 40%, transparent 70%)}
.hero-inner{display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center}
.hero h1{font-size:38px;line-height:1.2;margin:0 0 14px}
.hero .sub{font-weight:500;color:var(--muted);font-size:20px}
.hero p{color:var(--muted);max-width:52ch}
.hero .actions{margin-top:18px;display:flex;gap:12px}
.hero-visual{display:flex;justify-content:center}
.visual-card{width:100%;max-width:480px;aspect-ratio:4/5;border-radius:24px;background:linear-gradient(160deg,#ffffff,#f4f6f9 60%), url('https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?q=80&w=1200&auto=format&fit=crop') center/cover; box-shadow: var(--shadow); border:1px solid rgba(0,0,0,0.06)}
.accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Sections */
.section{padding:66px 0;border-top:1px solid rgba(0,0,0,0.06)}
.section.alt{background:linear-gradient(180deg,rgba(0,0,0,0.02), transparent)}
.section h2{font-size:26px;margin:0 0 18px;color:var(--accent)}
.section p{color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:var(--panel);border:1px solid rgba(0,0,0,0.06);border-radius:18px;padding:18px;box-shadow:0 8px 18px rgba(0,0,0,0.12)}
.card h3{margin:4px 0 10px;font-size:18px}
.card p{margin:0;color:var(--muted)}

/* Survey: 카드형 라디오 (예/아니오 등) */
.card-radio-group{display:flex;gap:5px;flex-wrap:wrap;}
.card-radio-group input[type="radio"]{position:absolute;opacity:0;width:0;height:0}
.card-radio{display:inline-flex;align-items:center;justify-content:center;padding:7px 7px;border:1.5px solid rgba(0,0,0,0.12);border-radius:12px;background:#fff;color:var(--text);cursor:pointer;min-width:60px;user-select:none;box-shadow:0 6px 14px rgba(0,0,0,0.06)}
.card-radio:hover{border-color:var(--accent);}
.card-radio:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card-radio-group input[type="radio"]:focus + .card-radio{box-shadow:0 0 0 3px rgba(0,71,171,0.18)}
.card-radio-group input[type="radio"]:checked + .card-radio{background:linear-gradient(135deg,var(--accent), var(--accent-2)); color:#fff; border-color:transparent}

/* Survey: Q3 상세 입력 영역 간격 */
.q3-details{margin-top:8px}

/* Survey: '임신에 대한 가족의 반응' 하위 항목 들여쓰기 */
.family-reaction-children{padding-left:24px}

/* Survey: 유산 - 임신순 옆에 자연/인공 라디오가 같은 줄에 보이도록(데스크톱 기본) */
    #abortion_extra,
    #stillbirth_extra,
    .medication-extra,
    #nausea_extra,
    #husband_reaction_extra,
    #self_reaction_extra,
    #abortion_type_extra,
    #stillbirth_reason_container{display:flex; align-items:center; gap:8px; flex-wrap:nowrap}
    #abortion_extra label,
    #stillbirth_extra label,
    .medication-extra label,
    #nausea_extra label,
    #husband_reaction_extra label,
    #self_reaction_extra label,
    #abortion_type_extra label,
    #stillbirth_reason_container label{display:inline-flex; align-items:center}
#abortion_type_group{display:flex; gap:12px; flex-wrap:nowrap; white-space:nowrap}
/* 유산: 이유 입력 줄(인공 선택 시)도 한 줄로 정렬하고 이유 입력을 넓게 */
#abortion_type_extra,
#stillbirth_reason_container{display:flex; align-items:center; gap:8px; flex-wrap:nowrap; width:100%}
#abortion_reason,
#stillbirth_reason{flex:1 1 auto; min-width:180px}

/* Contact */
/* 요청: contact-right를 아래로 내려 단일 컬럼으로 정렬 */
.contact-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.contact-left{display:flex;flex-direction:column}
.map-embed{width:100%;aspect-ratio:16/9;background:#eef2f7;border:1px solid rgba(0,0,0,0.06);border-radius:14px;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,0.12)}
.map-embed iframe{width:100%;height:100%;border:0;display:block}
/* Contact > 진료시간 카드: 목록과 안내문(p.note) 사이 간격 추가 */
#contact .card ul.bullets{margin-bottom:14px !important}

/* Doctors */
.profiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.profile{display:flex;gap:20px;align-items:flex-start;background:var(--panel);border:1px solid rgba(0,0,0,0.06);border-radius:18px;padding:18px;box-shadow:0 8px 18px rgba(0,0,0,0.12)}
.profile .avatar{width:var(--avatar-size);min-width:var(--avatar-size);aspect-ratio:1/1;border-radius:14px;background:#e9eef5 center/cover no-repeat;border:1px solid rgba(0,0,0,0.06)}
.profile .name{margin:0 0 6px;font-size:18px}
.profile .role{display:inline-block;margin-left:6px;font-size:14px;color:var(--muted);font-weight:500}
.profile .bullets{margin:8px 0 0 16px;color:var(--muted);line-height:1.65}
.profile .bullets li{margin:4px 0}
.profile .bio{margin:10px 0 0;color:var(--muted);line-height:1.7;font-size:16px;white-space:pre-line}
.note{margin-top:10px;color:var(--muted);font-size:13px}

/* Footer */
.site-footer{border-top:1px solid rgba(0,0,0,0.06);padding:28px 0;color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;gap:12px;align-items:center}
.footer-links{display:flex;gap:16px}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--text)}

.field-inline.medication-inline > label{flex:0 0 80px}
/* 산소호흡기 사용 라벨만 스타일 변경 */
.field-inline.medication-inline > label.wide-line{flex:0 0 120px}
.family-reaction-children .field-inline.medication-inline > label{flex:0 0 64px}
.inline-two .v-center{display:flex;align-items:center}
.inline-two .field-inline{display:flex;align-items:center}
.gender-inline{display:inline-flex;align-items:center;gap:6px}
/* 내부 텍스트 조각과 숫자 입력의 수직 중앙 정렬 보정 */
.gender-inline span,
.gender-inline label{display:inline-flex;align-items:center}

/* Responsive */
@media (max-width: 960px){
  /* Slightly reduce avatar on small screens but keep larger than before */
  :root{ --avatar-size: 160px; }
  .hero-inner{grid-template-columns:1fr;}
  .nav-toggle{display:inline-block}
  .nav-list{display:none;position:absolute;right:0;top:48px;background:var(--panel);border:1px solid rgba(0,0,0,0.08);border-radius:14px;padding:10px 12px;flex-direction:column;gap:10px;min-width:200px;box-shadow:var(--shadow)}
  .nav-list.show{display:flex}
  .cards{grid-template-columns:1fr}
  .profiles{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .map-embed{aspect-ratio:4/3}
  /* Stack avatar above text on mobile */
  .profile{flex-direction:column; align-items:flex-start}
  .profile .avatar{margin:0 auto 10px auto}
  .profile .bullets{margin-left:0}
  /* Footer: place footer-links under company info on mobile */
  .footer-inner{flex-direction:column; align-items:flex-start; gap:8px}
  .footer-links{margin-top:4px}

  /* Survey: 결혼 시 연령 입력을 모바일에서도 1줄 유지 */
  .marriage-age-label{margin-left:12px}
  .gender-inline{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap}

  /* Survey: 약복용(무/유) 모바일 배치 */
  /* 1) 무/유 라디오를 한 줄 유지 */
    #medication_intake_group,
  #disease_group,
  #shock_group,
  #nausea_group,
  #abortion_group,
  #stillbirth_group,
  #abortion_type_group{display:flex;gap:5px;flex-wrap:nowrap;white-space:nowrap}
/*  #planned_pregnancy_group .card-radio,
  #medication_intake_group .card-radio,
  #husband_reaction_group .card-radio,
  #disease_group .card-radio,
  #shock_group .card-radio,
  #nausea_group .card-radio,
  #abortion_group .card-radio,
  #stillbirth_group .card-radio,
  #abortion_type_group .card-radio,
  #dating_type_group .card-radio{min-width:60px;padding:8px 8px}*/
    .card-radio.input-button{padding:1px 5px 1px 1px}
  .medication-extra,
  #nausea_extra,
  #husband_reaction_extra,
  #self_reaction_extra,
  #abortion_extra,
  #stillbirth_extra,
  #abortion_type_extra,
  #stillbirth_reason_container{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;width:100%;padding-left:20px}
  .medication-extra label,
  #nausea_extra label,
  #husband_reaction_extra label,
  #self_reaction_extra label,
  #abortion_extra label,
  #stillbirth_extra label,
  #abortion_type_extra label,
  #stillbirth_reason_container label{display:inline-flex;align-items:center}
  /* 개월 입력은 좁게, 내용은 가변 폭 */
  .months-input{width:60px !important;min-width:60px !important;flex:0 0 60px !important}
  #medication_details,
  #disease_details,
  #shock_details,
  #nausea_details,
  #abortion_reason,
  #stillbirth_reason{flex:1 1 auto;min-width:120px}

  /* 약복용 영역: 부모 field-inline에서만 flex 해제하여 줄바꿈 유도 */
  /* 일부 전역 규칙에서 .field-inline에 display:flex를 강제하는 경우가 있어
     더 높은 특이성과 !important로 모바일에서만 강제 해제합니다. */
  .field-inline.medication-inline{display:block !important}
  /* 라디오와 추가 입력 사이 간격 안정화 */
  .field-inline.medication-inline #medication_intake_group,
  .field-inline.medication-inline #disease_group,
  .field-inline.medication-inline #shock_group,
  .field-inline.medication-inline #nausea_group,
  .field-inline.medication-inline #abortion_group,
  .field-inline.medication-inline #stillbirth_group,
  .field-inline.medication-inline #abortion_type_group{margin-bottom:6px}
  /* '임신에 대한 가족의 반응' 하위 항목 들여쓰기(모바일 약간 축소) */
  .family-reaction-children{padding-left:16px}

  /* Family reaction: 모바일에서 '기타' 입력을 가로 전체로 확장 */
  .family-reaction-children .field-inline.medication-inline label[for="family_reaction_etc"]{display:block;margin-bottom:6px}
  .family-reaction-children #family_reaction_etc{display:block;width:100%}

  /* 요구사항: 약복용/질환/충격/입덧 라벨 오른쪽에 무/유가 한 줄로 보이도록 재정렬 */
  /* 위에서 block으로 강제했던 것을 아래에서 다시 flex로 재정의하여 라벨과 라디오가 같은 줄에 오도록 함 */
  .field-inline.medication-inline{display:flex !important; align-items:center; gap:5px; flex-wrap:wrap}
  /*.field-inline.medication-inline > label{flex:0 0 64px}*/
  .field-inline.medication-inline .card-radio-group{flex:1 1 auto; min-width:180px}
  /* 추가 입력 영역은 이미 width:100%이므로 다음 줄로 내려가 가로 전체를 차지함 */

  /* 모바일: 유산에서 '인공' 선택 시 이유 입력은 아래 줄에 표시되도록 강제 */
  #abortion_extra,
  #stillbirth_extra{flex-wrap:wrap}
  #abortion_type_extra,
  #stillbirth_reason_container{flex-basis:100%}
}


/* Survey: 출생시 - 임신기간 오프셋 및 산모연령 입력 정렬 */
.gestation-offset-inline{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.card-radio .gestation-input {
    margin-right: 4px;
}
.card-radio-group input[type="radio"]:checked + .card-radio .gestation-input {
    border-color: rgba(255, 255, 255, 0.5);
}
.marriage-year-input{width:100px !important;min-width:100px !important;flex:0 0 100px !important}
.gestation-input,
.maternal-age-input,
.months-input,
.marriage-age-input{width:40px !important;min-width:40px !important;flex:0 0 40px !important;padding:0 4px !important;text-align:center}

@media (max-width: 960px){
  .field-inline.medication-inline.gestation-field{display:flex !important; flex-wrap:nowrap !important; align-items:center !important}
  .gestation-offset-inline{margin-top:0; margin-left:4px}
}