/* 홈 1a: 중앙 검색 → 클래스 띠 → 인기·최신·내 빌드 → 도감.
   공통 스킨의 색·글꼴을 쓰고 홈에서만 배치를 바꾼다. */
body.bg3.home-v1 { background: var(--bg); }
.home-v1::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 820px; pointer-events: none;
  background: linear-gradient(90deg, var(--bg), transparent 30%, transparent 70%, var(--bg)),
    url('./images/home-landscape.jpg') center 30% / cover;
  filter: saturate(.5) brightness(.55) sepia(.3); opacity: .6;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), black 25%, black 45%, transparent);
}
.home-v1 .bg3-main.homehub {
  position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 280px;
  gap: 0 48px; padding: 0 64px; box-sizing: border-box;
}
.homehub > .homesearch { grid-column: 1 / -1; grid-row: 1; }
.homehub > .homeclasses { grid-column: 1 / -1; grid-row: 2; }
.homehub > .homepopular-section { grid-column: 1; grid-row: 3; }
.homehub > .homelatest-section { grid-column: 2; grid-row: 3; }
.homehub > .homerail-mine { grid-column: 3; grid-row: 3; }
.homehub > .homerail-codex { grid-column: 1 / -1; grid-row: 4; }
.homehub > .footnote { grid-column: 1 / -1; grid-row: 5; }
.home-v1 .homehub > .pane {
  min-width: 0; border: 0; border-image: none; border-radius: 0;
  background: transparent; box-shadow: none; padding: 0; margin: 0 0 64px;
}
.home-v1 .homehub > .pane::before, .home-v1 .homehub > .pane::after { content: none; }
.home-v1 .homehub > .homesearch { padding: 72px 0 0; text-align: center; }
.home-v1 .homeeyebrow { margin: 0 0 14px; color: var(--accent); font-size: var(--fs-sm); letter-spacing: .22em; }
body.bg3.home-v1 .homehero-title {
  margin: 0 0 36px; font: 500 clamp(36px, 5vw, 58px)/1.15 'BG3 EN', serif;
  letter-spacing: .14em; color: var(--text); text-shadow: none;
}
.home-v1 .homesearchbox { position: relative; max-width: 720px; margin: auto; }
.home-v1 .homesearchbox #homeq {
  width: 100%; height: 60px; box-sizing: border-box; padding: 0 22px 0 56px;
  background: rgba(20, 18, 14, .18); color: var(--text); border: 0;
  border-radius: 0; box-shadow: none; font-size: 17px;
}
.home-v1 .homesearchbox::before, .home-v1 .homesearchbox::after {
  content: ''; position: absolute; left: 0; right: 0; height: 14px;
  pointer-events: none; z-index: 1;
  background: url('./skin/Selected_Decor_Top.png') center / 132px 14px no-repeat,
    linear-gradient(90deg, transparent, var(--gold-dim) 12%, var(--gold) 40%, transparent 43%, transparent 57%, var(--gold) 60%, var(--gold-dim) 88%, transparent) center / 100% 1px no-repeat;
}
.home-v1 .homesearchbox::before { top: -7px; }
.home-v1 .homesearchbox::after { bottom: -7px; transform: rotate(180deg); }
.home-v1 .homesearchicon {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--text-2); pointer-events: none;
}
.home-v1 #homecount, .home-v1 .homeresults { max-width: 720px; margin: 12px auto 0; text-align: left; }
.home-v1 #homecount:empty, .home-v1 .homeresults:empty { display: none; }
.home-v1 .homeresults { background: var(--surface); border: 1px solid var(--line); }
.home-v1 .homeresults li a { min-height: 44px; display: flex; align-items: center; padding: 8px 16px; }
.homeheading { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.homeheading > a {
  flex: none; color: var(--accent); font-size: var(--fs-lg); line-height: 1.5;
  letter-spacing: .04em; text-decoration: none; white-space: nowrap;
  display: flex; align-items: center; padding: 2px 0;
}
body.bg3.home-v1 .homehub .title {
  display: flex; align-items: center; gap: 18px; margin: 0 0 22px; padding: 0;
  font-family: var(--font-title); font-size: var(--fs-base); font-weight: 500;
  -webkit-text-fill-color: currentColor; letter-spacing: .2em; color: var(--accent); border: 0; background: none; text-shadow: none;
}
.home-v1 .homehub .title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.home-v1 .homeheading .title { flex: 1; margin: 0; }
.homeclasslist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.homeclasslist a {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 4px 16px;
  min-height: var(--m-touch); box-sizing: border-box; text-decoration: none; color: var(--text);
  font-size: var(--fs-base); white-space: nowrap; border: 1px solid var(--line); background: rgba(0,0,0,.2);
}
.homeclasslist a:hover, .homeclasslist a:focus-visible { border-color: var(--accent); color: var(--accent); }
.homeclasslist img { width: 52px; height: 52px; object-fit: contain; }
.homerail { display: flex; flex-direction: column; gap: 12px; }
.homerail-mine .clouddocs li a { display: block; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-v1 .homerail-mine { align-self: stretch; gap: 0; }
.home-v1 #homemine { margin: 0 0 24px; }
.home-v1 #homemine li { border-bottom: 1px solid var(--line); padding: 0; }
.home-v1 #homemine li a { min-height: 44px; display: block; box-sizing: border-box; padding: 12px 0; line-height: 20px; text-decoration: none; color: var(--text); }
.home-v1 #homemine li.hint { display: block; padding: 12px 0; color: var(--text-2); line-height: 1.7; }
.home-v1 .homecreate {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: auto; min-height: 44px; box-sizing: border-box; padding: 0;
  border: 0; border-top: 1px solid var(--line);
  color: var(--accent); font-size: var(--fs-lg); line-height: 1.5;
  text-align: right; text-decoration: none;
}
.home-v1 .homecreate::after { content: '→'; transition: transform .2s ease; }
.home-v1 .homecreate:hover { color: var(--text); background: transparent; }
.home-v1 .homecreate:hover::after { transform: translateX(4px); }

/* 카드·작성자 링크의 기존 기능 스타일. */
.homecards { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.homecards li { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-2); }
.homecards li:last-child { border-bottom: 0; padding-bottom: 0; }
/* ⚠ **맨 하단 공백을 행 사이 간격(10px, 위 `gap`)과 맞춘다**(홈 다듬기 웨이브,
   2026-08-25 — 사용자가 운영 스크린샷에서 「마지막 줄 아래가 줄 사이보다
   더 떠 보인다」고 지적). iframe 프로브로 실측(2026-08-25): 마지막 카드
   뒤 여백은 `.pane` 의 padding-bottom(스킨 자산 있을 때 8px·좁은 화면
   6px·자산 없을 때 18px, `skin.css` `.pane`/`@supports` 블록) 하나뿐인데
   행 사이 간격(10px)과 최대 8px 까지 갈렸다. **장식 테두리(`border-image`,
   같은 블록의 46px/18px)는 안 건드린다** — 전 화면이 같이 쓰는 테마 자산이라
   여기서 좁히면 다른 화면까지 번진다. `:has()` 로 이 목록을 가진 절만
   집어 `padding-bottom` 을 10px 로 못박는다 — `:has(.homecards)` 가 안의
   `.homecards` 만큼 특이도를 더 얹어서(`.homehub`+`.pane`+`:has(...)` =
   클래스 셋, (0,3,0)) `.skin-assets .pane`((0,2,0), skin.css) 보다 **특이도
   자체로** 이긴다 — 실려서 이기는 동률 승부가 아니다. 스킨 자산 유무·
   좁은 화면 셋을 한 규칙으로 덮는다.
   ⚠ 화면에 보이는 실제 공백은 여전히 테두리 두께만큼 남는다(46/18/0px) —
   이 규칙이 없애는 것은 그 위에 얹힌 `.pane` 자체 padding-bottom 몫뿐이다. */
.homehub > .pane:has(.homecards) { padding-bottom: 10px; }
.homecard {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: 10px 12px; text-decoration: none;
}
/* 이름과 메타(클래스/레벨) 사이 간격 — 전엔 거의 안 벌어져 붙어 보였다.
   `--sp-1`(4px)로 4의 배수 체계를 그대로 쓴다. */
/* `flex: 1` — 카드 앞에 클래스 아이콘(`.clsicons`, 2026-09-05)이 서므로 `.homecard` 의
   `space-between` 이 둘을 양끝으로 벌리지 않게 정보 칸이 남은 폭을 다 쥔다. */
.hcinfo { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--sp-1); min-width: 0; }
/* 카드에서는 아이콘을 한 단 크게 — 제목이 `--fs-lg` 라 20px 이면 작다. */
.homecard .clsico { width: 26px; height: 26px; }
/* 제목 글자를 한 단계 키운다(홈 디자인 웨이브 3, 2026-08-25) — 전엔 크기를 안
   정해 본문 기본값(`--fs-base`, 13px)을 그대로 물려받았다. `--fs-lg`(15px)는
   이미 「훑는 화면 본문」에 쓰는 토큰이다(skin.css :root 주석) — 새 리터럴을
   안 만든다. 「최신 빌드」절도 이제 이 카드를 쓰므로(home.js) 두 절이 같이 커진다. */
.homecard .hcname { color: var(--gold); font-size: var(--fs-lg); }
.homecard .hcmeta { font-size: 12px; color: var(--muted); }
/* 좋아요·조회 — **작성자 줄 안**, 오른쪽 끝(홈 다듬기 2차 웨이브, 2026-08-25)
   — 아래 `.hcauthor` 주석 참고. 크기·색은 그대로 뒀다(`.hcauthor` 의 12px
   문맥에서 11px 로 한 단계 낮춰 배지가 본문보다 도드라지지 않게 한다). */
.hclikes { flex: none; font-size: 11px; color: var(--gold-dim); white-space: nowrap; }
/* 작성자 · 시간 · 좋아요/조회 — 카드 링크(`.homecard`) 밖의 형제 줄이다(홈
   디자인 웨이브 4, 2026-08-25). `.homecard` 전체가 `<a>` 라 안에
   `authorlink`(`<a>`, skin.css 정본)를 또 넣으면 앵커가 중첩돼 무효한
   HTML이 된다 — 그래서 `<li>` 밑에 따로 두고, `.homecard` 의 좌우 여백
   (`padding: 10px 12px`)과 맞춰 12px 를 준다. 클릭은 카드 본문(제목·요약)
   이면 빌드로, 이 줄의 작성자 이름이면 author.html 로 간다 — 두 링크가
   서로 안 겹친다.
   ⚠ **flex 줄로 바꿨다**(홈 다듬기 2차 웨이브, 2026-08-25) — 전엔
   `display: block` 하나에 작성자·시간 글자와 `hclikes` 배지가 없이 텍스트만
   있었다. 좋아요·조회(전엔 `.homecard` 안, 제목 줄 높이에 떠 있었다)를 이
   줄 오른쪽 끝으로 내리라는 지적(게시판 목록 줄 `cdmeta`/`cdstats` 과 같은
   배치)을 받아 `justify-content: space-between` 으로 왼쪽엔 작성자 글줄
   (`hcauthortext`), 오른쪽엔 `hclikes` 를 세운다 — `.clouddocs li` 와
   같은 결이다(위치는 그대로 우측, 줄만 작성자 줄로 내려온다). `hcauthortext`
   가 없으면(=텍스트 노드를 바로 자식으로 두면) flex 가 익명 상자로 감싸는
   대상이 텍스트 런과 `<a class="authorlink">` 로 갈려 **작성자 이름과 시간이
   따로 벌어진다** — 그래서 작성자·시간을 한 span(`hcauthortext`)으로 묶어
   flex 항목 하나로 만든다(변이로 직접 확인: 그 span 을 없애면 이름·시간·배지
   셋이 제각기 벌어진다). */
.hcauthor {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); padding: 0 12px var(--sp-1); font-size: 12px; color: var(--muted);
}
.hcauthortext { min-width: 0; overflow-wrap: break-word; }
.homeresults { list-style: none; margin: 8px 0 0; padding: 0; }
.homeresults li a { display: block; padding: 6px 8px; text-decoration: none; color: var(--cream); }
.homeresults li a:hover { background: rgba(0, 0, 0, .3); }
.homecodex { list-style: none; margin: 0; padding: 0; }
.homecodex a { display: block; padding: 8px 10px; text-decoration: none; color: var(--cream); }
.homecodex a:hover { color: var(--gold); background: rgba(0, 0, 0, .3); }
.hdrfresh { margin: 0; font-size: 12px; color: var(--muted); letter-spacing: .04em; }


