/* 랜딩(메인) — Industry 블루프린트. app.css의 "랜딩(메인)" 블록을 이 파일로 대체(app.css 뒤에 로드).
   유지 클래스: landing, landing-rot, rot-item, is-on/is-out, landing-roles, role-k/role-v */
body[data-route="home"] .tw-toggle{display:none}
body[data-route="home"]{background:var(--color-bg)}
body[data-route="home"] #view{max-width:none;margin:0;border:0;box-shadow:none;min-height:0;overflow:visible;background:transparent}

.landing{
  --mark:color-mix(in srgb,var(--color-text) 55%,transparent);
  --rule:var(--color-divider);
  min-height:calc(100svh - 58px);
  display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(28px,5vh,56px);
  padding:clamp(24px,6vh,72px) var(--pg-x) clamp(20px,4vh,40px);
  max-width:1440px;margin:0 auto;box-sizing:border-box;text-align:left;
  /* 12단 모듈 그리드 — 보이는 구조 */
  background:
    repeating-linear-gradient(90deg,transparent 0 calc((100% - var(--pg-x)*2)/12 - 1px),var(--color-neutral-200) calc((100% - var(--pg-x)*2)/12 - 1px) calc((100% - var(--pg-x)*2)/12)) var(--pg-x) 0/calc(100% - var(--pg-x)*2) 100% no-repeat;
}

/* 중앙 프레임: 헤어라인 + 네 모서리 "+" 표식 */
.landing-in{
  position:relative;align-self:center;width:100%;box-sizing:border-box;
  container-type:inline-size;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kick count" "rot rot" "sub sub";
  row-gap:clamp(20px,4vh,40px);
  padding:clamp(18px,3vw,32px) clamp(18px,3vw,36px);
  border:1px solid var(--rule);background:var(--color-bg);
}
.landing-in::before{
  content:"";position:absolute;inset:-6px;pointer-events:none;
  background:
    linear-gradient(var(--mark),var(--mark)) 0 5px/11px 1px,
    linear-gradient(var(--mark),var(--mark)) 5px 0/1px 11px,
    linear-gradient(var(--mark),var(--mark)) 100% 5px/11px 1px,
    linear-gradient(var(--mark),var(--mark)) calc(100% - 5px) 0/1px 11px,
    linear-gradient(var(--mark),var(--mark)) 0 calc(100% - 5px)/11px 1px,
    linear-gradient(var(--mark),var(--mark)) 5px 100%/1px 11px,
    linear-gradient(var(--mark),var(--mark)) 100% calc(100% - 5px)/11px 1px,
    linear-gradient(var(--mark),var(--mark)) calc(100% - 5px) 100%/1px 11px;
  background-repeat:no-repeat;
}

/* 키커: 도면 표제란처럼 좌상단, 우상단은 순번 */
.landing-kicker{
  grid-area:kick;display:flex;align-items:center;gap:10px;min-width:0;
  font:500 12px/1.3 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-700);
}
.landing-kicker::before{content:"";flex:none;width:24px;height:1px;background:var(--color-accent)}
.landing-in::after{
  grid-area:count;align-self:center;
  content:"01 / 03";font:var(--font-heading-weight) 14px/1 var(--font-heading);letter-spacing:.08em;
  color:var(--color-neutral-700);font-variant-numeric:tabular-nums;
}
.landing-in:has(.rot-item:nth-child(2).is-on)::after{content:"02 / 03"}
.landing-in:has(.rot-item:nth-child(3).is-on)::after{content:"03 / 03"}

/* 회전 텍스트 — 프레임 폭 기준(cqw)으로 최대한 크게, 375px에서도 한 줄 */
.landing-rot{
  grid-area:rot;position:relative;overflow:hidden;
  font-size:min(11.5cqw,184px);height:1.18em;margin:0;
}
.landing-rot::after{ /* 기준선 */
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);
}
.landing-rot .rot-item{
  position:absolute;left:0;right:0;top:0;
  font:var(--font-heading-weight) 1em/1.1 var(--font-heading);
  letter-spacing:-.02em;white-space:nowrap;color:var(--color-accent-800);text-align:center;
  opacity:0;transform:translateY(.42em);
  transition:opacity .38s ease,transform .38s cubic-bezier(.4,0,.6,1);
}
.landing-rot .rot-item.is-on{
  opacity:1;transform:translateY(0);
  transition:opacity .55s ease .12s,transform .7s cubic-bezier(.16,.84,.24,1) .12s;
}
.landing-rot .rot-item.is-out{opacity:0;transform:translateY(-.3em)}

.landing-sub{
  grid-area:sub;font-size:15px;line-height:1.5;color:var(--color-neutral-800);text-align:center;text-wrap:pretty;
}

/* 크레딧 — 3칸 동폭 셀, 1px 격자선, CSS 번호 */
.landing-roles{
  counter-reset:role;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);
  width:100%;margin:0;padding:0;
}
.landing-roles>div{counter-increment:role;background:var(--color-bg);padding:14px 18px 16px;min-width:0}
.landing-roles .role-k{
  display:flex;gap:8px;align-items:baseline;
  font:500 11px/1.3 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--color-neutral-700);
}
.landing-roles .role-k::before{content:counter(role,decimal-leading-zero);font:var(--font-heading-weight) 12px var(--font-heading);color:var(--color-accent-700);letter-spacing:.04em}
.landing-roles .role-v{
  display:block;margin-top:6px;
  font:var(--font-heading-weight) 20px/1.2 var(--font-heading);color:var(--color-text);overflow-wrap:anywhere;
}

@media (max-width:760px){
  .landing{min-height:calc(100svh - 84px);background:none}
  .landing-in{grid-template-areas:"kick count" "rot rot" "sub sub";row-gap:18px}
  .landing-kicker{font-size:11px;letter-spacing:.12em}
  .landing-kicker::before{width:14px}
  .landing-rot{font-size:12cqw}
  .landing-sub{font-size:13px;text-align:left}
  .landing-roles{grid-template-columns:minmax(0,1fr)}
  .landing-roles>div{padding:10px 14px 12px}
  .landing-roles .role-v{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .landing-rot .rot-item,.landing-rot .rot-item.is-on,.landing-rot .rot-item.is-out{transform:none;transition:opacity .3s ease}
}

/* 로고 — 회전 영역은 각 기관 로고 이미지(높이는 회전 영역 em 기준), 크레딧도 로고 */
.landing-in{grid-template-areas:"kick count" "rot rot"}
.landing-rot .rot-item img{display:block;height:.96em;width:auto;max-width:100%;margin:.1em auto 0;object-fit:contain}
.landing-roles .role-v img{display:block;height:34px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
@media (max-width:760px){
  .landing-in{grid-template-areas:"kick count" "rot rot"}
  .landing-rot{font-size:clamp(46px,17cqw,96px)}
  .landing-roles .role-v img{height:28px}
}