@charset "UTF-8";

/* ===================================================================
   flat_wart_pc.css + flat_wart_mobile.css 통합본.
   index.php(PC)와 index_m.php(모바일)가 이 파일 하나만 링크합니다.

   구조: 이 파일은 "모바일 우선"으로 작성되어 있습니다 — 미디어쿼리
   없는 기본 규칙이 곧 모바일(≤1024px) 스타일이고, 각 섹션 끝에 있는
   @media (min-width: 1025px) 블록이 데스크톱 전용 값으로 덮어씁니다.

   단, GNB/레이저 장비/Total Care 카드처럼 index.php와 index_m.php의
   HTML 마크업 자체가 다른 부분(예: 모바일은 <nav id="gnb"> 자체가 없고,
   레이저는 배경이미지 vs <img> 태그로 서로 다른 기법을 씀)은 클래스명이
   겹치지 않으므로, 두 세트의 규칙이 서로 간섭 없이 나란히 공존합니다.
   =================================================================== */

:root {
    --flat-primary: #05C4C4;
    --flat-accent: #40E0D0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    color: #222;
    line-height: 1.5;
    font-size: 15px;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
li {
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
}

picture {
    display: block;
}

/* ===== HEADER ===== */
#header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.header-top {
    width: 100%;
    height: 65px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo img {
    width: 160px;
}

.header-util {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tel-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--flat-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tel-btn img {
    width: 16px;
}

.tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.header-util .tel-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 0;
}

/* PC 헤더의 "전화번호 텍스트(.pc-only)" / "아이콘만(.mo-only)" 토글.
   index_m.php에는 이 클래스를 쓰는 요소 자체가 없어서 아래 두 규칙은
   index.php에서만 의미가 있음 */
.pc-only {
    display: none;
}

.mo-only {
    display: inline-flex;
}

.main-btn {
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--flat-primary);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-weight: 600;
    font-size: 14px;
    transition: 0.2s;
}

.main-btn:hover {
    background: #40E0D0;
    border-color: #40E0D0;
    color: #fff;
}

/* ===== GNB (index_m.php에는 <nav id="gnb">가 아예 없어서 이 규칙들은
   index.php 전용. 1024px 이하에서는 하단 퀵메뉴로 대체하므로 숨김) ===== */
#gnb {
    display: none;
}

/* ===== 앵커 이동 시 헤더에 가리지 않게 (모바일 헤더 높이 기준) ===== */
#flat-wart,
#guide,
#solution,
#faq,
#location {
    scroll-margin-top: 115px;
}

/* ===== HERO =====
   실제 원본 사이트를 1024/997/483/390px에서 직접 실측해서 잡은 값:
   텍스트는 좌측 정렬(좌측에서 약 9% 지점부터 시작), h1 라인1≈7.25vw,
   라인2≈6vw. index_m.php에는 .visual-inner 래퍼가 없고 .visual-btn이
   .visual-copy의 형제 요소라 위치 기준(containing block)에 문제가 없고,
   index.php는 .visual-btn이 .visual-copy 안에 있어 별도 처리가 필요함
   (아래 .visual-copy position:static 참고) */
.visual-section {
    position: relative;
    aspect-ratio: 1537 / 1865;
    background-color: #3a3f42;
    background-image: var(--visual-bg, none);
    background-size: cover;
    background-position: center;
}

.visual-inner {
    width: 100%;
    min-width: 0;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 12% 11% 90px 9%;
}

.visual-copy {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-left: 0;
    color: #fff;
    text-align: left;
    /* index_m.php에는 .visual-inner 래퍼가 없어서(.visual-copy가
       .visual-section의 바로 아래 자식) 상단/좌우 여백을 여기 직접 줌.
       index.php처럼 .visual-inner 안에 있을 때는 아래 .visual-inner
       .visual-copy 규칙이 중복 적용을 막음(그쪽은 .visual-inner 자체의
       padding이 이미 이 역할을 함) */
    padding: 12% 11% 24px 9%;
    /* .visual-btn이 이 요소 안에 있는 index.php에서, position:absolute인
       버튼의 기준(containing block)이 짧은 .visual-copy가 아니라 전체
       높이를 가진 .visual-inner가 되도록 relative를 해제함 */
    position: static;
}

.visual-inner .visual-copy {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

/* "번지는" 각 글자 바로 위에 점 하나씩(원본 이미지를 실측하면 점 3개의
   중심이 각각 번/지/는 글자 중심과 정확히 일치함). em 단위라 h1
   font-size가 반응형으로 바뀌어도 함께 스케일됨 */
.dot-char {
    position: relative;
    display: inline-block;
}

.dot-char::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: 0.12em;
    width: 0.16em;
    height: 0.16em;
    border-radius: 50%;
    background: #fff;
}

