/* DURU KOREAN — the home page, restyled (owner, 2026-10-05)
 *
 * Soft blush and plum in place of the deep green, and the five ways in as
 * a grid of coloured cards (the owner's own design). Scoped to
 * body.home-v2 so every other page keeps style.css as it is until the
 * owner says otherwise. Same markup, same words, same ten languages.
 */

body.home-v2 {
  --hv-bg: #fbf8f6;
  --hv-blush: #f6ece9;
  --hv-line: #ece2e2;
  --hv-ink: #2b2430;
  --hv-ink2: #5d5260;
  --hv-mute: #8c8090;
  --hv-plum: #7a4e66;
  --hv-plum-d: #5f3a4f;
  --hv-rose: #e07a93;
  --hv-rose-l: #f4dfe2;

  /* the header reads these (style.css) */
  --header-bg: rgba(255, 255, 255, .9);
  --header-border: #ece2e2;
  --nav-text: #2b2430;
  --nav-hover-bg: #f6eef0;
  --nav-active-bg: #f4dfe2;
  --nav-active-text: #7a4e66;
  --login-text: #fff;

  background: var(--hv-bg);
  color: var(--hv-ink);
  font-family: 'Pretendard', 'Inter', 'Noto Sans KR', system-ui, sans-serif;
}

