/* ==========================================================================
   urolink 콘텐츠 서브페이지 공통 레이아웃
   원본: D:\프로젝트\유로링크\ROOT\css\content.css 이식(01about·02products·03inquiry·
   04contact 페이지가 함께 사용). 서브페이지 헤더의 라이트 글래스 테마는 레이아웃
   스킨(css_images/style.css)의 .site-header 기본값이 이미 담당하므로 여기서는 생략.
   ========================================================================== */

/* ==========================================================================
   has-dropdown / dropdown 베이스 — hero-location 칩(아래) 전용.
   ⚠ 레이아웃 스킨(GNB)도 같은 클래스명을 쓰지만 그쪽은 `.gnb .has-dropdown …`로
   스코프되어 있어 서로 침범하지 않는다. 이 페이지-로컬 위젯은 원본 마크업의
   클래스명(has-dropdown/dropdown)을 그대로 사용한다.
   ========================================================================== */
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  min-width:250px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 30px 60px -16px rgba(10,15,25,.14);
  padding:14px 8px 8px;
  margin-top:16px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.dropdown::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{ opacity:1; pointer-events:auto; }
.dropdown li a, .dropdown li button{
  display:flex;
  flex-direction:column;
  gap:2px;
  width:100%;
  text-align:left;
  padding:11px 14px;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  background:transparent;
  border:none;
  cursor:pointer;
}
.dropdown li a:hover, .dropdown li button:hover{ background:var(--paper-soft); color:var(--blue-deep); }
.dropdown li a.is-active{ background:var(--paper-soft); color:var(--blue-deep); }
.dropdown li small{ font-weight:400; color:var(--mist); font-size:12px; }

/* ==========================================================================
   Section head (공용 — 중앙정렬 헤딩+설명)
   ========================================================================== */
.section-head{ max-width:640px; margin:0 0 clamp(56px, 9vh, 96px); }
.applications .section-head{ max-width:none; }
@media (max-width: 900px){
  .section-head{ margin-bottom:32px; }
}
.section-head h2{
  font-family:'ONE-Mobile-Title', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:clamp(28px, 3.6vw, 44px);
  line-height:1.4;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0 0 18px;
}
.section-head p{ font-size:16px; line-height:1.8; color:var(--mist); margin:0; max-width:640px; }
.section-head p strong{ color:var(--ink); font-weight:700; }
.section-head .section-note{ display:block; font-size:13px; }
@media (max-width: 900px){
  .section-head h2 .nowrap-heading,
  .about-lead-desc .nowrap-heading{ white-space:normal; }
  .section-head h2{ font-size:clamp(24px, 5vw, 32px); margin-bottom:5px; }
  .section-head p{ font-size:14.5px; }
}
.nowrap-heading{ white-space:nowrap; }
@media (max-width: 480px){
  .nowrap-heading{ white-space:normal; }
}

/* ==========================================================================
   Product hero (about-hero — 서브페이지 상단 선언 섹션)
   ========================================================================== */
.about-hero{
  position:relative;
  padding:calc(var(--nav-h) + clamp(60px, 12vh, 140px)) 0 clamp(60px, 9vh, 100px);
}
.about-hero .wrap{ position:relative; z-index:1; }

.about-hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;
  margin-bottom:32px;
}
.about-hero-top .about-lead{ margin:0; }
.about-lead-group{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}
@media (max-width: 900px){
  .about-lead-group{ gap:14px; }
}

/* ==========================================================================
   Hero location chip (현재 위치 + 빠른 이동 드롭다운)
   ========================================================================== */