.visual-copy h1 {
    /* 600~1024px 구간 절충값(46px) — 히어로는 시각적 임팩트가 커서
       다른 항목보다 여유를 더 둠 */
    font-size: clamp(24px, 8vw, 46px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.07em;
    text-shadow: 0 3px 10px rgba(0, 0, 0, .45);
    word-break: keep-all;
}

.visual-copy h1 strong {
    display: block;
    margin-top: 6px;
    font-weight: 400;
    /* 600~1024px 구간 절충값(46px) */
    font-size: clamp(20px, 6vw, 46px);
    line-height: 1.35;
    text-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}

.visual-tags {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.visual-tags span {
    padding: 6px 12px;
    border: 1px solid #6fdbd2;
    border-radius: 30px;
    color: #fff;
    font-weight: 600;
    font-size: clamp(11px, 1.7vw, 17px);
}

.visual-copy p {
    /* 600~1024px 구간 절충값(19px) */
    font-size: clamp(15px, 2.41vw, 19px);
    line-height: 1.75;
    font-weight: 400;
    letter-spacing:-0.05rem;
    margin-left: 0;
    word-break: keep-all;
}

/* 전화문의 버튼: 원본 실측 결과 997~390px 전 구간에서 18px 고정 */
.visual-btn {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 18%;
    transform: translateX(-50%);
    width: 43%;
    max-width: 300px;
    padding: 15px 0;
    border-radius: 50px;
    background: #40E0D0;
    color: #3F3F3F;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.02em;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: 0.2s;
}

.visual-btn:hover {
    background: #25b3a6;
}

/* ===== 편평사마귀란 / 치료솔루션 / 시술가이드 / Why / FAQ 공통 =====
   index_m.php는 <div class="fw-inner"> 래퍼가 없어서(내용이 <section
   class="fw-section">의 바로 아래 자식) 패딩을 .fw-section에 직접 줌.
   index.php는 fw-inner가 항상 존재하므로 아래 두 규칙이 함께 적용됨 */
.fw-section {
    padding: clamp(30px, 7.8125vw, 60px) clamp(10px, 2.604vw, 20px);
    word-break: keep-all;
}

.fw-inner {
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
    word-break: keep-all;
}

.fw-inner span {
    font-weight: 500;
}

.fw-eyebrow {
    text-align: center;
    /* 600~1024px 구간은 아직 모바일형 넓은 1단 레이아웃이라 PC 규칙(15px)
       그대로 맞추면 휑해 보여서 17px로 절충 */
    font-size: clamp(11px, 2.8776vw, 17px);
    font-weight: 500;
    color: #666;
    margin-bottom: 10px;
}

/* 원본 flat_wart_about_mo.png의 "편평사마귀" 타이틀을 실측(≈8vw)한 값.
   편평사마귀란/시술가이드/Why/치료솔루션 타이틀 모두 원본에서는 래스터
   이미지의 일부라 이 비율로 통일 적용 */
.fw-title {
    text-align: center;
    /* 600~1024px 구간은 아직 모바일형 레이아웃이라 PC 값(53px)만으로는
       휑해 보여서 56px로 절충 (원래의 60px보다는 작아 768px 부근 줄바뀜
       문제는 피하면서, PC 전환 시 단절도 최소화) */
    font-size: clamp(20px, 10vw, 56px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.05rem;
    color: #2b2b2b;
    margin-bottom: 36px;
}

.fw-title--accent {
    color: var(--flat-primary);
}

.fw-desc {
    max-width: clamp(343px, 88.0208vw, 676px);
    margin: 0 auto 40px;
    text-align: center;
    /* 600~1024px 구간은 아직 모바일형 레이아웃이라 PC 값(15px)만으로는
       너무 작아 보여서 17px로 절충 */
    font-size: clamp(15px, 2.41vw, 17px);
    line-height: 1.8;
    font-weight: 400;
    color: #666;
}

/* 원본 "내 피부의 불청객, 편평사마귀일까요?" 실측(≈10vw) */
.fw-sub-title {
    text-align: center;
    /* 600~1024px 구간 절충값(56px) — .fw-title과 동일한 사유 */
    font-size: clamp(20px, 10vw, 56px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.05rem;
    color: #2b2b2b;
    margin-bottom: 34px;
}

.fw-sub-title strong {
    font-weight: 800;
    color: var(--flat-primary);
}

/* ===== 편평사마귀란 1 ===== */
.fw-about-1 {
    background: #dee1e6;
}

.fw-card-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
}

.fw-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(14px, 4.6875vw, 27px);
    padding: clamp(22px, 6.25vw, 48px) clamp(20px, 5.9375vw, 34px);
    background: #f2f3f5;
    border-radius: 16px;
    text-align: left;
    word-break: keep-all;
}

.fw-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: clamp(38px, 10.1563vw, 62px);
    height: clamp(38px, 10.1563vw, 62px);
    margin-bottom: 0;
}

.fw-icon svg,
.fw-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fw-card p {
    /* 600~1024px 구간 절충값(17px) */
    font-size: clamp(15px, 2.9167vw, 17px);
    line-height: 1.7;
    color: #444;
    letter-spacing: -0.02em;
}

.fw-card strong {
    color: var(--flat-primary);
}

/* ===== 편평사마귀란 2 (증상 + 유사질환, 배경 사진 1장 공유) ===== */
.fw-about-2 {
    position: relative;
    background-color: #d9dadb;
    background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)), var(--about-bg, none);
    background-size: cover;
    background-position: center bottom;
}

.fw-symptom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(17px, 4.375vw, 34px);
    margin-bottom: clamp(28px, 7.2917vw, 56px);
    text-align: center;
    padding: 0% 3%;
}

