@charset "utf-8";
/*
 * 해외마케팅 상세페이지(sub/global.php) 전용 부품(.gl-*).
 * 공통 부품(.yt-*: 색 변수·구역·제목·카드·폼·스크롤 등장)은 sub/youtube/youtube.css를 함께 불러 쓴다.
 * 디자인 기준은 유튜브 페이지와 같다: 스타닥 마케팅 방식 페이지의 각진 모서리, 사이트 레드(--yt-red), Pretendard.
 * 시안(이미지)의 분홍 포인트·둥근 카드·세리프 영문 제목은 사이트 기준으로 바꿨다.
 */

.gl-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* 문장 줄바꿈: <br class="yt-pc">는 넓은 화면에서만(youtube.css), <br class="gl-mo">는 휴대폰에서만 쓴다.
   짧은 설명(권역 카드 칸)은 줄 길이를 고르게 나눠 마지막 줄에 한두 단어만 남지 않게 한다. */
.yt br.gl-mo { display: none; }
.gl-market__rows dd, .gl-step__text, .yt-profile__list li { text-wrap: balance; }

/* HERO 왼쪽 문구. 제목은 3줄(휴대폰 4줄)로 끊고, 설명은 문단 두 개로 나눈다.
   제목이 70px·4줄이면 설명이 첫 화면 밖으로 밀려나서 유튜브 페이지보다 작게 둔다. */
.gl-hero .yt-hero__title { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.3; }
.gl-hero .yt-hero__desc { font-size: 18px; line-height: 1.7; }
.gl-hero .yt-hero__desc p + p { margin-top: 12px; }

/* 배경 사진(sub/global/img/, Pixabay). 글자 뒤에서는 사라지도록 마스크로 한쪽만 남긴다.
   첫 화면: 비행기 창밖 날개와 해 질 녘 구름. Why Global: 항공권·여권을 오른쪽 위 모서리에만. */
.gl-hero, .gl-sec--travel { position: relative; isolation: isolate; }
.gl-hero { overflow: hidden; }
.gl-hero::before, .gl-sec--travel::before { content: ""; position: absolute; z-index: -1; inset: 0; background: no-repeat; pointer-events: none; }
/* 날개 끝이 왼쪽 글(제목·설명)에 가리지 않게, 사진(1440px)의 왼쪽 끝을 화면 가운데에서 160px 왼쪽에 둔다.
   그러면 날개 끝이 제목 오른쪽 틈에서 사선으로 내려와 피드 뒤(카드가 살짝 비침)를 지나고, 날개 면은 첫 화면 아래쪽에 보인다.
   화면 가운데 기준이라 넓은 화면에서도 글·피드와의 위치가 같다. 사진이 오른쪽으로 넘치는 부분은 .gl-hero가 자른다.
   위(메뉴 아래)와 사진 왼쪽 끝은 마스크 두 개를 겹쳐 흐린다. 위쪽 흐림은 사진 윗변(첫 화면 약 13% 지점)보다 아래에서 시작해야 윗변이 가로선으로 보이지 않는다. */
