/* ================================================================
   common.css  —  닥터송포유 리뉴얼 공통 스타일
   기준 디자인: 닥터송_메인랜딩시안_260422
   ※ 기존 디자인 CSS 완전 대체 (기능·레이아웃 보호 유지)
   수정이력: 2026-06 CSS 구조 정리 (중복 제거, 로드순서 정비)
   ================================================================ */

/* ──────────────────────────────────────────
   0. 기본 리셋 + 기능 보호
────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #222;
    background: #fff;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
}

ul, ol, li { list-style: none; }
a          { color: inherit; text-decoration: none; }
img        { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
table      { border-collapse: collapse; }

/* 그누보드 기본 숨김 유틸 보호 */
.sound_only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.hide { display: none !important; }

/* ──────────────────────────────────────────
   1. CSS 디자인 변수
────────────────────────────────────────── */
:root {
    /* 컬러 팔레트 */
    --c-navy:        #1c3178;
    --c-navy-dark:   #141f50;
    --c-navy-dim:    rgba(28,49,120,0.08);
    --c-gold:        #b89d7a;
    --c-gold-light:  #d4bc9a;
    --c-blue:        #4aa6de;
    --c-blue-light:  #6aa9d8;
    --c-cream:       #f5f0eb;
    --c-bg:          #f8f8f6;
    --c-white:       #ffffff;
    --c-text:        #222222;
    --c-text-mid:    #555555;
    --c-text-light:  #999999;
    --c-border:      #e8e8e8;
    --c-border-light:#f0ece6;

    /* 타이포그래피 */
    --f-body:    'Pretendard', 'Apple SD Gothic Neo', sans-serif;
    --f-display: 'Escoredream', 'Pretendard', sans-serif;
    --f-serif:   'Nanum Myeongjo', 'Georgia', serif;

    /* 스페이싱 */
    --sec-py:    110px;
    --inner-max: 1400px;
    --inner-px:  20px;

    /* 반경 */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 16px;

    /* 그림자 */
    --shadow:       0 4px 20px rgba(0,0,0,0.07);
    --shadow-hover: 0 10px 36px rgba(0,0,0,0.13);

    /* 전환 */
    --tr: 0.3s ease;
}

/* ──────────────────────────────────────────
   2. 폰트 로드 — S-CoreDream (Escoredream)
────────────────────────────────────────── */
@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: 300; font-display: swap;
}
@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
    font-weight: 500; font-display: swap;
}
@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
    font-weight: 600; font-display: swap;
}
@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
    font-weight: 700; font-display: swap;
}
@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff');
    font-weight: 800; font-display: swap;
}

/* 나눔명조 */
@import url('//fonts.googleapis.com/earlyaccess/nanummyeongjo.css');

/* ──────────────────────────────────────────
   3. 래퍼 & 레이아웃 기초
────────────────────────────────────────── */
#wrap {
    min-width: 320px;
    overflow: hidden;
    background: #fff;
}

.inner {
    width: 100%;
    max-width: var(--inner-max);
    margin: 0 auto;
    padding: 0 var(--inner-px);
}