.fw-symptom-photo {
    width: clamp(135px, 40vw, 266px);
    height: clamp(135px, 40vw, 266px);
    border-radius: 50%;
    overflow: hidden;
}

.fw-symptom-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fw-symptom-label {
    position: relative;
    font-size: clamp(22px, 3.6458vw, 28px);
    font-weight: 800;
    color: #2b2b2b;
    margin-bottom: 14px;
    padding-bottom: 14px;
    display: flex;
}

/* 텍스트 폭과 무관하게 원본과 동일한 짧은 밑줄(텍스트 왼쪽 정렬) */
.fw-symptom-label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: clamp(54px, 13.8vw, 106px);
    height: 2px;
    background: #2b2b2b;
}

.fw-symptom-text ul {
    margin-top: 16px;
    text-align: left;
}

.fw-symptom-text li {
    position: relative;
    /* 600~1024px 구간 절충값(17px) */
    font-size: clamp(15px, 2.9167vw, 17px);
    line-height: 1.6;
    color: #444;
}

/* ===== 편평사마귀란 2-2 (유사질환 비교, 흰색 불투명 패널) ===== */
.fw-compare-panel {
    background: #f8f4f3;
    border-radius: 20px;
    padding: clamp(24px, 6.1979vw, 48px) clamp(14px, 3.6458vw, 28px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.fw-compare-panel .fw-sub-title {
    margin-bottom: 26px;
    /* 600~1024px 구간 절충값(30px) */
    font-size: clamp(20px, 5vw, 30px);
}

.fw-compare-panel .fw-sub-title::before {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    margin: 0 auto 14px;
    background: #bbb;
}

.fw-compare-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fw-compare-card {
    display: flex;
    align-items: center;
    gap: clamp(11px, 2.9167vw, 22px);
    background: #f8f4f3;
    padding: clamp(10px, 2.5521vw, 20px);
    border-radius: 16px;
}

.fw-compare-card img {
    flex-shrink: 0;
    width: clamp(64px, 25vw, 126px);
    height: clamp(64px, 25vw, 126px);
    object-fit: cover;
    border-radius: 12px;
}

.fw-compare-text strong {
    display: block;
    /* 600~1024px 구간 절충값(25px) */
    font-size: clamp(15px, 3.099vw, 25px);
    font-weight: 700;
    color: #2b2b2b;
    margin-bottom: 5px;
    text-align: center;
}

.fw-compare-text p {
    /* 600~1024px 구간 절충값(17px) */
    font-size: clamp(15px, 2.5521vw, 17px);
    line-height: 1.65;
    color: #666;
    text-align: center;
}

/* ===== 시술 전 안내 ===== */
.fw-guide {
    background: var(--flat-primary);
    text-align: center;
}

.fw-guide-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(25px, 6.4323vw, 49px);
    height: clamp(25px, 6.4323vw, 49px);
    margin-bottom: 14px;
    border: 2px solid #fff;
    border-radius: 10px;
    color: #fff;
    /* 600~1024px 구간 절충값(26px) */
    font-size: clamp(13px, 3.3854vw, 26px);
    font-weight: 800;
}

.fw-guide h2 {
    /* 600~1024px 구간 절충값(44px) */
    font-size: clamp(20px, 5.9vw, 44px);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    margin-bottom: 30px;
}

.fw-guide-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fw-guide-list p {
    padding: 20px;
    background: #f5f5f5;
    border-radius: 12px;
    /* 600~1024px 구간 절충값(17px) */
    font-size: clamp(15px, 2.5521vw, 17px);
    line-height: 1.65;
    color: #333;
    text-align: left;
    word-break: keep-all;
}

.fw-guide-list em {
    font-style: normal;
    font-weight: 700;
    color: var(--flat-primary);
}

/* ===== 치료솔루션 1 (레이저) ===== */
.fw-solution-1 {
    background: #fff;
}

.fw-solution-1 .fw-title {
    margin-bottom: 16px;
}

/* 치료솔루션 섹션은 eyebrow+title이 한 문장 취급(동일 크기)이라
   .fw-title과 같은 크기로 맞춰줌 */
.fw-solution-1 .fw-eyebrow {
    /* 600~1024px 구간 절충값(56px) */
    font-size: clamp(20px, 10vw, 56px);
    font-weight: 400;
    color: #444;
    margin-bottom: 0;
    line-height: 1.3;
    letter-spacing: -0.05rem;
}

/* --- index_m.php 전용: <img> 태그로 레이저 장비 사진을 세로 배치 ---
   1024px 이하에서는 이 섹션만 좌우 패딩 없이 뷰포트 전체 너비로 꽉 차야 해서
   (참고 이미지 실측) .fw-inner/.fw-section의 좌우 패딩을 상쇄하는 브레이크아웃 */
.fw-laser-grid {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.fw-laser-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2.6719vw, 21px);
    text-align: center;
}

