/* #contact{display:flex} in app.css is an ID selector, so it beats the plain
   .screen{display:none} class rule even when #contact isn't the active screen. */
#contact:not(.active) {
  display: none !important;
}

#newsPopup.one-day-popup .news-media {
  padding: 52px 6px 0 !important;
  background: #63a9e8 !important;
}

/* No outline needed here: the "hi" mark's near-white half already reads fine
   against this panel's blue background, so the drop-shadow this used to carry
   just showed up as an unwanted dark border around the logo. */
#newsPopup.one-day-popup .news-media img {
  filter: none !important;
}

#newsPopup.volunteer-popup .news-media {
  padding: 52px 22px 0 !important;
}

#newsPopup.partner-popup .news-media {
  padding: 52px 12px 0 !important;
}

#newsPopup .news-media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0 !important;
}

#newsPopup .news-media img {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  cursor: zoom-in;
}

#newsPopup .news-copy {
  flex: 1 1 auto !important;
  padding-top: 22px !important;
  padding-bottom: 6px !important;
}

#newsPopup .news-copy > p:not(.eyebrow) {
  margin-bottom: 10px !important;
}

#newsPopup .news-action {
  margin-top: 0 !important;
}

#newsPopup .news-controls {
  padding-top: 0 !important;
  padding-bottom: 5px !important;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 24px;
}

.image-lightbox[hidden] {
  display: none;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(4, 22, 48, .9);
}

.image-lightbox img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: min(92vw, 760px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}

.lightbox-close {
  position: fixed;
  z-index: 2;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #061d45;
  font-size: 27px;
  line-height: 1;
}

.lightbox-action {
  position: relative;
  z-index: 1;
  width: min(92vw, 760px);
  height: 52px;
  margin-top: 16px;
  border: 0;
  border-radius: 26px;
  padding: 0 22px;
  background: #061d45;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lightbox-action[hidden] {
  display: none;
}

.app-shell #home .feature-card img {
  cursor: pointer;
}

#newsPopup .news-media .zoom-hint {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  left: auto;
  padding: 7px 11px;
  border-radius: 20px;
  background: rgba(6, 29, 69, .82);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  pointer-events: none;
}

/* Compact phone popup layout: fixed box size so it stays identical across every partner. */
#newsPopup .news-panel {
  width: min(100%, 390px) !important;
  height: min(480px, calc(100dvh - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
}

#newsPopup .news-media {
  flex: 0 0 205px !important;
  height: 205px !important;
}

#newsPopup.one-day-popup .news-media {
  padding: 5px 5px 0 !important;
}

#newsPopup.volunteer-popup .news-media {
  padding: 38px 24px 0 !important;
}

#newsPopup.partner-popup .news-media {
  padding: 34px 14px 0 !important;
}

#newsPopup .news-copy {
  padding: 15px 20px 8px !important;
  overflow-y: auto !important;
}

#newsPopup .news-copy .eyebrow {
  margin-bottom: 6px;
  font-size: 9px;
}

#newsPopup .news-copy h2 {
  margin-bottom: 7px;
  font-size: 21px;
  line-height: 1.22;
}

#newsPopup .news-copy > p:not(.eyebrow) {
  margin-bottom: 10px !important;
  font-size: 12px;
  line-height: 1.45;
}

#newsPopup .news-action {
  height: 44px;
}

#newsPopup .news-controls {
  padding: 2px 20px 7px !important;
}

#newsPopup .news-controls button {
  width: 30px;
  height: 30px;
}

#newsPopup .news-footer button {
  height: 42px;
}

/* Contact pages: equal title sizing and clear spacing above submit button. */
#contact .page-heading h1 {
  height: auto !important;
  min-height: 0 !important;
  white-space: nowrap;
  font-size: 19px !important;
  line-height: 1.2 !important;
}

#contact .contact-form {
  grid-template-rows: repeat(4, auto) minmax(96px, 1fr) 50px 8px !important;
  row-gap: 7px !important;
}

#contact .contact-form label:last-of-type {
  min-height: 96px;
  margin-bottom: 5px;
}

#contact .submit-button {
  align-self: end;
  height: 44px !important;
  margin-top: 5px !important;
}

@media (max-width: 380px), (max-height: 740px) {
  #newsPopup .news-media {
    flex-basis: 180px !important;
    height: 180px !important;
  }

  #newsPopup .news-copy {
    padding-top: 12px !important;
  }

  #contact .page-heading h1 {
    font-size: 17px !important;
  }

  #contact .contact-form {
    grid-template-rows: repeat(4, auto) minmax(82px, 1fr) 48px 8px !important;
  }
}