.container        { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.container-fluid  { width: 100%; padding: 0 20px; }
.container-lg     { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* 그누보드 row / col 기초 보호 */
.row { display: flex; flex-wrap: wrap; }
.row::after { content: ''; display: table; clear: both; }
.row-0 { margin: 0; }
.col-xs-3  { width: 25%; float: left; }
.col-xs-4  { width: 33.333%; float: left; }
.col-xs-6  { width: 50%; float: left; }
.col-xs-12 { width: 100%; float: left; }
@media (min-width: 992px) {
    .col-md-6 { width: 50%; float: left; }
}

.img-responsive { max-width: 100%; height: auto; display: block; }
.center-block   { margin-left: auto; margin-right: auto; }
.right-block    { margin-left: auto; }

/* 공통 여백 유틸 */
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.mt-5 { margin-top: 30px; }
.text-center { text-align: center; }
.padding-2   { padding: 8px; }
.bg-m        { background: var(--c-navy); color: #fff; }

/* ──────────────────────────────────────────
   4. 섹션 공통
────────────────────────────────────────── */
.section,
.ds-section {
    padding: var(--sec-py) 0;
    background: #fff;
}
.section.bg-light,
.ds-section.bg-light { background: var(--c-bg); }

/* ──────────────────────────────────────────
   섹션 타이틀 공통 (.sec-title)
   ※ default.css의 중복 정의 제거 후 여기서 단일 관리
────────────────────────────────────────── */
.sec-title {
    text-align: center;
    margin-bottom: 100px;
    position: relative;
    padding-top: 100px;
}
.sec-title::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 44px;
    background: #d0d0d0;
}
.sec-title h2 {
    font-family: var(--f-display);
    font-size: 48px;
    font-weight: 600;
    color: #111;
    line-height: 1.15;
    letter-spacing: -0.03em;
}
.sec-title p {
    margin-top: 14px;
    font-size: 21px;
    color: var(--c-text-mid);
    letter-spacing: -0.04em;
}

/* ──────────────────────────────────────────
   5. 버튼 공통
────────────────────────────────────────── */
.btn-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 56px;
    padding: 0 30px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.30);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.02em;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    transition: all var(--tr);
}
.btn-glass:hover {
    background: #fff;
    color: #1c3178;
    transform: translateY(-2px);
}

.btn-kakao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 30px;
    background: #fae100;
    border-radius: 22px;
    color: #3c1e1e;
    font-size: 14px;
    font-weight: 700;
    transition: all var(--tr);
    border: none;
}
.btn-kakao i { font-size: 16px; }
.btn-kakao:hover { background: #fbd300; transform: translateY(-2px); }

.sns-icons { display: flex; align-items: center; gap: 8px; }
.sns-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    color: #fff;
    font-size: 19px;
    transition: all var(--tr);
}
.sns-icons a:hover { transform: translateY(-2px); opacity: 0.88; }
.btn-youtube   { background: #ff0000; }
.btn-instagram {
    background: radial-gradient(circle at 30% 107%,
        #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* ──────────────────────────────────────────
   6. 그누보드 게시판·폼 기초 보호
────────────────────────────────────────── */
#contents { position: relative; }

#svisual {
    position: relative;
    height: 220px;
    background: var(--c-navy);
    overflow: hidden;
}
#svisual .container {
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding-bottom: 28px;
}
#svisual .sv-txt    { color: #fff; }
#svisual .sv-tit    { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin-top: 8px; }
#svisual .sv-sm     { font-size: 12px; letter-spacing: 0.1em; opacity: 0.55; margin-top: 4px; }
#svisual .sv-location {
    font-size: 12px;
    opacity: 0.65;
    letter-spacing: -0.02em;
}
#svisual .sv-point  { font-size: 14px; opacity: 0.82; margin-top: 4px; }

.snb, .ssnb {
    background: #fff;
    border-bottom: 1px solid var(--c-border);
}
.snb .container, .ssnb .container { padding: 0 20px; }

.tbl_wrap          { overflow-x: auto; }
.tbl_wrap table    { width: 100%; }
.tbl_wrap th, .tbl_wrap td { padding: 10px 12px; border-bottom: 1px solid var(--c-border); font-size: 14px; }
.tbl_wrap th       { background: var(--c-bg); font-weight: 600; }

.pg_wrap           { text-align: center; padding: 20px 0; }
.pg_wrap a, .pg_wrap strong {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid var(--c-border);
    font-size: 13px; color: var(--c-text-mid);
    margin: 0 2px; border-radius: var(--r-sm);
    transition: all var(--tr);
}
.pg_wrap strong     { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.pg_wrap a:hover    { border-color: var(--c-navy); color: var(--c-navy); }

.frm_wrap input[type=text],
.frm_wrap input[type=email],
.frm_wrap input[type=tel],
.frm_wrap input[type=password],
.frm_wrap textarea,
.frm_wrap select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    font-size: 14px;
    color: var(--c-text);
    background: #fff;
    transition: border-color var(--tr);
}
.frm_wrap textarea       { height: auto; padding: 12px 14px; resize: vertical; }
.frm_wrap input:focus,
.frm_wrap textarea:focus { outline: none; border-color: var(--c-blue); }