.fw-laser-device img {
    display: block;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

.fw-laser-device--co2 img {
    width: clamp(110px, 28.2031vw, 217px);
}

.fw-laser-device--erbium img {
    width: clamp(139px, 35.625vw, 274px);
}

.laser-row {
    position: relative;
    display: flex;
    align-items: center;
    /* 장비가 없는 쪽(텍스트 자리)으로 .laser-row-inner를 붙임 */
    justify-content: flex-end;
    background-color: #eef7f6;
    background-image: var(--laser-bg, none);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 35% 0%;
}

.laser-row--reverse {
    justify-content: flex-start;
    background-position: 70% 0%;
}

.laser-row-inner {
    width: 100%;
    max-width: 55%;
    display: flex;
    padding: clamp(10px, 2vw, 45px) clamp(16px, 4.6875vw, 36px);
    margin: 0;
}

/* --- 두 기법이 공유하는 텍스트 스타일 (.fw-laser-tag/.laser-copy 등) --- */
.fw-laser-tag {
    display: inline-block;
    padding: 3px 12px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: clamp(6px, 1.6328vw, 13px);
    color: #888;
    margin-bottom: 12px;
}
.laser-row--reverse .laser-copy{
    text-align: right;
}

.fw-laser-copy {
    max-width: none;
}

.fw-laser-copy strong {
    display: block;
    font-size: clamp(12px, 3.1172vw, 24px);
    font-weight: 800;
    color: #2b2b2b;
    margin-bottom: 14px;
}

.fw-laser-copy strong em {
    font-style: normal;
    color: var(--flat-primary);
}

.fw-laser-copy p {
    font-size: clamp(9px, 2.2266vw, 17px);
    line-height: 1.8;
    font-weight: 400;
    color: #666;
}

.laser-copy {
    flex-basis: auto;
    min-width: 0;
    max-width: none;
    text-align: left;
    word-break: keep-all;
    white-space: normal;
}

.laser-copy strong {
    display: block;
    min-width: 0;
    /* 600~1024px 구간 절충값(31px) */
    font-size: clamp(16px, 4vw, 31px);
    font-weight: 800;
    margin-bottom: 12px;
    word-break: keep-all;
    white-space: normal;
    color: var(--flat-primary);
}

.laser-copy strong em {
    font-style: normal;
    color: var(--flat-primary);
}

.laser-copy p {
    /* 600~1024px 구간 절충값(17px) */
    font-size: clamp(13px, 2.41vw, 17px);
    line-height: 1.6;
    font-weight: 400;
    color: #444;
    word-break: keep-all;
    white-space: normal;
}

/* ===== Total Care System =====
   index_m.php: 인라인 SVG 아이콘 + strong/em 텍스트 (.fw-icon--circle)
   index.php:   완성된 원형 배지+아이콘+텍스트 합성 이미지 1장(.fw-care-item img) */
.fw-total-care {
    background: #f1f3f4;
}

.fw-care-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 30px;
    column-gap: 14px;
    padding: 0;
}

.fw-care-item {
    flex: 1 1 calc(50% - 7px);
    /* 뷰포트가 넓어져도(600~1024px) 카드가 무한정 커지지 않도록 상한을 둠 —
       좁은 폰에서는 50% 기준이 이 값보다 작아 영향 없고, 카드가 이 값에
       닿을 만큼 넓어지면 flex-wrap이 자연스럽게 4열로 재배치함 */
    max-width: 220px;
    padding: 0;
    background: none;
    border-radius: 0;
    text-align: center;
}

.fw-care-item img {
    display: block;
    width: 100%;
    height: auto;
}