/* Contact opened from volunteer and partner popups: separate header, field and action. */
#contact.volunteer-contact .page-heading,
#contact.general-contact .page-heading {
  padding-top: 18px !important;
  padding-bottom: 9px !important;
}

#contact.volunteer-contact,
#contact.general-contact {
  height: calc(100dvh - 162px) !important;
  margin-top: 8px !important;
}

#contact.volunteer-contact .contact-form,
#contact.general-contact .contact-form {
  grid-template-rows: repeat(4, auto) minmax(84px, 1fr) 52px 8px !important;
  row-gap: 7px !important;
}

#contact.volunteer-contact .contact-form label:last-of-type,
#contact.general-contact .contact-form label:last-of-type {
  min-height: 84px;
  margin-bottom: 0 !important;
  padding-bottom: 18px;
}

#contact.volunteer-contact .contact-form textarea,
#contact.general-contact .contact-form textarea {
  min-height: 70px !important;
}

#contact.volunteer-contact .submit-button,
#contact.general-contact .submit-button {
  align-self: end;
  height: 44px !important;
  margin-top: 8px !important;
  transform: translateY(8px);
}

/* Compact home learning card using the website's light-blue palette. */
.app-shell #home .hero {
  min-height: 280px !important;
  padding: 23px 22px 18px !important;
  background: linear-gradient(125deg, #dbeaff 0%, #eef5ff 100%) !important;
  border-color: #c9ddf5 !important;
  color: #061d45 !important;
}

.app-shell #home .hero-semicircle {
  width: 180px;
  height: 90px;
  border-radius: 0 0 0 90px;
  background: #abd9bd !important;
}

.app-shell #home .hero h1 {
  margin-bottom: 12px;
  color: #061d45 !important;
  font-size: 32px;
}

.app-shell #home .hero h1 em {
  color: #1155d9 !important;
}

.app-shell #home .hero .eyebrow {
  margin-bottom: 9px;
  color: #1155d9 !important;
}

.app-shell #home .hero p:not(.eyebrow) {
  margin-bottom: 9px;
  color: #526681 !important;
  font-size: 12px;
  line-height: 1.55;
}

.app-shell #home .primary-action {
  height: 42px;
  margin-top: 5px;
}

.app-shell #home .hero-mark {
  right: 17px;
  bottom: 18px;
  width: 82px;
  height: 82px;
  border-color: rgba(6,29,69,.18);
}

.app-shell #home .hero-mark span {
  inset: 14px;
  font-size: 24px;
}

@media (max-height: 740px) {
  #contact.volunteer-contact .page-heading,
  #contact.general-contact .page-heading {
    padding-top: 14px !important;
  }

  #contact.volunteer-contact .contact-form,
  #contact.general-contact .contact-form {
    grid-template-rows: repeat(4, auto) minmax(68px, 1fr) 48px 8px !important;
  }
}

/* Keep all three flyers aligned directly below the blue category badge. */
#newsPopup .news-media,
#newsPopup.one-day-popup .news-media,
#newsPopup.volunteer-popup .news-media,
#newsPopup.partner-popup .news-media {
  flex-basis: 220px !important;
  height: 220px !important;
  padding: 48px 12px 0 !important;
}

#newsPopup .news-panel > .zoom-hint {
  position: static;
  display: block;
  align-self: center;
  margin: 5px 0 0;
  padding: 3px 10px;
  border-radius: 12px;
  background: #eef5ff;
  color: #65738a;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  pointer-events: none;
}

#newsPopup .news-panel > .zoom-hint + .news-copy {
  padding-top: 10px !important;
}

@media (max-width: 380px), (max-height: 740px) {
  #newsPopup .news-media,
  #newsPopup.one-day-popup .news-media,
  #newsPopup.volunteer-popup .news-media,
  #newsPopup.partner-popup .news-media {
    flex-basis: 190px !important;
    height: 190px !important;
    padding-top: 45px !important;
  }
}

.install-button.install-highlight{animation:installPulse 1.3s ease-in-out infinite;box-shadow:0 0 0 5px rgba(66,153,255,.2)}
@keyframes installPulse{50%{transform:scale(1.06);box-shadow:0 0 0 9px rgba(66,153,255,.1)}}