.btn, .btn_submit {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 24px;
    background: var(--c-navy); color: #fff;
    border: none; border-radius: var(--r-sm);
    font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background var(--tr);
}
.btn:hover, .btn_submit:hover { background: var(--c-navy-dark); }
.btn_cancel { background: #888; }
.btn_cancel:hover { background: #666; }

/* ──────────────────────────────────────────
   7. 상단 유틸 바 (#top-btn)
────────────────────────────────────────── */
#top-btn {
    background: #fff;
    border-bottom: 1px solid var(--c-border);
    font-size: 13px;
    position: relative;
    z-index: 950;
}
#top-btn .container-fluid {
    max-width: var(--inner-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 24px;
}
#listTopMenu {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
#listTopMenu ul {
    display: flex;
    align-items: center;
    gap: 0;
}
#listTopMenu ul li a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    height: 40px;
    font-size: 12px;
    color: var(--c-text-mid);
    border-right: 1px solid var(--c-border);
    transition: color var(--tr);
}
#listTopMenu ul li a:hover { color: var(--c-navy); }
#listTopMenu ul li img { width: 14px; height: 14px; object-fit: contain; float: none; display: inline; }

#listTopMenu .lang {
    display: flex;
    align-items: center;
    gap: 6px;
}
#listTopMenu .lang img { width: 24px; height: auto; }

#listTopMenu .t-right.wordlink {
    display: flex;
    align-items: center;
    gap: 8px;
}
#listTopMenu .t-right.wordlink img { width: 24px; height: auto; }
#listTopMenu .top-connect {
    display: flex;
    align-items: center;
    gap: 6px;
}
#listTopMenu .top-connect .name {
    font-size: 11px;
    color: var(--c-text-light);
    letter-spacing: 0.04em;
}
#listTopMenu .top-connect .tit {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-navy);
    letter-spacing: -0.02em;
}

/* 관리자 유틸바 (#top-btn1) */
#top-btn1 {
    padding: 8px 0;
    background: #f5f5f5;
    border-bottom: 1px solid var(--c-border);
    font-size: 12px;
}
#top-btn1 .container-fluid { display: flex; }
#top-btn1 .list-absoulte {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 1200px;
    display: flex;
    gap: 4px;
}
#top-btn1 li a { display: inline-block; padding: 4px 10px; border-radius: 3px; }
#top-btn1 .admin   a { background: #111; color: #fff; font-weight: 700; }
#top-btn1 .btnn    a { border: 1px solid #ccc; color: #555; }
#top-btn1 .reserve a { background: #00afef; color: #fff; font-weight: 700; }
#top-btn1 .surgery a { background: #30499b; color: #fff; font-weight: 700; }
#top-btn1 .facelift a { background: #4544f6; color: #fff; font-weight: 700; }
#listTopMenu1 { display: flex; gap: 4px; flex-wrap: wrap; }
#listTopMenu1 li { display: inline-block; }
#listTopMenu1 .none { display: none; }

/* ──────────────────────────────────────────
   8. 기기 전환 버튼
────────────────────────────────────────── */
#device_change {
    display: block;
    width: 100%;
    padding: 10px;
    background: var(--c-navy);
    color: #fff;
    text-align: center;
    font-size: 13px;
    border: none;
    cursor: pointer;
}

/* ──────────────────────────────────────────
   9. 팝업 레이어
────────────────────────────────────────── */
#newwin_wrap { position: relative; z-index: 5000; }

/* ──────────────────────────────────────────
   반응형 — 태블릿 (≤ 996px) sec-title 보정
────────────────────────────────────────── */
@media (max-width: 996px) {
    .sec-title::before {
        top: 25px;
    }
}