.fw-icon--circle {
    width: clamp(44px, 11.2812vw, 87px);
    height: clamp(44px, 11.2812vw, 87px);
    margin: 0 auto 14px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

.fw-icon--circle svg {
    width: 45%;
    height: 45%;
}

.fw-care-item strong {
    display: block;
    font-size: clamp(9px, 2.375vw, 18px);
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.fw-care-item em {
    font-style: normal;
    font-size: clamp(8px, 1.9297vw, 15px);
    color: #888;
}

/* ===== 왜 산타클로스 ===== */
.fw-why {
    position: relative;
    background-color: #dcdedf;
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), var(--why-bg, none);
    background-size: cover;
    background-position: center;
    text-align: center;
}

.fw-why h2 {
    /* 600~1024px 구간 절충값(36px) */
    font-size: clamp(20px, 10vw, 36px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: #2b2b2b;
    margin-bottom: 34px;
}

.fw-why h2 strong {
    color: var(--flat-primary);
    font-weight: 800;
}

.fw-why-list {
    margin: 0 auto;
}

.fw-why-item {
    padding: clamp(15px, 3.8594vw, 30px) 0;
}

.fw-why-item:not(:first-child) {
    position: relative;
}

.fw-why-item:not(:first-child)::before {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    margin: 0 auto 34px;
    background: #fff;
}

.fw-why-item strong {
    display: block;
    font-weight: 700;
    font-size: clamp(21px, 2vw, 35px);
    color: #666;
    margin-bottom: 10px;
}

.fw-why-item p {
    /* 600~1024px 구간 절충값(17px) */
    font-size: clamp(15px, 2.41vw, 17px);
    line-height: 1.7;
    color: #666;
}

/* ===== FAQ ===== */
.fw-faq {
    background: #f1f3f4;
}

.fw-faq-list {
    background: #fff;
    border-radius: 12px;
    padding: 6px 22px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.fw-faq-item {
    padding: clamp(19px, 4.8438vw, 37px) 0;
}

.fw-faq-q {
    /* 600~1024px 구간 절충값(23px) */
    font-size: clamp(18px, 3vw, 23px);
    font-weight: 700;
    color: #222;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
    letter-spacing: -0.05rem;
}

.fw-faq-q span {
    color: var(--flat-primary);
    margin-right: 4px;
}

.fw-faq-a {
    /* 600~1024px 구간 절충값(17px) */
    font-size: clamp(15px, 2.41vw, 17px);
    line-height: 1.8;
    color: #666;
    padding-left: 0;
    margin-top: 6px;
    letter-spacing: -0.05rem;
}

.fw-faq-a span {
    color: #999;
    font-weight: 700;
    margin-right: 4px;
}

/* ===== LOCATION ===== */
.location-section {
    position: relative;
    padding: 60px 20px;
    background: #fff;
}

.location-section h2 {
    margin-bottom: 30px;
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.05em;
    color: #2b2b2b;
}

.location-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.map-box {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.root_daum_roughmap {
    width: 100% !important;
}

.root_daum_roughmap .wrap_map {
    width: 100% !important;
    height: 250px !important;
}

.root_daum_roughmap .wrap_controllers,
.root_daum_roughmap .cont {
    display: none !important;
}

.info-box {
    width: 100%;
    color: #555;
}

.info-title {
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
    color: #666;
    letter-spacing: -0.03em;
}

.info-tel {
    margin-bottom: 25px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    color: var(--flat-primary);
    letter-spacing: -0.04em;
}

.time-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

.time-list>div {
    width: 100%;
}

.time-list strong,
.lunch strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 700;
    color: #666;
    letter-spacing: -0.03em;
}

.time-list p {
    margin-bottom: 2px;
    font-size: 18px;
    font-weight: 800;
    color: var(--flat-primary);
    letter-spacing: -0.03em;
}

.time-list span {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #555;
    letter-spacing: -0.04em;
}

.lunch {
    margin-bottom: 25px;
}

.lunch p {
    font-size: 18px;
    font-weight: 800;
    color: #666;
    letter-spacing: -0.03em;
}

.holiday {
    font-size: 16px;
    font-weight: 800;
    color: #333;
    letter-spacing: -0.04em;
}

/* ===== QUICK TEL =====
   index_m.php에는 <a class="quick-tel"> 요소 자체가 없음(하단 고정
   퀵메뉴 bottom_quick_counsel.php가 그 역할을 대신함). index.php에는
   항상 존재하는데, 1024px 이하에서는 마찬가지로 하단 퀵메뉴가 있으므로
   중복 노출을 막기 위해 숨김 (데스크톱에서만 세로 pill 형태로 노출) */
.quick-tel {
    display: none;
}

/* ===== FOOTER =====
   index.php는 <div class="footer-brand">로 로고+정보를 한 번 더
   감싸고 #device_change("PC버전 홈페이지") 링크가 있음. index_m.php는
   래퍼 없이 로고/메뉴/정보가 나란한 형제 요소. 클래스가 겹치지 않는
   .footer-brand/#device_change는 index.php에서만 의미가 있음 */
#footer {
    background: #f1f3f4;
    padding: 40px 20px 140px;
    border-top: 1px solid #ddd;
}

.footer-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.footer-brand {
    display: contents;
}

.footer-logo {
    order: 1;
    width: 150px;
    margin-bottom: 5px;
    opacity: 0.6;
}

.footer-info {
    order: 3;
}

.footer-info p {
    font-size: 13px;
    color: #777;
    line-height: 1.6;
    word-break: keep-all;
}

.footer-menu {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 8px;
    text-align: left;
    min-width: 0;
}

.footer-menu li {
    text-align: left;
}

.footer-menu li+li {
    margin-top: 0;
}

.footer-menu a {
    font-size: 13px;
    color: #555;
}

/* PC버전 홈페이지 링크(index.php 전용, 다른 footer-menu 항목과 동일한
   크기로 노출). index_m.php에는 이 id를 쓰는 요소가 없어 무해함 */
#device_change {
    display: block;
}

/* ===== 진료일정 팝업 ===== */
.schedule-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
}

.schedule-popup-overlay.hidden {
    display: none;
}

