/* ============================================================
   DETAIL PAGE — 공통 스타일 (detail.css)
   컬러: 화이트 #ffffff / 그린 #77ac8e / 밝은그레이 #f5f5f5 / 블랙 #111111
   영문폰트: Cormorant Garamond / 한글폰트: Noto Sans KR
   ============================================================ */

/* Noto Sans KR 웹폰트 */
@font-face {
  font-family:'Noto Sans KR';
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/noto-sans-kr:vf@5.2.10/korean-wght-normal.woff2') format('woff2-variations');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

/* ── CSS 변수 ── */
:root {
  --color-white:#ffffff;
  --color-green:#77ac8e;
  --color-green-light:#eef4f1;
  --color-gray-light:#f5f5f5;
  --color-gray-mid:#e4e4e4;
  --color-gray-text:#888888;
  --color-black:#111111;
  --font-en:'Cormorant Garamond', Georgia, serif;
  --font-ko:'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --section-padding:130px 0;
  --inner-max:1400px;
  --inner-pad:0 60px;
  --radius:16px;
}

/* ── 기본 재정의 ── */
body {font-family:var(--font-ko);font-size:16px;color:var(--color-black);background:var(--color-white);line-height:1.7;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;}
img {max-width:100%;height:auto;display:block;}
a {color:inherit;text-decoration:none;}
button {background:none;border:none;cursor:pointer;font-family:inherit;}

/* ── 공통 섹션 이너 ── */
.section-inner {max-width:var(--inner-max);margin:0 auto;padding:var(--inner-pad);}

/* ── 공통 섹션 헤더 블록 ── */
.section-header-block {text-align:center;margin-bottom:72px;}

/* ── 공통: 서브라벨 (섹션 타이틀 위 영문 소자) ── */
.sub-label {font-family:var(--font-en);font-size:11px;font-weight:400;color:var(--color-green);display:block;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.4em;}

/* ── 공통: 섹션 타이틀 (한글, 40px 통일) ── */
.sub-section-title {font-family:var(--font-ko);font-size:40px;font-weight:500;color:var(--color-black);line-height:1.35;margin-bottom:16px;}

/* ── 공통: 섹션 서브타이틀 (20px 통일) ── */
.sub-section-subtitle {font-family:var(--font-ko);font-size:20px;font-weight:400;color:var(--color-gray-text);line-height:1.6;}

/* ── 강조 서브타이틀 (그린, 400, 20px) ── */
.accent-subtitle {font-size:20px !important;font-weight:400 !important;color:var(--color-green) !important;}

/* ============================================================
   SECTION 1: INTRO
   ============================================================ */
.section-intro {position:relative;width:100%;height:100vh;min-height:600px;max-height:860px;margin-top:-76px;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:#c8c4be;}
.section-intro::before {content:'';position:absolute;inset:0;background-image:url('../images/ulthera-hero-bg.jpg');background-size:cover;background-position:center;z-index:0;filter:brightness(1.08) contrast(1.05) saturate(1.05);}
.intro-overlay {position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0.12) 0%,rgba(0,0,0,0.26) 100%);}
.intro-content {position:relative;z-index:2;text-align:center;padding:0 24px;}
.intro-label {font-family:var(--font-en);font-size:14px;font-weight:300;color:rgba(255,255,255,0.92);display:block;margin-bottom:22px;text-transform:uppercase;letter-spacing:0.55em;}
.intro-title {font-family:var(--font-ko);font-size:clamp(40px, 5.5vw, 68px);font-weight:500;color:var(--color-white);line-height:1.2;margin-bottom:28px;}
.intro-sub {font-family:var(--font-ko);font-size:clamp(15px, 1.4vw, 18px);font-weight:400;color:rgba(255,255,255,0.9);line-height:2.0;word-break:keep-all;}
.intro-scroll-indicator {position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2;}
.scroll-line {display:block;width:1px;height:44px;background:linear-gradient(to bottom,rgba(255,255,255,0.75),rgba(255,255,255,0));animation:scrollDown 2s ease-in-out infinite;}
.scroll-text {font-family:var(--font-en);font-size:10px;font-weight:300;color:rgba(255,255,255,0.6);text-transform:lowercase;letter-spacing:0.15em;}
@keyframes scrollDown {0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ============================================================
   SECTION 2: ABOUT
   ============================================================ */
.section-about {padding:var(--section-padding);background:var(--color-white);}
.about-grid {display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.about-figure {margin:0;overflow:hidden;border-radius:var(--radius);}
.about-img {width:100%;height:540px;object-fit:cover;transition:transform 0.8s ease;}
.about-img:hover {transform:scale(1.02);}
.about-text-wrap {padding-left:20px;}
.about-desc {margin-top:32px;}
.about-desc p {font-family:var(--font-ko);font-size:17px;font-weight:300;color:var(--color-black);line-height:1.9;margin-bottom:22px;opacity:0.82;word-break:keep-all;}
.about-desc p:last-child {margin-bottom:0;}

/* ============================================================
   SECTION 3: PRINCIPLE (가로 4열 카드)
   ============================================================ */
.section-principle {padding:var(--section-padding);background:var(--color-gray-light);}
.principle-steps {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.principle-step {display:flex;flex-direction:column;background:var(--color-white);border-radius:var(--radius);overflow:hidden;}
.step-image-wrap {overflow:hidden;flex-shrink:0;}
.step-img {width:100%;height:240px;object-fit:cover;transition:transform 0.7s ease;display:block;}
.step-img:hover {transform:scale(1.04);}
.step-content {padding:28px 28px 32px;flex:1;display:flex;flex-direction:column;gap:10px;}
.step-num {font-family:var(--font-ko);font-size:16px;font-weight:500;color:var(--color-green);display:block;}
.step-num em {font-style:normal;font-size:16px;font-family:var(--font-ko);}
.step-title {font-family:var(--font-ko);font-size:20px;font-weight:500;color:var(--color-black);line-height:1.4;margin:0;}
.step-desc {font-family:var(--font-ko);font-size:17px;font-weight:300;color:var(--color-black);line-height:1.75;opacity:0.72;word-break:keep-all;margin:0;}

/* ============================================================
   SECTION 4: TECH
   ============================================================ */
.section-tech {padding:var(--section-padding);background:var(--color-white);}
.tech-cards {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.tech-card {position:relative;padding:100px 28px 40px;background:var(--color-gray-light);border-radius:var(--radius);text-align:left;transition:background 0.3s ease;cursor:default;overflow:hidden;}
.tech-card:hover {background:var(--color-green);}
.tech-card:hover .tech-icon {color:var(--color-white);}
.tech-card:hover .tech-num {color:rgba(255,255,255,0.75);}
.tech-card:hover .tech-title {color:var(--color-white);}
.tech-card:hover .tech-desc {color:var(--color-white);opacity:0.9;}
/* 아이콘 우측 상단 고정 */
.tech-icon {position:absolute;top:28px;right:28px;width:60px;height:60px;color:var(--color-green);transition:color 0.3s;display:flex;align-items:center;justify-content:flex-end;}
.tech-num {font-family:var(--font-ko);font-size:30px;font-weight:600;color:var(--color-green);display:block;margin-bottom:14px;line-height:1;transition:color 0.3s;}
.tech-title {font-family:var(--font-ko);font-size:20px;font-weight:500;color:var(--color-black);margin-bottom:16px;line-height:1.45;transition:color 0.3s;word-break:keep-all;}
.tech-desc {font-family:var(--font-ko);font-size:17px;font-weight:300;color:var(--color-black);line-height:1.75;opacity:0.72;transition:color 0.3s,opacity 0.3s;word-break:keep-all;}

/* ============================================================
   SECTION 5: EFFECT
   ============================================================ */
.section-effect {padding:var(--section-padding);background:var(--color-gray-light);}
.effect-list {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.effect-item {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:44px 20px 40px;background:var(--color-white);border-radius:var(--radius);border:3px solid rgba(119,172,142,0.3);text-align:center;transition:background 0.3s ease,border-color 0.3s ease;cursor:default;}
.effect-item:hover {background:var(--color-green);border-color:var(--color-green);}
.effect-item:hover .effect-icon {color:var(--color-white);}
.effect-item:hover .effect-num {color:var(--color-white);}
.effect-item:hover .effect-text {color:var(--color-white);}
.effect-icon {display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--color-green);transition:color 0.3s;flex-shrink:0;}
/* EFFECT 01 순번 텍스트 */
.effect-num {font-family:var(--font-ko);font-size:16px;font-weight:400;color:var(--color-green);line-height:1;transition:color 0.3s;}
.effect-text {font-family:var(--font-ko);font-size:19px;font-weight:400;color:var(--color-black);line-height:1.5;transition:color 0.3s;word-break:keep-all;}

/* ============================================================
   SECTION 6: RECOMMEND
   ============================================================ */
.section-recommend {padding:var(--section-padding);background:var(--color-white);}
.recommend-grid {display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.recommend-figure {margin:0;overflow:hidden;border-radius:var(--radius);}
.recommend-img {width:100%;height:640px;object-fit:cover;object-position:top center;transition:transform 0.8s ease;}
.recommend-img:hover {transform:scale(1.02);}
.recommend-text-wrap {padding-right:20px;}
.recommend-list {list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:0;}
.recommend-item {display:flex;align-items:flex-start;gap:14px;padding:18px 0;border-bottom:1px solid var(--color-gray-mid);font-family:var(--font-ko);font-size:17px;font-weight:300;color:var(--color-black);line-height:1.65;word-break:keep-all;}
.recommend-item:first-child {border-top:1px solid var(--color-gray-mid);}
.recommend-check {font-family:var(--font-en);font-size:18px;color:var(--color-green);flex-shrink:0;line-height:1.65;font-weight:600;}

/* ============================================================
   SECTION 7: Q&A
   ============================================================ */
.section-qna {padding:var(--section-padding);background:var(--color-gray-light);position:relative;overflow:hidden;}
.section-qna::before {content:'';position:absolute;inset:0;background-image:url('../images/jeju-bg.png');background-size:cover;background-position:center 40%;z-index:0;filter:brightness(0.45);}
.section-qna .section-inner {position:relative;z-index:1;}
.section-qna .sub-label {color:#86cc9b;}
.section-qna .sub-section-title {color:#ffffff;}
.section-qna .sub-section-subtitle {color:rgba(255,255,255,0.82);}
.qna-wrap {max-width:900px;margin:0 auto;}
.qna-item {background:rgba(0,0,0,0.4);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;}
.qna-question {width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 36px;background:none;border:none;cursor:pointer;text-align:left;}
.qna-q-text {font-family:var(--font-ko);font-size:20px;font-weight:400;color:#86cc9b;margin:0;line-height:1.55;flex:1;word-break:keep-all;}
.qna-toggle {display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;color:#86cc9b;transition:transform 0.3s ease;}
.qna-question[aria-expanded="true"] .qna-toggle {transform:rotate(180deg);}
.qna-answer {display:none;padding:0 36px 30px;}
.qna-answer:not([hidden]) {display:block;}
.qna-answer p {font-family:var(--font-ko);font-size:17px;font-weight:300;color:#ffffff;line-height:1.9;opacity:0.9;margin:0;padding-top:16px;border-top:1px solid rgba(255,255,255,0.1);word-break:keep-all;}

/* ============================================================
   TOP BUTTON
   ============================================================ */
#top-btn {position:fixed;bottom:32px;right:32px;z-index:500;width:46px;height:46px;background:var(--color-white);border:1px solid var(--color-gray-mid);color:var(--color-black);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s,background 0.3s;border-radius:50%;}
#top-btn.visible {display:flex;opacity:1;}
#top-btn:hover {background:var(--color-green);border-color:var(--color-green);color:var(--color-white);}

/* ============================================================
   애니메이션 (Fade In Up)
   ============================================================ */
.fade-in-up {opacity:0;transform:translateY(28px);transition:opacity 0.65s ease,transform 0.65s ease;}
.fade-in-up.visible {opacity:1;transform:translateY(0);}

/* ============================================================
   RESPONSIVE — WIDE (max 1500px)
   ============================================================ */
@media (max-width:1500px) {
  :root {--inner-max:1280px;--inner-pad:0 48px;}
}

/* ============================================================
   RESPONSIVE — TABLET (max 1100px)
   ============================================================ */
@media (max-width:1100px) {
  :root {--inner-pad:0 40px;}
  .sub-section-title {font-size:32px;}
  .tech-cards {grid-template-columns:repeat(2,1fr);}
  .effect-list {grid-template-columns:repeat(2,1fr);}
  .about-grid {grid-template-columns:1fr;gap:48px;}
  .about-text-wrap {padding-left:0;}
  .about-img {height:420px;}
  .recommend-grid {grid-template-columns:1fr;gap:48px;}
  .recommend-text-wrap {padding-right:0;}
  .recommend-img {height:420px;}
  .principle-steps {grid-template-columns:repeat(2,1fr);}
  .step-img {height:220px;}
}

/* ============================================================
   RESPONSIVE — MOBILE (max 768px)
   ============================================================ */
@media (max-width:768px) {
  :root {--section-padding:80px 0;--inner-pad:0 20px;}
  .section-intro {height:100svh;min-height:540px;max-height:760px;margin-top:-64px;}
  .intro-label {font-size:11px;letter-spacing:0.4em;}
  .intro-title {font-size:clamp(32px,8vw,48px);}
  .intro-sub {font-size:15px;}
  .section-header-block {margin-bottom:48px;}
  .sub-section-title {font-size:26px;}
  .sub-section-subtitle {font-size:17px;}
  .accent-subtitle {font-size:17px !important;}
  .about-desc p,.step-desc,.tech-desc,.recommend-item,.qna-answer p {font-size:16px;}
  .effect-text {font-size:17px;}
  .tech-cards {grid-template-columns:1fr;}
  .effect-list {grid-template-columns:repeat(2,1fr);gap:14px;}
  .effect-item {padding:32px 12px 28px;}
  .about-img {height:420px;}
  .recommend-img {height:480px;}
  .principle-steps {grid-template-columns:1fr;}
  .step-img {height:300px;}
  .qna-question {padding:22px 20px;}
  .qna-answer {padding:0 20px 22px;}
  .qna-q-text {font-size:16px;}
  .tech-num {font-size:24px;}
  .step-num,.step-title {font-size:17px;}
  #top-btn {bottom:20px;right:20px;}
}

@media (max-width:480px) {
  .effect-list {grid-template-columns:1fr 1fr;}
  .effect-item {padding:26px 10px 22px;}
  .effect-text {font-size:16px;}
  .recommend-item {font-size:15px;}
  .step-content {padding:20px 18px 24px;}
}