/* Installed app: membership replaces the no-longer-useful install action. */
.member-button{display:flex;height:38px;padding:0 13px;border-radius:20px;background:#061d45;color:#fff;text-decoration:none;align-items:center;font-size:12px;font-weight:800;white-space:nowrap}
#installButton{display:none!important}

.events-main-title{font-size:28px!important;line-height:1.25!important;letter-spacing:-.055em!important;white-space:nowrap}
@media(max-width:410px){.events-main-title{font-size:24px!important}}

.event-card .event-image-open{display:block;position:relative;width:100%;padding:0;border:0;background:#eef5ff;cursor:zoom-in;text-align:center}
.event-card .event-image-open img{display:block;width:100%;height:240px;object-fit:cover}
.event-card .event-image-open span{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:7px 13px;border-radius:16px;background:rgba(6,29,69,.9);color:#fff;font-size:11px;font-weight:800;white-space:nowrap;box-shadow:0 5px 16px rgba(6,29,69,.2)}
.event-card .event-image-open:focus-visible{outline:3px solid #2d7be8;outline-offset:-3px}

/* Shared featured program logos. */
/* .program-art is a place-items:center grid, so a plain height:100% on the image doesn't resolve against its fixed height (align-items:center means the item isn't stretched) — the browser falls back to the image's intrinsic aspect ratio instead, letting it spill out of the box and overlap the title below. Absolute-position it against the box instead so it's always exactly the container's size regardless of grid alignment. */
.program-art{position:relative;overflow:hidden}
.program-art img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10px;border-radius:inherit}
.program-mini .program-art img{padding:12px}

/* Yura Kim's partner card: match the homepage/popup treatment — the HL mark on
   its own gray tile with a caption underneath, on the same sky-blue card
   background every other partner logo uses here. */
.program-mini .program-art.yura-mini-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.program-mini .program-art.yura-mini-logo:before{content:"";display:block;width:66px;height:66px;border-radius:9px;background:#b8b8b6 url("../assets/ads/highline-hl-symbol.png") center/cover no-repeat}
.program-mini .program-art.yura-mini-logo:after{content:"HIGHLINE\A RESIDENTIAL";white-space:pre;text-align:center;color:#6b7684;font-size:8px;font-weight:700;letter-spacing:.05em;line-height:1.3}

/* Volunteer card: one-line heading above a full-width image. */
.app-shell #home .feature-card{grid-template-columns:1fr;padding:20px;gap:14px}
.app-shell #home .feature-card>div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.app-shell #home .feature-card h2{width:100%;margin:4px 0 2px;font-size:18px;line-height:1.35;white-space:nowrap;letter-spacing:-.045em}
.app-shell #home .feature-card img{grid-column:1;width:100%;height:190px;object-fit:contain;border-radius:18px;background:#eef5ff}

/* Strong, visible inquiry result feedback. */
.form-status.success{padding:10px 12px;border-radius:12px;background:#e8f7ef;color:#12623c;font-weight:800}
.form-status.error{padding:10px 12px;border-radius:12px;background:#fff0f0;color:#9b1c1c;font-weight:700}
.contact-toast{position:fixed;left:50%;bottom:98px;z-index:120;transform:translateX(-50%);width:min(calc(100% - 32px),480px);padding:15px 17px;border-radius:16px;background:#061d45;color:#fff;box-shadow:0 18px 45px rgba(6,29,69,.28);display:flex;align-items:center;gap:11px;font-size:14px;font-weight:800}
.contact-toast[hidden]{display:none}.contact-toast b{width:26px;height:26px;border-radius:50%;background:#79b7ff;display:grid;place-items:center}

@media(max-width:380px){.app-shell #home .feature-card h2{font-size:16px}.member-button{padding:0 10px;font-size:11px}}

/* Home: 협력업체·광고 (partners/ads) list reuses the .program-mini card look, and the community CTA reuses the feature-card look. .program-mini is now sometimes an <a> (external partner links) instead of an <article>, so reset link styling explicitly. */
a.program-mini{color:inherit;text-decoration:none}
a.program-mini h3{color:inherit;text-decoration:none}
/* Yura Kim's title carries a "High Line Residential" sub-line via <small>; without
   this it runs into the name on one line instead of dropping underneath it. */
.program-mini h3 small{display:block;margin-top:2px;font-size:.6em;font-weight:600;color:var(--muted,#65738a)}
.community-card{margin:30px 20px 0;background:var(--mint,#dbeaff);border-radius:24px;padding:22px;display:grid;gap:14px}
.community-card h2{font-size:19px;line-height:1.4;margin:0 0 8px}
.community-card p{color:var(--muted,#65738a);font-size:13px;line-height:1.6;margin:0}
.community-card-link{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 20px;border-radius:24px;background:#061d45;color:#fff;font-weight:700;text-decoration:none}
@media(max-width:380px){.community-card h2{font-size:17px}}

/* Events: upcoming classes show first; past ones collapse under a toggle so new dates always surface automatically. */
.past-events-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 40px);margin:0 20px 20px;height:44px;border:1px dashed var(--line,#dce6f3);border-radius:16px;background:none;color:var(--muted,#65738a);font-weight:700;font-size:13px}
.past-events-toggle b{font-weight:400;font-size:15px;transition:transform .2s}
.past-events-toggle.open b{transform:rotate(180deg)}
.past-events-list[hidden]{display:none}
.past-events-list .event-card{opacity:.72}
/* Popup logo backdrop: match the homepage popup's per-kind treatment (styles.css .promotion-news-media[data-kind]),
   rather than forcing every partner onto the same color. Advertising/community logos sit on the homepage's
   default light-blue gradient with their own white background removed; program (digital/english/melody) logos
   keep the homepage's white card, since those logo files are designed for a white backdrop. */
#newsPopup .news-media{background:linear-gradient(145deg,#e8f3ff,#cfe5ff)!important}
#newsPopup .news-media img{background:transparent!important}
#newsPopup[data-kind="benefit"] .news-media{background:#63a9e8!important}
#newsPopup[data-kind="program"] .news-media{background:#fff!important}
#newsPopup[data-kind="program"] .news-media img{background:#fff!important}

/* Yura Kim: show the brokerage name right beside her own name, small and inline. */
#newsPopup .news-copy h2 small{display:inline;margin-left:6px;font-size:.5em;font-weight:600;color:#3f5876}

/* AALEAC: force the long council name onto one line so the contact line below it doesn't get pushed down,
   push "지원합니다" onto its own line, and nudge the shield up instead of sitting flush on the bottom edge. */
#newsPopup[data-item="aaleac"] .news-copy h2{font-size:17px!important;line-height:1.3!important;white-space:nowrap!important}
#newsPopup[data-item="aaleac"] .news-media img{object-position:center 75%!important}

/* OrganicOne: the wordmark is short and wide, so center it instead of pinning it to the bottom. */
#newsPopup[data-item="organic"] .news-media img{object-position:center!important}

/* OrganicOne, HOLE19, AALEAC, Jangsu: match the homepage popup, which gives these four
   a white card instead of the default light-blue gradient (melody/yura/digital/english/
   the PREMIUM card already match the homepage and are untouched here). */
#newsPopup[data-item="organic"] .news-media,
#newsPopup[data-item="hole19"] .news-media,
#newsPopup[data-item="aaleac"] .news-media,
#newsPopup[data-item="jangsu"] .news-media{background:#fff!important}

/* Yura Kim: reproduce the homepage's exact treatment — the HL mark on its own
   small gray tile (not a full-bleed backdrop) with a HIGHLINE / RESIDENTIAL
   caption underneath it, on a plain white panel. */
#newsPopup[data-item="yura"] .news-media{background:#fff!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:12px!important;padding:0!important}
#newsPopup[data-item="yura"] .news-media img{display:none!important}
#newsPopup[data-item="yura"] .news-media:before{content:"";display:block;width:130px;height:130px;border-radius:10px;background:#b8b8b6 url("../assets/ads/highline-hl-symbol.png") center/cover no-repeat}
#newsPopup[data-item="yura"] .news-media:after{content:"HIGHLINE\A RESIDENTIAL";white-space:pre;text-align:center;color:#6b7684;font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.4}
.top-community-link{height:38px;display:inline-flex;align-items:center;padding:0 12px;border-radius:20px;background:#e7f2ff;color:#075bb5;font-size:11px;font-weight:800;text-decoration:none}
@media(max-width:430px){.top-community-link{position:fixed;right:14px;bottom:90px;z-index:29;height:44px;padding:0 16px;border:1px solid #c9ddf4;box-shadow:0 10px 24px rgba(6,29,69,.18);font-size:12px}.top-actions{gap:5px}}
.event-placeholder-art{height:180px;display:grid;place-items:center;background:linear-gradient(145deg,#eef6ff,#dbeaff);color:#075bb5;font-size:56px}.event-placeholder{border-style:dashed}