.schedule-popup {
    position: relative;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.schedule-popup img {
    width: 100%;
    height: auto;
    display: block;
}

.schedule-popup-close {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 1;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

.schedule-popup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    font-size: 13px;
    color: #555;
}

.schedule-popup-footer label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.schedule-popup-footer button {
    padding: 7px 14px;
    border: 0;
    border-radius: 5px;
    background: #333;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

/* ===================================================================
   데스크톱 (≥1025px) 오버라이드
   =================================================================== */
@media (min-width: 1025px) {
    /* HEADER */
    .header-top {
        width: 1200px;
        height: 82px;
        padding: 0;
        margin: 0 auto;
    }

    .logo img {
        width: 230px;
    }

    .header-util {
        gap: 20px;
    }

    .header-util .tel {
        font-size: clamp(16px, 1.04vw, 20px);
    }

    .pc-only {
        display: inline-flex;
    }

    .mo-only {
        display: none;
    }

    .main-btn {
        min-width: 130px;
        height: clamp(36px, 2.19vw, 42px);
        padding: 0 clamp(18px, 1.458vw, 28px);
        border-color: #00b8b8;
        font-size: 16px;
    }

    /* GNB */
    #gnb {
        display: block;
        border-top: 1px solid #eee;
    }

    #gnb ul {
        width: 1250px;
        height: 58px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #gnb li {
        flex: 1;
        text-align: center;
    }

    #gnb a {
        display: block;
        font-size: 17px;
        font-weight: 500;
        color: #666;
        transition: 0.2s;
    }

    #gnb a:hover {
        color: var(--flat-primary);
        font-weight: 700;
    }

    #flat-wart,
    #guide,
    #solution,
    #faq,
    #location {
        scroll-margin-top: 140px;
    }

    /* HERO: 인라인 style="--visual-bg:..."의 기본값(모바일용 세로 사진)을
       이 폭에서만 PC용 가로 사진으로 교체. 인라인 스타일보다 우선시키려면
       !important이 필요함 */
    .visual-section {
        aspect-ratio: 3840 / 1805;
        --visual-bg: url(../img/flat_wart_doctor.jpg) !important;
        background-position: center;
        overflow: hidden;
    }

    .visual-inner {
        height: 100%;
        padding: 9% 0 0 0;
    }

    .visual-copy {
        position: relative;
        margin-left: 43%;
        max-width: 40vw;
        min-width: 380px;
        padding-bottom: 0;
    }

    .visual-copy h1 {
        font-size: clamp(40px, 3.125vw, 60px);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.05rem;
    }

    .visual-copy h1 strong {
        font-size: clamp(40px, 3.125vw, 60px);
        font-weight: 300;
        margin-top: 0;
    }

    .visual-tags {
        gap: 8px;
        margin: 20px 0;
    }

    .visual-tags span {
        padding: 6px 16px;
        border: 2px solid #6fdbd2;
        background: rgba(255, 255, 255, 0.04);
        font-size: clamp(21px, 1.667vw, 32px);
        letter-spacing: -0.05rem;
    }

    .visual-copy p {
        font-size: clamp(17px, 1.302vw, 25px);
        line-height: 1.6;
        font-weight: 500;
        color: #ffffff;
        letter-spacing: -0.05rem;
        margin-left: 10px;
        text-shadow: 0 3px 8px rgba(0, 0, 0, .4);
    }

    .visual-btn {
        display: inline-block;
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        width: auto;
        max-width: none;
        margin-top: clamp(18px, 1.56vw, 30px);
        margin-left: 15px;
        padding: clamp(11px, 1.04vw, 20px) clamp(33px, 3.125vw, 60px);
        background: var(--flat-accent);
        font-size: clamp(14px, 1.25vw, 24px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    }

    /* 편평사마귀란/치료솔루션/FAQ 공통 */
    .fw-inner {
        width: 65%;
        max-width: 1400px;
        padding: 0;
    }

    #faq .fw-inner {
        width: 50%;
        max-width: 1400px;
    }

    .fw-eyebrow {
        font-size: clamp(15px, 1.146vw, 22px);
        letter-spacing: -0.05rem;
        margin-bottom: 0;
        color: #2b2b2b;
    }

    .fw-title {
        font-size: clamp(53px, 4.167vw, 60px);
        letter-spacing: -0.05rem;
        margin-bottom: 40px;
    }

    .fw-desc {
        max-width: none;
        margin: 0 auto 60px;
        font-size: clamp(15px, 1.146vw, 22px);
        line-height: 1.6;
        color: #444;
        letter-spacing: -0.05rem;
    }

    .fw-sub-title {
        font-size: clamp(53px, 4.167vw, 80px);
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: -0.05rem;
        margin-bottom: 75px;
    }

    .fw-sub-title strong {
        color: #2b2b2b;
    }

    /* 편평사마귀란 1 */
    .fw-about-1 {
        padding: clamp(64px, 5vw, 96px) 0;
    }

    .fw-card-grid {
        flex-direction: row;
        gap: clamp(13px, 1.04vw, 20px);
        padding: 0 5%;
    }

    .fw-card {
        flex: 1;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: clamp(53px, 4.17vw, 80px) clamp(16px, 1.25vw, 24px);
        border-radius: 18px;
        text-align: center;
    }

    .fw-icon {
        width: clamp(60px, 4.6875vw, 90px);
        height: clamp(60px, 4.6875vw, 90px);
        margin-bottom: 0;
    }

    .fw-card p {
        font-size: clamp(15px, 1.146vw, 22px);
        line-height: 1.6;
        letter-spacing: -0.05rem;
    }

    /* 편평사마귀란 2 */
    .fw-about-2 {
        padding: clamp(64px, 5vw, 96px) 0;
    }

    .fw-symptom {
        flex-direction: row;
        align-items: center;
        gap: clamp(57px, 4.427vw, 85px);
        margin-bottom: 100px;
        margin-left: clamp(83px, 6.51vw, 125px);
        text-align: left;
    }

    .fw-symptom-photo {
        flex-shrink: 0;
        width: 30%;
        height: 30%;
    }

    .fw-symptom-text {
        flex: 1;
    }

    .fw-symptom-label {
        font-size: clamp(28px, 2.188vw, 42px);
        margin-bottom: 10px;
        color: #444;
        padding-bottom: 15px;
    }

    .fw-symptom-label::after {
        width: 60px;
        height: 2.5px;
        background: #444;
    }

    .fw-symptom-text ul {
        margin-top: 20px;
        text-align: left;
    }

    .fw-symptom-text li {
        padding-left: 0;
        font-size: clamp(15px, 1.146vw, 22px);
        line-height: 1.6;
        color: #444;
        font-weight: 500;
        letter-spacing: -0.05rem;
    }

    .fw-symptom-text li::before {
        display: none;
    }

    /* 편평사마귀란 2-2 (유사질환 비교) */
    .fw-compare-panel {
    background: #f0f0f03d;
    border-radius: 20px;
    padding: clamp(24px, 6.1979vw, 48px) clamp(14px, 3.6458vw, 28px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    }

    .fw-compare-panel .fw-sub-title {
        margin-bottom: 46px;
        font-size: clamp(28px, 2.188vw, 42px);
        font-weight: 700;
        letter-spacing: -0.05rem;
    }

    .fw-compare-panel .fw-sub-title::before {
        width: 60px;
        height: 4px;
        margin: 0 auto 18px;
        background: #444;
    }

    .fw-compare-grid {
        flex-direction: row;
        gap: clamp(13px, 1.04vw, 20px);
    }

    .fw-compare-card {
        display: block;
        flex: 1;
        text-align: center;
        gap: 0;
        background: none;
        padding: 0;
        border-radius: 0;
    }

    .fw-compare-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 16px;
        margin-bottom: clamp(15px, 1.146vw, 22px);
    }

    .fw-compare-text strong,
    .fw-compare-card strong {
        font-size: clamp(23px, 1.823vw, 35px);
        font-weight: 700;
        color: #2b2b2b;
        letter-spacing: -0.05rem;
        margin-bottom: 10px;
    }

    .fw-compare-text p,
    .fw-compare-card p {
        font-size: clamp(15px, 1.146vw, 22px);
        line-height: 1.6;
        color: #444;
        letter-spacing: -0.05em;
    }

    /* 시술 전 안내 */
    .fw-guide {
        padding: clamp(61px, 4.79vw, 92px) 0;
    }

    .fw-guide-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 24px;
    }

    .fw-guide h2 {
        font-size: clamp(40px, 3.125vw, 60px);
        margin-bottom: 50px;
    }

    .fw-guide-list {
        width: 51.67vw;
        max-width: min(992px, 100%);
        margin: 0 auto;
        gap: 14px;
    }

    .fw-guide-list p {
        padding: clamp(19px, 1.458vw, 28px) clamp(21px, 1.667vw, 32px);
        border-radius: 10px;
        font-size: clamp(15px, 1.146vw, 22px);
        line-height: 1.5;
        font-weight: 500;
        letter-spacing: -0.05rem;
        text-align: center;
    }

    /* 치료솔루션 1 (레이저) */
    .fw-solution-1 {
        padding: 70px 0 0 0;
    }

    .fw-solution-1 .fw-title {
        margin-bottom: 18px;
    }

    .fw-solution-1 .fw-eyebrow {
        font-size: clamp(53px, 4.167vw, 80px);
        font-weight: 400;
        color: #444;
        margin-bottom: -5px;
    }

    .fw-laser-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        overflow: visible;
        width: auto;
        margin-left: 0;
    }

    .fw-laser-grid::before {
        display: none;
    }

    .laser-row {
        width: 105vw;
        margin-left: calc(50% - 54vw);
        margin-right: calc(50% - 49vw);
        aspect-ratio: 3865 / 1124;
        background-image: var(--laser-bg, none);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        /* 모바일 전용 규칙(위 base의 justify-content:flex-end)이 여기까지
           새어들어와 텍스트가 .laser-row-inner의 max-width 정렬에 더해
           한 번 더 우측으로 밀리던 것을 되돌림(데스크톱은 .laser-row-inner
           자체의 max-width+justify-content로만 위치를 잡음) */
        justify-content: flex-start;
        border-radius: 0;
        overflow: visible;
        box-shadow: none;
    }

    .laser-row::before {
        display: none;
    }

    .laser-row-inner {
        max-width: 70%;
        justify-content: flex-end !important;
        padding: 0;
    }

    .laser-row--reverse .laser-row-inner {
        max-width: 55%;
    }

    .laser-row--reverse .laser-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .laser-row--reverse .laser-copy p {
        text-align: right;
    }

    .fw-laser-tag {
        padding: 4px 14px;
        border: 2px solid #ccc;
        font-size: 15px;
        margin-bottom: 5px;
    }

    .laser-copy {
        min-width: 40%;
        flex-basis: auto;
        max-width: none;
        text-align: left;
    }

    .laser-copy strong {
        font-size: clamp(28px, 2.188vw, 42px);
        margin-bottom: 10px;
    }

    .laser-copy p {
        font-size: clamp(15px, 1.146vw, 22px);
        line-height: 1.6;
        letter-spacing: -0.05rem;
        color: #444;
    }

    /* Total Care System */
    .fw-total-care {
        padding: clamp(64px, 5vw, 96px) 0;
    }

    .fw-care-grid {
        flex-wrap: nowrap;
        gap: 2vw;
    }

    .fw-care-item {
        flex: 0 1 220px;
    }

    /* 왜 산타클로스 */
    .fw-why {
        padding: clamp(64px, 5vw, 96px) 0;
    }

    .fw-why h2 {
        font-size: clamp(33px, 3.2vw, 80px);
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 30px;
    }

    .fw-why-list {
        max-width: clamp(413px, 32.3vw, 620px);
    }

    .fw-why-item {
        padding: 34px 0;
    }

    .fw-why-item:not(:first-child)::before {
        width: 50px;
        height: 4px;
        margin: 0 auto 34px;
        background: #fff;
    }

    .fw-why-item strong {
        font-size: clamp(21px, 2vw, 35px);
        color: #666;
        margin-bottom: 5px;
    }

    .fw-why-item p {
        font-size: clamp(15px, 1.146vw, 22px);
        line-height: 1.6;
        font-weight: 500;
    }

    /* FAQ */
    .fw-faq {
        padding: clamp(64px, 5vw, 96px) 0;
    }

    .fw-faq-list {
        padding: 20px 50px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    .fw-faq-item {
        padding: 34px 0;
    }

    .fw-faq-q {
        font-size: clamp(15px, 1.5vw, 28px);
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #444;
    }

    .fw-faq-a {
        font-size: clamp(15px, 1.146vw, 22px);
        line-height: 1.6;
    }

    /* LOCATION */
    .location-section {
        padding: 90px 0 80px;
    }

    .location-section h2 {
        margin-bottom: 55px;
        font-size: clamp(35px, 2.708vw, 52px);
    }

    .location-inner {
        width: 1000px;
        margin: 0 auto;
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(43px, 3.385vw, 65px);
    }

    .map-box {
        width: 430px;
        height: 315px;
        flex-shrink: 0;
    }

    .root_daum_roughmap .wrap_map {
        height: 315px !important;
    }

    .info-box {
        padding-top: 8px;
    }

    .info-title {
        font-size: 17px;
        line-height: 1.3;
    }

    .info-tel {
        font-size: clamp(23px, 1.771vw, 34px);
    }

    .time-list {
        flex-direction: row;
        gap: 45px;
    }

    .time-list>div {
        min-width: 140px;
        width: auto;
    }

    .time-list p {
        font-size: clamp(12px, 0.9375vw, 18px);
        line-height: 1.2;
    }

    .time-list span {
        line-height: 1.45;
    }

    .lunch {
        margin-bottom: 31px;
    }

    .lunch p {
        font-size: clamp(14px, 1.094vw, 21px);
        line-height: 1.2;
    }

    .holiday {
        font-size: clamp(12px, 0.9375vw, 18px);
        line-height: 1.3;
    }

    /* QUICK TEL: 뷰포트 우측에 고정, 세로 중앙 정렬 (index.php 전용,
       실제 데스크톱 화면에서만 노출) */
    .quick-tel {
        display: flex;
        position: fixed;
        right: 5%;
        top: 50%;
        bottom: auto;
        left: auto;
        transform: translateY(-50%);
        z-index: 90;
        width: 85px;
        height: 220px;
        border-radius: 80px;
        background: #2b2b2b;
        color: #fff;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 0 16px;
        text-align: center;
    }

    .tel-icon {
        width: 20px;
        margin-bottom: 8px;
    }

    .quick-tel span {
        font-size: 17px;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: -0.02em;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .quick-tel em {
        margin-top: 12px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.45);
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
    }

    /* SCHEDULE POPUP */
    .schedule-popup-overlay {
        z-index: 1000;
        background: rgba(0, 0, 0, 0.55);
        padding: 0;
    }

    .schedule-popup {
        width: 420px;
        max-width: 90vw;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    }


    .schedule-popup-footer {
        padding: 12px 18px;
        background: #f7f7f7;
        border-top: 1px solid #eee;
        font-size: 14px;
    }

    .schedule-popup-footer button {
        background: none;
        color: #555;
        font-size: 14px;
    }

    /* FOOTER */
    #footer {
        padding: 45px 0 160px;
    }

    /* 1300px 고정폭이 1280px 노트북 화면보다 넓어 가로 스크롤이 생기던
       문제를 min()으로 방지 */
    .footer-inner {
        width: min(1300px, 92%);
        margin: 0 auto;
        flex-direction: row;
        justify-content: space-between;
        gap: 40px;
    }

    .footer-brand {
        display: block;
    }

    .footer-logo {
        order: 0;
        width: 180px;
        margin-bottom: 15px;
    }

    .footer-info {
        order: 0;
    }

    .footer-info p {
        font-size: 14px;
        line-height: 1.7;
    }

    .footer-menu {
        order: 0;
        min-width: 260px;
        text-align: center;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .footer-menu li {
        text-align: right;
    }

    .footer-menu li+li {
        margin-top: 8px;
    }

    .footer-menu a {
        font-size: 15px;
    }

    /* PC버전 홈페이지 링크: 실제 데스크톱 화면에서는 필요 없어서 숨김
       (반응형으로 좁아졌을 때만 노출 — 위쪽 모바일 우선 기본값 참고) */
    #device_change {
        display: none;
    }
}