.gl-hero::before { inset: 0 auto 0 50%; width: 1440px; margin-left: -160px; background-image: url("img/gl-wing.jpg"); background-size: 100% auto; background-position: left bottom -40px; opacity: 0.42; -webkit-mask-image: linear-gradient(to bottom, transparent 14%, #000000 42%), linear-gradient(to right, transparent 0, #000000 260px); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 14%, #000000 42%), linear-gradient(to right, transparent 0, #000000 260px); mask-composite: intersect; }
/* 한 단으로 쌓이는 폭에서는 글이 화면 전체에 걸쳐 있어, 사진을 가로폭에 맞춰 맨 아래(문의 피드 뒤)에만 남긴다. */
@media (max-width: 1024px) {
  .gl-hero::before { inset: 0; width: auto; margin-left: 0; background-size: max(100%, 900px) auto; background-position: 20% bottom; opacity: 0.3; -webkit-mask-image: linear-gradient(to bottom, transparent 45%, #000000 85%); -webkit-mask-composite: source-over; mask-image: linear-gradient(to bottom, transparent 45%, #000000 85%); mask-composite: add; }
}
.gl-sec--travel::before { background-image: url("img/gl-travel.jpg"); background-size: min(960px, 72%) auto; background-position: right top; opacity: 0.34; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 100% 0, #000000 20%, transparent 100%); mask-image: radial-gradient(ellipse 60% 70% at 100% 0, #000000 20%, transparent 100%); }

/* HERO 오른쪽: 해외 환자 문의가 끝없이 들어오는 피드(틀·제목 없이 문의 카드만) */
.gl-inbox__list { display: flex; flex-direction: column; gap: 8px; }
/* 카드 배경은 살짝 비치게 해서 뒤의 날개가 보이게 한다 */
.gl-msg { display: flex; gap: 14px; padding: 13px 16px; border: 1px solid #34353B; background: rgba(44, 45, 50, 0.8); }
.gl-msg__from { flex: 0 0 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.3); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; color: #FFFFFF; }
.gl-msg__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gl-msg__meta { font-size: 12px; color: var(--yt-muted); }
.gl-msg__meta em { margin-right: 8px; padding: 2px 8px; background: rgba(194, 58, 49, 0.2); font-style: normal; font-weight: 600; color: var(--yt-red-light); }
.gl-msg__text { font-size: 15px; line-height: 1.5; color: #FFFFFF; letter-spacing: normal; }
.gl-msg__ko { font-weight: 300; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
/* 피드 창: 높이를 고정하고 위는 넓게, 아래는 끝만 살짝 흐려 문의가 아래에서 들어와 위로 사라지는 것처럼 보이게 한다.
   창 높이와 보여 두는 건수는 함께 맞춘다. PC: 카드 96px + 간격 8px로 6건 = 616px, 창 650px.
   1024px 이하: 4건, 창 440px(태블릿 4건 416px), 768px 이하 창 500px(휴대폰 4건 최대 496px).
   새 문의는 마지막 칸(창 아래쪽, 다 보이는 자리)에 들어온다. 창이 건수보다 작으면 새 문의가 창 밖에 들어와 보이지 않으니,
   카드 크기를 바꾸면 이 값도 다시 맞춘다. 나머지 문의는 숨겨 두고 global.js가 차례로 꺼낸다. */
.gl-inbox__view { height: 650px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000000 14%, #000000 90%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000000 14%, #000000 90%, transparent 100%); }
.gl-inbox__list > .gl-msg:nth-child(n+7) { display: none; }
/* 막 들어오는 문의는 숨김 규칙(n+7, 1024px 이하 n+5)보다 우선해 보인다. :nth-child(n)은 우선순위를 올리려고 붙였다. */
.gl-inbox__list > .gl-msg.is-new:nth-child(n) { display: flex; }
/* 맨 위 문의는 위 흐린 곳으로 올라가며 사라진다 */
.gl-msg.is-out { opacity: 0; transition: opacity 0.6s; }
/* 새 문의: 아래에서 떠오르며 나타나고(gl-in), 붉은 배경·빨간 테두리·왼쪽 빨간 선으로 반짝 켜졌다가 스르르 사라진다(gl-flash, 1.5초).
   0~8%(0.12초) 밝게 켜짐 → 30%(0.45초)까지 빠르게 한 단계 옅어짐 → 끝까지(약 1초) 천천히 꺼짐. 단계마다 곡선을 따로 준다.
   gl-in은 끝나면 원래 모양으로 돌아가도록 fill을 backwards로 둔다. both로 두면 transform이 묶인다. */
@keyframes gl-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes gl-flash {
  0% { background-color: rgba(194, 58, 49, 0.2); border-color: rgba(228, 106, 97, 0.5); box-shadow: inset 3px 0 0 var(--yt-red); animation-timing-function: ease-out; }
  8% { background-color: rgba(228, 70, 60, 0.5); border-color: rgba(255, 140, 130, 0.95); box-shadow: inset 4px 0 0 #FF6B5E; animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1); }
  30% { background-color: rgba(194, 58, 49, 0.24); border-color: rgba(228, 106, 97, 0.45); box-shadow: inset 3px 0 0 var(--yt-red); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
  100% { background-color: rgba(44, 45, 50, 0.8); border-color: #34353B; box-shadow: inset 3px 0 0 transparent; }
}

/* 흐르는 띠(장식): 시안의 분홍 띠를 사이트 레드로 */
.gl-marquee { overflow: hidden; background: var(--yt-red); color: #FFFFFF; }
.gl-marquee__track { display: flex; width: max-content; }
.gl-marquee__track span { display: flex; align-items: center; gap: 28px; padding: 16px 0 16px 28px; font-size: 18px; font-weight: 600; letter-spacing: 0.08em; white-space: nowrap; }
.gl-marquee__track span::after { content: "\2726"; font-size: 14px; opacity: 0.7; }

/* 카드 안 제목·설명·작은 태그 */
.gl-card__title { font-size: 22px; font-weight: 600; line-height: 1.4; }
.gl-card__text { font-weight: 300; font-size: 17px; line-height: 1.6; color: var(--yt-text-2); }
.gl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-tags span { padding: 4px 10px; border-radius: var(--yt-tag-r); background: var(--yt-dark-2); font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.yt-card .gl-tags { margin-top: auto; padding-top: 8px; }

/* THREE MARKETS: 권역 카드. 위쪽 빨간 굵은 선, 오른쪽 위 큰 글자, 아래 4줄 표 */
.gl-markets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.gl-market { border: 1px solid var(--yt-line); border-top: 3px solid var(--yt-red); padding: 32px 28px 12px; display: flex; flex-direction: column; }
/* 카드 맨 위 도시 사진: 카드 안쪽 여백을 넘어 테두리까지 채운다 */
.gl-market__photo { margin: -32px -28px 28px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--yt-dark-2); }
.gl-market__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gl-market__head { position: relative; padding: 0 64px 24px 0; border-bottom: 1px solid var(--yt-line); }
.gl-market__name { font-size: 28px; font-weight: 700; line-height: 1.3; }
.gl-market__glyph { position: absolute; top: -6px; right: 0; font-family: Georgia, "Times New Roman", serif; font-size: 48px; line-height: 1; color: rgba(255, 255, 255, 0.35); }
.gl-market__area { padding-top: 8px; font-weight: 300; font-size: 15px; color: var(--yt-text-2); }
.gl-market__rows > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
.gl-market__rows > div + div { border-top: 1px solid var(--yt-line); }
.gl-market__rows dt { font-size: 14px; color: var(--yt-muted); }
.gl-market__rows dd { margin: 0; font-size: 16px; line-height: 1.6; }

/* HOW WE WORK: 공통 항목 머리(.yt-items)를 3열로 */
.gl-items { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 56px 48px; }
.gl-items .yt-item__text { padding-bottom: 16px; }

/* BEAUTIPIN: 왼쪽 소개 + 오른쪽 매거진 표지 예시 */
.gl-pin { display: flex; flex-wrap: wrap; gap: 60px; align-items: center; }
.gl-pin__copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.gl-pin__brand { font-size: 50px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--yt-red); }
.gl-pin__list { display: flex; flex-direction: column; gap: 16px; }
.gl-pin__list li { position: relative; padding-left: 16px; font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--yt-text-2); }
.gl-pin__list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 5px; height: 5px; border-radius: 50%; background: var(--yt-red); }
.gl-pin__list b { display: block; margin-bottom: 2px; font-size: 18px; color: #FFFFFF; }
.gl-pin__mock { flex: 1 1 380px; min-width: 0; max-width: 520px; padding: 0 16px 16px 0; }
.gl-zine { position: relative; padding: 36px 36px 28px; background: #F8F4EC; color: #1B1B1B; box-shadow: 16px 16px 0 var(--yt-red); transform: rotate(-1.5deg); }
.gl-zine__top { display: flex; align-items: baseline; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid #D9D2C4; }
.gl-zine__top strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.gl-zine__top span { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; }
.gl-zine__top em { margin-left: auto; font-size: 10px; font-style: normal; letter-spacing: 0.12em; color: #777777; }
.gl-zine__photo { margin-top: 20px; aspect-ratio: 4 / 3; overflow: hidden; }
.gl-zine__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 75% center; }
.gl-zine__tag { display: inline-block; margin: 24px 0 14px; padding: 3px 8px; border: 1px solid #1B1B1B; font-size: 10px; letter-spacing: 0.2em; }
.gl-zine__title { font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.15; letter-spacing: -0.01em; }
.gl-zine__title i { color: var(--yt-red); }
.gl-zine__foot { display: flex; justify-content: space-between; margin-top: 36px; padding-top: 14px; border-top: 1px solid #D9D2C4; font-size: 11px; letter-spacing: 0.18em; color: #555555; }

/* 예약 흐름 5단계: 공통 PROCESS 선(.yt-process)을 그대로 쓰고 단계 번호만 크게 */
.gl-flow .yt-process__step { font-size: 22px; letter-spacing: 0; }

/* PROCESS: 흰 단계 카드 6개. 번호는 counter로 붙인다 */
.gl-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; counter-reset: gl-step; }
.gl-step { counter-increment: gl-step; display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 24px; background: #FFFFFF; }
.gl-step::before { content: "0" counter(gl-step); font-size: 30px; font-weight: 300; line-height: 1; color: var(--yt-red); }
.gl-step__title { font-size: 19px; font-weight: 600; line-height: 1.4; }
.gl-step__text { font-weight: 300; font-size: 15px; line-height: 1.6; color: #444444; }
.gl-step__who { margin-top: auto; padding-top: 12px; border-top: 1px solid #E2E2E2; font-size: 13px; font-weight: 600; color: #6B6B6B; }

/* CONTACT 안내 목록: 빨간 체크 */
.gl-checks { display: flex; flex-direction: column; gap: 10px; padding: 24px 28px; background: rgba(255, 255, 255, 0.06); }
.gl-checks li { position: relative; padding-left: 28px; font-weight: 300; font-size: 16px; line-height: 1.6; }
.gl-checks li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 12px; height: 7px; border-left: 2px solid var(--yt-red-light); border-bottom: 2px solid var(--yt-red-light); transform: rotate(-45deg); }

/* 관심 시장 라디오와 문의 내용(여러 줄)은 다른 문의 폼과 같은 공통 부품을 쓴다(2026-10-21):
   라디오 버튼은 sub/contact/contact-form.css의 .cf-group·.cf-radios, 여러 줄 입력은 youtube.css의 .yt-field textarea */

@media (prefers-reduced-motion: no-preference) {
  /* 띠는 같은 줄 8개 중 절반(4줄) 길이만큼 왼쪽으로 흐르고 처음으로 돌아온다. 한 줄에 40초(PC 초당 약 25px) 속도다 */
  .gl-marquee__track { animation: gl-marquee 160s linear infinite; }
  /* 문의함 메시지가 차례로 들어온다 */
  .gl-msg { animation: yt-up 0.6s ease-in-out both; }
  .gl-msg:nth-child(1) { animation-delay: 0.5s; }
  .gl-msg:nth-child(2) { animation-delay: 0.75s; }
  .gl-msg:nth-child(3) { animation-delay: 1s; }
  .gl-msg:nth-child(4) { animation-delay: 1.25s; }
  .gl-msg:nth-child(5) { animation-delay: 1.5s; }
  .gl-msg:nth-child(6) { animation-delay: 1.75s; }
  /* 반복이 시작되면(global.js가 is-live를 붙임) 처음 등장 애니메이션을 끄고, 새로 들어오는 문의만 움직인다.
     끄지 않으면 자리를 옮긴 문의가 nth-child 지연값으로 다시 등장한다. */
  .gl-inbox__list.is-live > .gl-msg { animation: none; }
  .gl-inbox__list.is-live > .gl-msg.is-new { animation: gl-in 0.7s var(--yt-ease) backwards, gl-flash 1.5s linear both; }
}
@keyframes gl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 1024px) {
  .gl-inbox__view { height: 440px; }
  .gl-inbox__list > .gl-msg:nth-child(n+5) { display: none; }
  .gl-pin__brand { font-size: min(7.8125vw, 50px); }
  .gl-card__title { font-size: 20px; }
  .gl-card__text { font-size: 16px; }
}
@media (max-width: 768px) {
  .yt br.gl-mo { display: inline; }
  .gl-hero .yt-hero__desc { font-size: 16px; }
  .gl-marquee__track span { gap: 20px; padding: 12px 0 12px 20px; font-size: 15px; }
  /* 휴대폰은 문장이 두 줄로 꺾여 카드가 97~118px이라, 4건이 가장 길 때(496px)도 들어가게 창을 키운다 */
  .gl-inbox__view { height: 500px; }
  .gl-msg { padding: 14px; gap: 10px; }
  .gl-msg__from { flex-basis: 34px; height: 34px; font-size: 12px; }
  .gl-msg__text { font-size: 14px; }
  .gl-market { padding: 28px 20px 8px; }
  .gl-market__photo { margin: -28px -20px 24px; }
  .gl-sec--travel::before { background-size: 110% auto; }
  .gl-market__rows > div { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
  .gl-zine { padding: 28px 24px 22px; }
  .gl-zine__top em { display: none; }
  .gl-checks { padding: 20px; }
}