@charset "utf-8";
/* ==========================================================================
   프론티어신경과의원 — 템플릿(main.css/sub.css) 위에 얹는 전용 컴포넌트.
   골든디아망 템플릿의 클래스는 그대로 두고, 여기에는 «없어서 새로 만든 것»만 둔다.
   ========================================================================== */

/* --- 헤더 상담 링크 (언어 스위처 자리) ---------------------------------- */
.fn-hdr-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;font-size:14px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.fn-hdr-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:768px){.fn-hdr-cta{display:none}}

/* --- 히어로 배경 이미지(영상 대신) ------------------------------------- */
.gd-hero-bg picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.gd-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(1.04);animation:fn-kb 28s ease-in-out infinite alternate}
@keyframes fn-kb{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.13) translateY(-1.6%)}}
@media (prefers-reduced-motion:reduce){.gd-hero-bg img{animation:none;transform:none}}
.gd-hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(18px,1.8vw,26px)}
.gd-hero-chips span{padding:6px 14px;border:1px solid rgba(255,255,255,.32);border-radius:999px;font-size:12.5px;letter-spacing:.04em;color:#e6edf7;background:rgba(8,14,28,.38);backdrop-filter:blur(6px)}

/* --- 증상 그리드 ------------------------------------------------------- */
.fn-symptoms{margin-top:clamp(26px,3vw,48px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1vw,14px)}
.fn-symptoms li{display:flex;align-items:center;gap:12px;padding:clamp(14px,1.2vw,20px) clamp(14px,1.3vw,22px);background:#fff;border:1px solid var(--gd-line);border-radius:14px;font-weight:700;font-size:clamp(13.5px,.95vw,15.5px);letter-spacing:-.02em;line-height:1.35}
.fn-symptoms b{font-family:var(--gd-serif);font-weight:500;font-size:13px;color:var(--gd-brown-dp);letter-spacing:.04em;flex:none}
@media (max-width:1024px){.fn-symptoms{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.fn-symptoms{grid-template-columns:repeat(2,minmax(0,1fr))}.fn-symptoms li{padding:12px 14px;font-size:13px}}

/* --- 통계 ---------------------------------------------------------------- */
.gd-stats{margin-top:clamp(26px,2.3vw,45px)}

/* --- 원장 포트레이트(원형) ------------------------------------------------ */
.fn-doc{display:grid;place-items:center;align-self:center}
.fn-doc-ring{position:relative;width:min(100%,360px);aspect-ratio:1;border-radius:50%;padding:10px;background:linear-gradient(135deg,#eaf1ff,#fff);box-shadow:0 34px 64px -34px rgba(10,20,40,.4)}
.fn-doc-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.fn-doc-tag{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);padding:8px 16px;border-radius:999px;background:var(--gd-navy);color:#fff;font-size:13px;font-weight:700;white-space:nowrap;letter-spacing:.02em}
@media (max-width:1024px){.gd-song .fn-doc{order:4;margin:8px auto 18px}}

/* --- 카드 아이콘(인라인 SVG) --------------------------------------------- */
.gd-card-ico svg{width:52%;height:52%;fill:none;stroke:var(--gd-icon-line);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* --- 스레드 인용 카드 ----------------------------------------------------- */
.fn-quotes{margin-top:clamp(26px,3vw,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,18px)}
.fn-quote{background:#fff;border-radius:18px;padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;gap:14px;border:1px solid var(--gd-line);color:inherit;transition:transform .3s var(--gd-ease),box-shadow .3s}
.fn-quote:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(10,20,40,.35)}
.fn-quote-k{font-family:var(--gd-serif);font-style:italic;color:var(--gd-brown);font-size:15px}
.fn-quote-t{font-size:clamp(15px,1.1vw,18px);font-weight:700;line-height:1.5;letter-spacing:-.02em}
.fn-quote p{font-size:14px;line-height:1.7;color:#3d4352;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.fn-quote-m{margin-top:auto;font-size:12.5px;color:var(--gd-muted);display:flex;justify-content:space-between;align-items:center;gap:10px}
@media (max-width:1024px){.fn-quotes{grid-template-columns:minmax(0,1fr)}}

/* --- 릴스 카드(쇼츠 캐러셀 안) ------------------------------------------- */
.fn-reel{position:absolute;inset:0;display:block;color:inherit}
.fn-reel picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.fn-reel img{width:100%;height:100%;object-fit:cover}

/* --- 정보 카드 그리드(검사·유형·프로그램) --------------------------------- */
.fn-tests{margin-top:clamp(24px,2.6vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,20px)}
.fn-test{background:#fff;border:1px solid #d7deea;border-radius:18px;padding:clamp(20px,1.7vw,28px);display:flex;flex-direction:column;gap:10px}
.fn-test-no{font-family:var(--gd-serif);font-style:italic;color:var(--gd-brown);font-size:16px}
.fn-test-k{font-size:11.5px;letter-spacing:.14em;color:var(--gd-muted);text-transform:uppercase}
.fn-test-t{font-size:clamp(16px,1.15vw,19px);font-weight:700;letter-spacing:-.02em;line-height:1.35}
.fn-test-e{font-size:12.5px;color:var(--gd-brown-dp);font-family:var(--gd-serif);font-style:italic}
.fn-test p{font-size:14px;line-height:1.65;color:#3d4352}
.fn-test-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.fn-test-tags span{padding:4px 10px;border-radius:999px;background:#eaf1ff;color:var(--gd-brown-dp);font-size:12px;font-weight:600}
.fn-tests--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fn-tests--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gd-sec--dark .fn-test,.gd-sec--deep .fn-test{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
.gd-sec--dark .fn-test p,.gd-sec--deep .fn-test p{color:#b6bfd0}
.gd-sec--dark .fn-test-no,.gd-sec--deep .fn-test-no{color:var(--gd-hero-italic)}
.gd-sec--dark .fn-test-tags span,.gd-sec--deep .fn-test-tags span{background:rgba(255,255,255,.1);color:#d4dcea}
@media (max-width:1024px){.fn-tests,.fn-tests--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fn-tests,.fn-tests--2,.fn-tests--4{grid-template-columns:minmax(0,1fr)}}

/* --- FAQ ----------------------------------------------------------------- */
.fn-faq{margin-top:clamp(24px,2.6vw,40px);border-top:1px solid var(--gd-ink)}
.fn-faq details{border-bottom:1px solid var(--gd-line)}
.fn-faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:clamp(16px,1.4vw,22px) 0;font-weight:700;font-size:clamp(15px,1.05vw,17.5px);letter-spacing:-.02em}
.fn-faq summary::-webkit-details-marker{display:none}
.fn-faq summary b{font-family:var(--gd-serif);font-style:italic;color:var(--gd-brown);font-weight:400;font-size:17px;min-width:36px}
.fn-faq summary i{width:24px;height:24px;border-radius:50%;border:1px solid var(--gd-ink);display:grid;place-items:center;font-style:normal;font-size:16px;line-height:1;transition:transform .3s}
.fn-faq details[open] summary i{transform:rotate(45deg)}
.fn-faq details p{margin:0 0 clamp(16px,1.4vw,22px) 52px;font-size:14.5px;line-height:1.75;color:#3d4352}
@media (max-width:600px){.fn-faq details p{margin-left:0}}

/* --- Frontier Lab 카드(다크 밴드) ---------------------------------------- */
.fn-lab{margin-top:clamp(24px,2.6vw,40px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fn-lab li{padding:clamp(18px,1.5vw,24px);border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.04)}
.fn-lab b{display:block;font-family:var(--gd-serif);font-style:italic;color:var(--gd-hero-italic);font-size:15px;margin-bottom:8px;font-weight:400}
.fn-lab strong{display:block;font-size:15.5px;margin-bottom:8px;letter-spacing:-.02em}
.fn-lab p{font-size:13.5px;line-height:1.6;color:#b6bfd0}
@media (max-width:1024px){.fn-lab{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.fn-lab{grid-template-columns:minmax(0,1fr)}}
.gd-spa-body .fn-lab{grid-template-columns:repeat(2,minmax(0,1fr))}

/* --- «확정 전» 표시 ------------------------------------------------------- */
.fn-tbd{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:6px;background:#fff3cd;color:#7a5a00;font-size:11.5px;font-weight:700;vertical-align:middle;letter-spacing:0;line-height:1.6}
.gd-sec--dark .fn-tbd,.gd-footer .fn-tbd{background:rgba(255,243,205,.18);color:#ffe08a}

/* --- 약도(SVG) ------------------------------------------------------------ */
.fn-map{margin-top:clamp(24px,2.6vw,40px);border-radius:18px;overflow:hidden;border:1px solid var(--gd-line);background:#f5f7fb}
.fn-map svg{display:block;width:100%;height:auto;font-family:var(--gd-ff)}
.gd-map .fn-map{margin-top:0;border:0;border-radius:0}

/* --- 풀블리드 비주얼 밴드 ------------------------------------------------- */
.fn-visual{position:relative;min-height:clamp(320px,42vw,620px);overflow:hidden;border-radius:18px;background:#0f1a2e}
.fn-visual picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.fn-visual img{width:100%;height:100%;object-fit:cover}
.fn-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,20,0) 40%,rgba(6,10,20,.78) 100%)}
.fn-visual-cap{position:absolute;z-index:1;left:clamp(20px,3vw,48px);bottom:clamp(20px,3vw,48px);right:clamp(20px,3vw,48px);color:#fff;max-width:680px}
.fn-visual-cap p{font-size:clamp(18px,1.6vw,26px);font-weight:700;line-height:1.45;letter-spacing:-.02em;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.fn-visual-cap small{display:block;margin-top:8px;font-size:13.5px;color:#d4dcea}

/* --- 칼럼 목록(인사이트) ------------------------------------------------- */
.fn-cols{margin-top:clamp(24px,2.6vw,40px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,20px)}
@media (max-width:768px){.fn-cols{grid-template-columns:minmax(0,1fr)}}
.fn-col{display:block;background:#fff;border:1px solid var(--gd-line);border-radius:18px;padding:clamp(20px,1.7vw,28px);color:inherit;transition:transform .3s var(--gd-ease),box-shadow .3s}
.fn-col:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(10,20,40,.35)}
.fn-col-k{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--gd-muted);margin-bottom:10px}
.fn-col-k b{color:var(--gd-brown-dp);font-weight:700}
.fn-col-t{font-size:clamp(16px,1.2vw,19px);font-weight:700;letter-spacing:-.02em;line-height:1.4}
.fn-col p{margin-top:10px;font-size:14px;line-height:1.7;color:#3d4352}

/* --- 릴스 그리드(인사이트) ----------------------------------------------- */
.fn-reels{margin-top:clamp(24px,2.6vw,40px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.fn-reels a{position:relative;display:block;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#0f1a2e;color:#fff}
.fn-reels img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--gd-ease)}
.fn-reels a:hover img{transform:scale(1.05)}
.fn-reels span{position:absolute;inset:auto 0 0;padding:40px 12px 12px;background:linear-gradient(180deg,rgba(6,10,20,0),rgba(6,10,20,.82));font-size:12.5px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:1024px){.fn-reels{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.fn-reels{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- 정보 카드(오시는 길) ------------------------------------------------ */
.fn-info{margin-top:clamp(24px,2.6vw,40px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,20px)}
@media (max-width:768px){.fn-info{grid-template-columns:minmax(0,1fr)}}
.fn-info>div{background:#fff;border:1px solid var(--gd-line);border-radius:18px;padding:clamp(20px,1.7vw,28px)}
.fn-info h3{font-size:12.5px;letter-spacing:.16em;color:var(--gd-brown-dp);margin-bottom:12px;font-weight:700}
.fn-info p{font-size:15px;line-height:1.7}
.fn-info p+p{margin-top:6px}

/* --- 잔글씨 ---------------------------------------------------------------- */
.fn-fine{margin-top:clamp(18px,1.6vw,26px);font-size:12.5px;line-height:1.7;color:var(--gd-muted)}

/* --- 서브 히어로 이미지 비율(4:3·16:9 생성 이미지) ------------------------ */
.gd-shero-media{aspect-ratio:840/560}

/* --- 서브 히어로 대체: 원장 사진 카드 ------------------------------------- */
.fn-shero-doc{display:grid;place-items:center;padding:clamp(24px,3vw,48px) 0}

/* --- 진료 흐름(체인) 색 보정 ---------------------------------------------- */
.gd-chain li:last-child{border-color:var(--gd-brown)}

/* --- 인용문(원장 한마디) --------------------------------------------------- */
.fn-say{margin-top:clamp(20px,2vw,32px);padding:clamp(20px,2vw,32px);border-left:3px solid var(--gd-brown);background:#fff;border-radius:0 18px 18px 0;font-size:clamp(15px,1.1vw,18px);line-height:1.7;letter-spacing:-.02em}
.fn-say small{display:block;margin-top:10px;font-size:13px;color:var(--gd-muted)}

/* --- 의료진 페이지 히어로용 큰 원형 포트레이트 ------------------------------ */
.fn-doc-ring--lg{width:min(100%,440px)}

/* --- 한글 제목 카드는 세리프 폴백(바탕체) 대신 Pretendard ------------------- */
.gd-cards--ko .gd-card-t{font-family:var(--gd-ff);letter-spacing:-.025em}
.fn-doc-note{margin-top:30px;text-align:center;max-width:320px}