.hero-location{
  display:flex;
  align-items:center;
  gap:18px;
  flex:none;
  margin-top:10px;
}
.loc-dropdown{ position:relative; }
.loc-home{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  flex:none;
  transition:background .2s ease;
}
.loc-home svg{ width:16px; height:16px; }
.loc-home:hover{ background:var(--blue-deep); color:#fff !important; }
.loc-sep{ width:1px; height:16px; background:var(--line); flex:none; }
.loc-current{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  flex:none;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  user-select:none;
  transition:color .2s ease;
}
.loc-dropdown:hover .loc-current,
.loc-dropdown:focus-within .loc-current{ color:var(--blue-deep); }
.loc-current .chev{ width:13px; height:13px; color:var(--mist); transition:transform .2s ease; }
.loc-current .loc-dot{ display:none; width:11px; height:11px; color:var(--mist); }
#locCategoryToggle{ width:170px; }
#locPageToggle{ width:190px; }
#locationToggle{ width:190px; }

.hero-location .dropdown{
  left:auto; right:0; transform:none; margin-top:14px;
  padding:0;
}
.hero-location .dropdown li a,
.hero-location .dropdown li button{ padding:11px 16px; min-height:54px; justify-content:center; }
.hero-location .dropdown li a:hover,
.hero-location .dropdown li button:hover{ background:var(--paper-soft); }
.hero-location .dropdown li a.is-active{ background:var(--paper-soft); color:var(--blue-deep); }
#locCategoryDropdown .dropdown{ width:170px; min-width:0; }
#locPageDropdown .dropdown{ width:190px; min-width:0; }
#locationDropdown .dropdown{ width:190px; min-width:0; }
@media (max-width: 1200px){
  :root{ --pad: 32px; }
  .about-hero{ padding:var(--nav-h) 0 clamp(32px, 5vh, 50px); }
  .about-hero-top{ flex-direction:column; align-items:stretch; gap:0; margin-bottom:18px; }
  .hero-location{
    order:-1;
    position:relative;
    z-index:50;
    width:calc(100% + var(--pad) * 2);
    margin-left:calc(-1 * var(--pad));
    margin-right:calc(-1 * var(--pad));
    margin-top:0;
    margin-bottom:clamp(24px, 5vh, 48px);
    display:flex;
    gap:0;
    padding:17px var(--pad);
    border-radius:0;
    background:var(--blue-deep);
    border:none;
    border-bottom:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .loc-home, .loc-home + .loc-sep{ display:none; }
  .loc-sep{ background:rgba(255,255,255,.3); }
  .loc-current{ color:#fff; }
  .hero-location:hover .loc-current,
  .hero-location:focus-within .loc-current{ color:#fff; }
  .loc-current .chev{ display:none; }
  .loc-current .loc-dot{ display:block; color:rgba(255,255,255,.7); }
  .hero-location > .loc-dropdown{ flex:1; min-width:0; align-self:stretch; display:flex; align-items:center; position:static; }
  .hero-location > .loc-current{ flex:1; }
  .hero-location > .loc-dropdown + .loc-sep{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    margin:0;
  }
  #locCategoryToggle,
  #locPageToggle{ width:100%; }
  #locCategoryToggle{ padding-right:var(--pad); }
  #locPageToggle{ padding-left:var(--pad); }

  .hero-location .dropdown{
    position:absolute;
    top:100%; left:0; right:0; transform:none;
    display:block;
    opacity:0;
    pointer-events:none;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 20px 40px -12px rgba(10,15,25,.18);
    padding:0;
    margin-top:0;
    min-width:0;
  }
  .hero-location .loc-dropdown.mobile-open .dropdown{
    opacity:1;
    pointer-events:auto;
  }
  .hero-location .dropdown li a,
  .hero-location .dropdown li button{ padding-left:var(--pad); }
  #locCategoryDropdown .dropdown{
    left:0; right:auto; width:50%;
    margin-top:0; min-width:0;
  }
  #locPageDropdown .dropdown{
    left:50%; right:auto; width:50%;
    margin-top:0; min-width:0;
  }
  #locationDropdown .dropdown{
    left:0; right:auto; width:100%;
    margin-top:0; min-width:0;
  }
}

.about-hero-deco{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ahd{ position:absolute; border-radius:50%; filter:blur(60px); }
.ahd-1{
  width:420px; height:420px;
  right:-90px; top:8%;
  background:radial-gradient(circle at 35% 30%, rgba(46,143,239,.5), rgba(46,143,239,0) 70%);
  animation:ahd-float 22s ease-in-out infinite;
}
.ahd-2{
  width:280px; height:280px;
  right:140px; top:50%;
  background:radial-gradient(circle at 40% 40%, rgba(18,59,122,.45), rgba(18,59,122,0) 70%);
  animation:ahd-float 18s ease-in-out infinite reverse;
  animation-delay:2s;
}
.ahd-3{
  width:170px; height:170px;
  right:320px; top:14%;
  background:radial-gradient(circle at 50% 50%, rgba(46,143,239,.35), rgba(46,143,239,0) 70%);
  animation:ahd-float 16s ease-in-out infinite;
  animation-delay:4s;
}
@keyframes ahd-float{
  0%, 100%{ transform:translate(0, 0); filter:blur(60px) hue-rotate(0deg); }
  33%{ transform:translate(-20px, 24px); filter:blur(60px) hue-rotate(35deg); }
  66%{ transform:translate(16px, -18px); filter:blur(60px) hue-rotate(-25deg); }
}
@media (max-width: 900px){
  .about-hero-deco{ display:none; }
  .lead-break{ display:none; }
  .approach-lead,
  .approach-body p{ line-height:1.85; }
}
.about-lead{
  font-family:'ONE-Mobile-Title', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:clamp(32px, 4.6vw, 56px);
  line-height:1.35;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0;
  max-width:900px;
  opacity:0;
  transform:translateY(18px);
  animation:about-fade-up .8s cubic-bezier(.22,1,.36,1) .1s forwards;
}
.lead-accent{ color:var(--blue-deep); }
.about-lead-desc{
  font-size:clamp(15.5px, 1.3vw, 18px);
  line-height:1.65;
  color:var(--mist);
  max-width:680px;
  margin:0;
  opacity:0;
  transform:translateY(16px);
  animation:about-fade-up .8s cubic-bezier(.22,1,.36,1) .3s forwards;
}
.about-lead-desc em{ font-style:normal; color:var(--blue-deep); font-weight:700; }
@media (max-width: 900px){
  .about-lead-desc{ padding-right:230px; line-height:1.65; font-size:14px; }
}
@media (max-width: 680px){
  .about-lead-desc{ padding-right:0; }
}
@keyframes about-fade-up{
  to{ opacity:1; transform:translateY(0); }
}

/* ==========================================================================
   Commitment (선언문 강조 섹션 — 01about, 02products(Dornier)에서 사용)
   ========================================================================== */
.commitment{
  position:relative;
  background:var(--blue-deep);
  color:#fff;
  padding:clamp(80px, 12vh, 140px) 0;
  text-align:center;
}
.commitment::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('/front/img/urolink/greg-rakozy-oMpAz-DN-9I.jpg') center/cover no-repeat;
  filter:blur(8px);
  opacity:.3;
  z-index:0;
}
.commitment .wrap{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.commitment-quote{
  font-family:'ONE-Mobile-Title', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:clamp(26px, 3.6vw, 42px);
  line-height:1.5;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0;
}
.commitment-sub{
  font-size:clamp(15px, 1.3vw, 17px);
  line-height:1.7;
  color:rgba(255,255,255,.72);
  margin:12px 0 0;
}
@media (max-width: 1400px){
  .commitment-quote.nowrap-heading{ white-space:normal; }
}
@media (max-width: 900px){
  .commitment{ text-align:left; padding:clamp(50px, 8vh, 90px) 0; }
  .commitment .wrap{ align-items:flex-start; }
  .commitment::before{ filter:blur(2px); opacity:.4; }
  .commitment-quote{ font-size:22px; }
}
@media (min-width: 901px){
  .commitment-quote, .commitment-sub{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  }
  .commitment-sub{ transition-delay:.15s; }
  .commitment.is-revealed .commitment-quote,
  .commitment.is-revealed .commitment-sub{ opacity:1; transform:translateY(0); }
}
@media (max-width: 480px){
  .commitment{ padding:clamp(36px, 6vh, 60px) 0; }
  :root{ --pad: 20px; }
}