/* ---------- header ---------- */
.home-v2 .site-header { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.home-v2 .site-visits b { color: var(--hv-plum); }
.home-v2 .nav-main a { font-weight: 600; }
.home-v2 .btn-login {
  background: var(--hv-plum);
  border-color: var(--hv-plum);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(122, 78, 102, .8);
}
.home-v2 .btn-login:hover { background: var(--hv-plum-d); }
.home-v2 .lang-trigger { background: #fff; }
.home-v2 .account-trigger { background: var(--hv-rose-l); border-color: transparent; color: var(--hv-plum-d); font-weight: 700; }
.home-v2 .account-trigger .avatar { background: var(--hv-plum); color: #fff; }
.home-v2 .notify-bell { background: #fff; border: 1px solid var(--hv-line); }

/* ---------- hero: the owner's spec (2026-10-07), from reference.png ----------
   Measured at 1672×941: the sizes are the spec's at that width and
   shrink with the window below it (min(px, vw)), so the picture keeps
   its proportions and Blog and Community stay on a laptop's first
   screen (the owner, 2026-10-06). The landscape is an image (assets/hero-landscape
   .webp), never redrawn; the heading and the five cards are real links.
   No gradient, shadow or rounding beyond what the spec gives. */
.home-v2 .hero {
  position: relative;
  width: 100%;
  /* the spec's 100vh, less the site header above it, so the hero is
     exactly the first screen */
  min-height: calc(100vh - var(--header-h, 84px));
  /* the first screen's height below the header: the sizes below also
     shrink with it (x/900, the content's height at the spec's sizes), so
     a wide but low window still shows all five cards (the owner,
     2026-10-07: 2000x806) */
  --hh: calc(100vh - var(--header-h, 84px));
  background: #F3ECDF;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* between phones and 1259px the site header takes two rows (130px) */
@media (min-width: 601px) and (max-width: 1259px) {
  .home-v2 .hero { --hh: calc(100vh - 130px); min-height: calc(100vh - 130px); }
}
/* The painting and its sun move together (.hero-art). Its top is the
   hero's top at every window size — never cut (the owner, 2026-10-07) —
   and it fills the left edge at full strength. Its width is 70% of the
   window (so the pavilion ends at 50.6%, clear of the cards at 53%), but
   never more than 1.36 x the hero's height, so on a wide, low window it
   is not blown up past the top and the pavilion stays in view. */
.home-v2 .hero-art {
  position: absolute;
  left: 0;
  top: 0;
  width: min(70%, calc(var(--hh, 100vh) * 1.36));
  pointer-events: none;
}
.home-v2 .hero-art picture { display: block; }
.home-v2 .hero-landscape {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  /* only its far right melts into the paper */
  -webkit-mask-image: linear-gradient(to right, #000 76%, transparent 100%);
  mask-image: linear-gradient(to right, #000 76%, transparent 100%);
}
/* the sun, set in the painting to the left of the pavilion, so the
   pavilion always stands to its right (the owner, 2026-10-07) */
.home-v2 .hero-sun {
  position: absolute;
  left: 48.7%;
  top: 10.6%;
  width: 18.1%;
  height: auto;
}
/* fainter ridges further off, above the heading */
.home-v2 .hero-ridge-far {
  position: absolute;
  right: 15%;
  top: 0;
  width: 27%;
  height: auto;
  pointer-events: none;
}
/* the far ridge in mist beside the heading, as in the reference (the same
   painting's paper made transparent, so it sits on the hanji) */
.home-v2 .hero-ridge {
  position: absolute;
  right: 0;
  top: 10.2%;
  width: 22.2%;
  height: auto;
  pointer-events: none;
}
.home-v2 .hero-content {
  position: relative;
  margin-left: 53%;
  margin-right: 2%;
  width: 100%;
  max-width: 760px;
  padding: min(40px, 2.4vw, calc(var(--hh) * 0.0444)) 0;
}

/* eyebrow */
.home-v2 .lp-eyebrow {
  display: flex;
  align-items: center;
  margin: 0 0 min(12px, .72vw, calc(var(--hh) * 0.0134));
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: min(20px, 1.2vw, calc(var(--hh) * 0.0222));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #C62828;
}
.home-v2 .lp-rule { flex: none; width: min(56px, 3.35vw, calc(var(--hh) * 0.0622)); height: 2px; margin-right: min(16px, .96vw, calc(var(--hh) * 0.0177)); background: #C62828; }

/* headline */
.home-v2 .lp-title {
  margin: 0 0 min(24px, 1.44vw, calc(var(--hh) * 0.0267));
  font-family: 'Source Serif 4', 'Noto Serif KR', serif;
  font-weight: 700;
  font-size: clamp(36px, min(5.2vw, calc(var(--hh) * 0.0977)), 88px);
  line-height: 1.0;
  letter-spacing: -.025em;
  color: #141414;
}
.home-v2 .lp-title em { font: inherit; color: #C62828; }

/* cards */
.home-v2 .lp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min(10px, .6vw, calc(var(--hh) * 0.0111));
}
.home-v2 .lp-card {
  --lp-ink: #2A2216;
  --lp-line: rgba(0, 0, 0, .18);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(168px, 10.05vw, calc(var(--hh) * 0.1866));
  padding: min(22px, 1.32vw, calc(var(--hh) * 0.0245)) min(28px, 1.67vw, calc(var(--hh) * 0.0311));
  border-radius: 4px;
  color: var(--lp-ink);
  text-decoration: none;
  transition: transform .2s;
}
.home-v2 .lp-card::before {
  content: '';
  position: absolute;
  inset: min(10px, .6vw, calc(var(--hh) * 0.0111));
  border: 1px solid var(--lp-line);
  pointer-events: none;
}
.home-v2 .lp-card:hover { transform: translateY(-3px); }
/* 01: two soft ridges along the foot, right side, as in the reference */
.home-v2 .lp-learn::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62%;
  height: 70px;
  opacity: .14;
  background: no-repeat right bottom / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V52C40 40 70 26 110 34S180 56 220 44 290 18 330 24 380 40 400 42V70Z' fill='%23FFFFFF' fill-opacity='.6'/%3E%3Cpath d='M60 70V60C110 48 150 40 200 48S280 64 330 52 380 40 400 44V70Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  pointer-events: none;
}
.home-v2 .lp-card:focus-visible { outline: 2px solid #C62828; outline-offset: 3px; }

.home-v2 .lp-learn { grid-column: 1 / -1; min-height: min(185px, 11.06vw, calc(var(--hh) * 0.2056)); background: #1E3A6E; --lp-ink: #fff; --lp-line: rgba(255, 255, 255, .22); }
.home-v2 .lp-book { background: #EDCF8B; --lp-ink: #2A2216; }
.home-v2 .lp-free { background: #F2B5AE; --lp-ink: #2A1A1A; }
.home-v2 .lp-blog { background: #C3D8CA; --lp-ink: #1F2A24; }
.home-v2 .lp-community { background: #7D1D2B; --lp-ink: #fff; --lp-line: rgba(255, 255, 255, .22); }

/* the syllable of 두루한국어 behind each card */
.home-v2 .lp-glyph {
  position: absolute;
  top: 50%;
  right: min(28px, 1.67vw, calc(var(--hh) * 0.0311));
  transform: translateY(-50%) rotate(-6deg);
  font-family: 'Noto Serif KR', serif;
  font-weight: 900;
  font-size: min(120px, 7.18vw, calc(var(--hh) * 0.1333));
  line-height: 1;
  color: var(--lp-ink);
  opacity: .08;
  pointer-events: none;
}

/* number badge and label */
.home-v2 .lp-badge { position: relative; display: flex; align-items: center; gap: min(14px, .84vw, calc(var(--hh) * 0.0156)); }
.home-v2 .lp-seal {
  display: inline-grid;
  place-items: center;
  width: min(40px, 2.39vw, calc(var(--hh) * 0.0444));
  height: min(38px, 2.27vw, calc(var(--hh) * 0.0422));
  border-radius: 2px;
  background: #D32F2F;
  color: #fff;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: min(18px, 1.08vw, calc(var(--hh) * 0.0200));
}
.home-v2 .lp-tag {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: min(16px, .96vw, calc(var(--hh) * 0.0177));
  letter-spacing: .18em;
  text-transform: uppercase;
}
.home-v2 .lp-learn .lp-tag { color: #E8C46A; }
.home-v2 .lp-free .lp-tag { color: #C62828; }

.home-v2 .lp-name {
  position: relative;
  display: block;
  margin-top: min(6px, .36vw, calc(var(--hh) * 0.0066));
  font-family: 'Source Serif 4', 'Noto Serif KR', serif;
  font-weight: 700;
  font-size: min(32px, 1.91vw, calc(var(--hh) * 0.0356));
  line-height: 1.15;
}
.home-v2 .lp-learn .lp-name { font-size: min(40px, 2.39vw, calc(var(--hh) * 0.0444)); }
.home-v2 .lp-desc {
  position: relative;
  display: block;
  font-family: 'Source Serif 4', 'Noto Serif KR', serif;
  font-weight: 400;
  font-size: min(18px, 1.08vw, calc(var(--hh) * 0.0200));
  line-height: 1.35;
  opacity: .85;
}

/* ---------- authors ---------- */
.home-v2 .authors {
  --a-accent: var(--hv-plum);
  --a-border: var(--hv-line);
  --a-ink: var(--hv-ink);
  --a-sub: var(--hv-ink2);
  --a-card: #fff;
  --a-soft: var(--hv-rose-l);
  background: var(--hv-bg);
}
.home-v2 .author-panel { position: relative; overflow: hidden; border-radius: 28px; }
.home-v2 .author-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 86px;
  background: linear-gradient(120deg, #f4dfe2, #e8e3f2);
}
.home-v2 .author-panel:last-of-type::before { background: linear-gradient(120deg, #e6ece1, #f6eedb); }
.home-v2 .author-panel > * { position: relative; }
.home-v2 .author-badge { background: #fff; }

/* ---------- contact: light, not dark green ---------- */
.home-v2 #contact {
  background: transparent;
  color: var(--hv-ink);
  padding: 40px 0 0;
}
.home-v2 #contact .wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #f3e2e8 0%, #ece6f4 55%, #e7ede3 100%);
  border-radius: 32px;
  padding: 56px 60px;
}
.home-v2 #contact .wrap::after {
  content: '어';
  position: absolute;
  right: -20px;
  bottom: -110px;
  font-family: 'Gowun Batang', serif;
  font-size: 300px;
  line-height: 1;
  color: rgba(122, 78, 102, .06);
  pointer-events: none;
}
.home-v2 #contact .section-head { margin-bottom: 26px; text-align: left; max-width: 620px; }
.home-v2 #contact .eyebrow { color: var(--hv-plum); }
.home-v2 #contact h2 {
  color: var(--hv-ink);
  font-family: 'Cormorant Garamond', 'Gowun Batang', Georgia, serif;
  font-weight: 600;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.1;
}
.home-v2 #contact p { color: var(--hv-ink2); }
.home-v2 .btn-primary {
  background: var(--hv-plum);
  border-color: var(--hv-plum);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(122, 78, 102, .8);
}
.home-v2 .btn-primary:hover { background: var(--hv-plum-d); }

/* ---------- newsletter ---------- */
.home-v2 .newsletter {
  background: #fff;
  color: var(--hv-ink);
  border: 1px solid var(--hv-line);
  border-radius: 28px;
}
.home-v2 .newsletter h3 { font-family: 'Cormorant Garamond', 'Gowun Batang', Georgia, serif; font-weight: 600; font-size: 30px; color: var(--hv-ink); }
.home-v2 .newsletter p { color: var(--hv-ink2); }
.home-v2 .newsletter-form input {
  background: var(--hv-bg);
  border: 1px solid var(--hv-line);
  color: var(--hv-ink);
}
.home-v2 .newsletter-form input::placeholder { color: #a698a6; }

/* ---------- footer: white ---------- */
.home-v2 .site-footer {
  background: #fff;
  color: var(--hv-ink2);
  border-top: 1px solid var(--hv-line);
}
.home-v2 .footer-top p { color: var(--hv-ink2); }
.home-v2 .footer-col h5 { color: var(--hv-plum); }
.home-v2 .footer-col a { color: var(--hv-ink2); }
.home-v2 .footer-col a:hover { color: var(--hv-plum); }
.home-v2 .footer-bottom { color: var(--hv-mute); border-top-color: var(--hv-line); }
.home-v2 .footer-top .logo-img { height: 34px; }

/* ---------- smaller screens ---------- */
/* 1024px and below: the landscape as a band across the top (50vh), the
   heading and cards below it in one column. */
@media (max-width: 899px), (max-width: 1024px) and (orientation: portrait), (max-height: 500px) {
  .home-v2 .hero { display: block; min-height: 0; }
  .home-v2 .hero-art { position: static; width: 100%; }
  .home-v2 .hero-landscape {
    width: 100%;
    height: 50vh;
    object-fit: cover;
    /* the painting's top always shows (the owner, 2026-10-07: never cut
       at the top); if the band is short, the water at the foot gives way */
    object-position: left top;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .home-v2 .hero-ridge, .home-v2 .hero-ridge-far, .home-v2 .hero-sun { display: none; }
  .home-v2 .hero-content { margin: 0 auto; max-width: 760px; padding: 32px 24px 44px; }
  /* one column under the picture: the spec's sizes as they are */
  .home-v2 .lp-eyebrow { font-size: 20px; margin-bottom: 12px; }
  .home-v2 .lp-rule { width: 56px; margin-right: 16px; }
  .home-v2 .lp-title { margin-bottom: 24px; }
  .home-v2 .lp-grid { gap: 10px; }
  .home-v2 .lp-card { min-height: 168px; padding: 22px 28px; }
  .home-v2 .lp-card::before { inset: 10px; }
  .home-v2 .lp-learn { min-height: 185px; }
  .home-v2 .lp-glyph { font-size: 120px; right: 28px; }
  .home-v2 .lp-badge { gap: 14px; }
  .home-v2 .lp-seal { width: 40px; height: 38px; font-size: 18px; }
  .home-v2 .lp-tag { font-size: 16px; }
  .home-v2 .lp-name { font-size: 32px; margin-top: 6px; }
  .home-v2 .lp-learn .lp-name { font-size: 40px; }
  .home-v2 .lp-desc { font-size: 18px; }
}
/* a phone on its side: the wide painting whole above the heading (a
   50vh band there would show only the sky) */
@media (max-height: 500px) and (orientation: landscape) {
  .home-v2 .hero-landscape { height: auto; }
}
/* 640px and below: one card to a row */
@media (max-width: 640px) {
  .home-v2 .lp-grid { grid-template-columns: 1fr; }
  /* the label on a narrow phone: smaller, and if it must wrap, between
     its parts rather than inside "배움의 길" */
  .home-v2 .lp-eyebrow { font-size: 13px; letter-spacing: .1em; flex-wrap: wrap; row-gap: 4px; }
  .home-v2 .lp-eyebrow > span { white-space: nowrap; }
  .home-v2 .lp-rule { width: 40px; margin-right: 12px; }
  /* the syllable behind each card: smaller, so it stays behind the
     card's name and does not run under its description */
  .home-v2 .lp-glyph { font-size: 88px; right: 18px; }
  .home-v2 .hero-content { padding: 28px 16px 36px; }
  .home-v2 #contact .wrap { padding: 36px 26px; border-radius: 26px; margin: 0 16px; width: auto; }
}
/* the phone menu over the painting: solid white, so the hero does not
   show through behind the links */
@media (max-width: 600px) {
  .home-v2 .site-header.menu-open .nav-main { background: #fff; }
}