/* 1a의 빌드 목록과 도감 하단 띠. 작성자 링크는 카드 앵커 밖에 둔다. */
.home-v1 .homecards { gap: 0; grid-template-columns: minmax(0, 1fr); }
.home-v1 .homecards li { min-width: 0; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.home-v1 .homecard { padding: 0; justify-content: flex-start; gap: 12px; }
.home-v1 .homecard .clsicons { width: 34px; flex: none; }
.home-v1 .homecard .clsico { width: 34px; height: 34px; }
.home-v1 .homecard .clsico:not(:first-child) { display: none; }
.home-v1 .homecard .hcname { color: var(--text); font-family: var(--font-title); font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-v1 .homecard .hcmeta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-v1 .hcauthor { padding: 4px 0 0 46px; flex-wrap: wrap; gap: 4px 12px; }
.home-v1 .hcauthortext { display: flex; align-items: center; gap: 4px; }
.home-v1 .hcauthor .authorlink { display: inline-flex; align-items: center; min-height: 28px; }
.home-v1 .homehub > .homerail-codex { padding: 28px 0; margin-bottom: 0; border-bottom: 1px solid var(--line); }
.home-v1 .homecodex { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.home-v1 .homecodex li + li { border-left: 1px solid var(--line-2); }
.home-v1 .homecodex a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px; font-family: var(--font-title); font-size: var(--fs-lg); }
/* 가이드와 설명 아래에 도감 바로가기를 한 묶음으로 놓는다. */
.home-v1 .homelearning { margin-top: 0; padding-top: 0; }
.home-v1 .homecodex { margin-top: 20px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.homelearning-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.home-v1 .homelearning h2 { margin: 0; font: 500 var(--fs-lg)/1.5 var(--font-title); letter-spacing: .08em; text-align: left; color: var(--accent); }
.homelearning-links { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
.homelearning-links a { display: inline-flex; align-items: center; gap: 12px; min-height: var(--m-touch); color: var(--accent); text-decoration: none; }
.homelearning-links a::after { content: '→'; }
.home-v1 .homelearning .homecards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.home-v1 .homelearning .homecards > li { padding: 0; border: 0; }
.homelearning .homecards a { display: flex; align-items: flex-start; min-height: var(--m-touch); color: var(--text); font-family: var(--font-title); font-size: var(--fs-lg); line-height: 1.6; text-decoration: none; }
.homelearning .homecards p { margin: 8px 0 0; color: var(--text-2); line-height: 1.8; }
.homelearning a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.home-v1 .footnote { padding: 40px 0; border: 0; background: none; }
.home-v1 .footnote .sf-name { font-family: 'BG3 EN', serif; }
.home-v1 a:focus-visible, .home-v1 input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 1100px) {
  .home-v1 .bg3-main.homehub { padding: 0 32px; gap: 0 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .homeclasslist { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .homehub > .homepopular-section { grid-column: 1; grid-row: 3; }
  .homehub > .homelatest-section { grid-column: 2; grid-row: 3; }
  .homehub > .homerail-mine { grid-column: 1 / -1; grid-row: 4; }
  .homehub > .homerail-codex { grid-column: 1 / -1; grid-row: 5; }
  .homehub > .footnote { grid-row: 6; }
  .home-v1 .homecreate { max-width: 320px; }
}
@media (max-width: 720px) {
  .home-v1 .bg3-main.homehub { display: flex; flex-direction: column; padding: 0 20px; gap: 0; }
  .home-v1 .homehub > .pane { width: 100%; box-sizing: border-box; margin-bottom: 40px; }
  .home-v1 .homehub > .homesearch { padding-top: 40px; }
  .home-v1 .homeeyebrow { letter-spacing: .1em; }
  body.bg3.home-v1 .homehero-title { font-size: clamp(32px, 8vw, 48px); letter-spacing: .08em; margin-bottom: 28px; }
  .home-v1 .homesearchbox #homeq { font-size: 16px; padding-left: 44px; padding-right: 12px; }
  .home-v1 .homesearchicon { left: 14px; }
  .homeclasslist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .homeclasslist a { padding: 12px 4px; gap: 8px; }
  .homeclasslist img { width: 44px; height: 44px; }
  .homeheading { gap: 12px; margin-bottom: 16px; }
  .home-v1 .hcauthor .authorlink { min-height: 44px; }
  .home-v1 .homerail-mine, .home-v1 .homerail-codex { order: 9; }
  .bg3-main.homehub > .footnote { order: 10; }
  .home-v1 .homecodex { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .home-v1 .homecodex li + li { border-left: 0; }
  .home-v1 .homecodex a { justify-content: flex-start; }
  .home-v1 .homehub > .homerail-codex { margin: 0; }
  .homelearning-heading { align-items: flex-start; flex-direction: column; gap: 8px; margin-bottom: 20px; }
  .home-v1 .homelearning .homecards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .home-v1 .homelearning .homecards > li + li { padding-top: 20px; border-top: 1px solid var(--line-2); }
  .homelearning .homecards a { align-items: center; }
  .homelearning .homecards p { margin-top: 4px; }
  .home-v1 .footnote { width: 100%; padding: 32px 0; }
}