@charset "utf-8";
/* ============================================================
   WORKNEST — Ai ZIP (짧은 Ai 팁 모음)
   ============================================================ */

/* 머리말은 inc/page_hero.php(맨 위 영상)가 맡는다. 예전의 .zip-hero 는 쓰지 않아 지웠다. */

/* ── 한 화면 틀 (.zip-frame, css/fullpage.css) — 2026-09-29 사이트 주인 ──
   머리 「— ai ZIP / AI · IT 테크 팁」은 PLAY 와 같은 .section-head.pl-head (css/play.css).
   풀페이지가 아닐 때(휴대폰 · 좁은 창)는 위아래 여백만 둔다. */
.zip-frame .fp-inner { padding-block: 56px; }
.zip-frame .zip-grid { margin-top: 0; }
/* 4K · 세로로 긴 화면 — 제목과 카드 사이를 PLAY · MATE 와 똑같이 띄운다 (css/play.css · css/lesson.css 와 같은 조건 · 값) */
@media (min-height: 1100px), (min-height: 900px) and (max-aspect-ratio: 3/2) {
  body.fp-on .zip-frame .section-head.pl-head { margin-bottom: clamp(28px, 6vh, 96px); }
}

/* ── 카드 목록 ────────────────────────────────────────────── */
.zip-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 44px 0 10px;
}

.zip-card {
  display: flex; flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.zip-card:hover {
  transform: translateY(-4px);
  border-color: var(--tint-line); box-shadow: var(--shadow-2);
}
.zip-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.zip-card.is-off { opacity: .6; }

/* 썸네일 — 늘 16:9 로 보인다.
   어떤 크기를 올리셔도 이 틀에 맞춰 잘라 채우므로(cover) 카드 높이가 흐트러지지 않는다.
   원본 파일은 그대로 두고 보여 줄 때만 맞춘다. */
.zip-thumb {
  display: block; position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-mute); overflow: hidden;
}
.zip-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .4s var(--ease);
}
.zip-card:hover .zip-thumb img { transform: scale(1.04); }

/* 그림이 없을 때 자리를 채우는 표시 */
.zip-thumb-none {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--gray-3); font-size: .9rem; font-weight: 800; letter-spacing: .08em;
}

.zip-body {
  display: flex; flex-direction: column; gap: 8px;
  flex: 1; min-width: 0;
  padding: 20px 22px 22px;
}
/* 카드 제목 — h3 (목록 제목 「AI · IT 테크 팁」 h2 아래의 한 절). 크기 · 간격은 예전 굵은 글씨 그대로 */
.zip-title {
  margin: 0; letter-spacing: -.01em;
  font-size: 1.04rem; font-weight: 700; line-height: 1.5;
  color: var(--ink);
}
.zip-sum {
  flex: 1;
  font-size: .89rem; line-height: 1.75; color: var(--gray);
}
.zip-more {
  margin-top: 4px;
  font-size: .84rem; font-weight: 700; color: var(--blue);
}

/* ── 아직 읽을 수 없는 팁 ────────────────────────────────
   목록에는 보이되 내용은 잠긴 상태.
   무엇을 읽게 되는지는 알려 주고 본문만 막는다. */
.zip-card.is-locked .zip-thumb img { filter: grayscale(.65) brightness(.94); }

/* 「열람 권한이 필요합니다」 — 회색이면 안내인지 잘 눈에 띄지 않아
   주황 바탕에 자물쇠를 붙여 한눈에 알아보게 한다. */
.zip-more.is-locked {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: 6px; padding: 5px 11px; border-radius: 999px;
  background: var(--amber-soft); border: 1px solid #FBD9A5;
  color: var(--amber); font-weight: 800;
}
.zip-more.is-locked svg { width: 13px; height: 13px; flex-shrink: 0; }

/* 썸네일 위의 자물쇠 딱지 */
.zip-lock {
  position: absolute; left: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(14, 23, 41, .82); color: #fff;
  font-size: .74rem; font-weight: 700;
  backdrop-filter: blur(3px);
}
.zip-lock svg { width: 13px; height: 13px; flex-shrink: 0; }

/* 상세 화면에서 본문 대신 나오는 안내 */
.zip-gate {
  display: grid; justify-items: center; gap: 12px; text-align: center;
  padding: 54px 30px 50px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.zip-gate-ico {
  display: grid; place-items: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  color: var(--gray-3); box-shadow: var(--shadow-1);
}
.zip-gate-ico svg { width: 26px; height: 26px; }
.zip-gate h2 { font-size: 1.24rem; margin: 4px 0 0; }
.zip-gate p { font-size: .93rem; line-height: 1.8; color: var(--gray); max-width: 34em; }
.zip-gate-sub { font-size: .87rem !important; color: var(--gray-2) !important; }
.zip-gate-btns { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 8px; }

@media (max-width: 600px) {
  .zip-gate { padding: 40px 20px 36px; }
  .zip-gate-btns .btn { width: 100%; justify-content: center; }
}

/* ── 상세 화면 위쪽의 썸네일 ──────────────────────────────
   과정 상세는 세로로 긴 책 표지라 230px 칸에 기울여 세우지만,
   팁은 가로로 긴 16:9 그림이다. 칸을 넓히고 기울임도 없앤다. */
.course-hero-grid.is-zip { grid-template-columns: 360px 1fr; }

.zip-hero-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(16,24,40,.12);
}
.zip-hero-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* ── 「다섯 개의 문」 그림 ────────────────────────────────
   원래 캡처 그림이던 것을 글자로 다시 만들었다.
   글자라서 화면 크기에 맞춰 접히고, 확대해도 흐려지지 않는다.

   이음선은 다섯 칸이 한 줄로 설 때만 그린다.
   칸이 접히면(2칸 · 1칸) 선이 엉뚱한 곳을 가리키므로 감춘다. */
.doors {
  margin: 26px 0 0;
  padding: 30px 26px 22px;
  border: 1px solid var(--line); border-radius: var(--r);
}

/* 가운데 원 */
.doors-hub {
  width: 128px; height: 128px; margin: 0 auto;
  border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: var(--stage-0); color: #fff;
  box-shadow: 0 14px 32px rgba(14, 23, 41, .30);
}
.doors-hub b { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.doors-hub span { font-size: .75rem; color: rgba(255, 255, 255, .62); }

/* 원에서 내려오는 줄기 */
.doors-stem { width: 1px; height: 26px; margin: 0 auto; background: var(--line); }

.doors-list {
  position: relative;
  list-style: none; margin: 0; padding: 26px 0 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
}

/* 가로 이음선 — 첫 칸 가운데(10%)에서 마지막 칸 가운데(90%)까지.
   다섯 칸이 고르게 나뉘므로 이 값이 정확히 맞는다. */
.doors-list::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%;
  height: 1px; background: var(--line);
}

.door {
  position: relative;
  display: grid; gap: 5px; justify-items: center; text-align: center;
  padding: 16px 12px 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}
/* 각 칸에서 가로 이음선까지 올라가는 줄기 */
.door::before {
  content: ''; position: absolute; left: 50%; top: -26px;
  width: 1px; height: 26px; background: var(--line);
}

.door-n {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: .76rem; font-weight: 800; color: #fff;
}
.door b { font-size: .92rem; font-weight: 700; color: var(--ink); }
.door-d { font-size: .76rem; line-height: 1.55; color: var(--gray-2); }

/* 문마다 제 색 — 원본 그림의 다섯 색을 그대로 옮겼다 */
.door.is-web    { border-top: 3px solid var(--blue); }
.door.is-app    { border-top: 3px solid var(--purple); }
.door.is-chrome { border-top: 3px solid var(--green); }
.door.is-office { border-top: 3px solid var(--amber); }
.door.is-code   { border-top: 3px solid var(--red); }

.door.is-web    .door-n { background: var(--blue); }
.door.is-app    .door-n { background: var(--purple); }
.door.is-chrome .door-n { background: var(--green); }
.door.is-office .door-n { background: var(--amber); }
.door.is-code   .door-n { background: var(--red); }

.doors figcaption {
  margin-top: 18px;
  font-size: .82rem; color: var(--gray-2); text-align: center;
}

/* 다섯 칸이 좁아지면 두 칸 → 한 칸으로 접고 이음선을 감춘다 */
@media (max-width: 860px) {
  .doors-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 20px; }
  .doors-list::before, .door::before { display: none; }
  .doors-stem { height: 20px; }
}
@media (max-width: 520px) {
  .doors { padding: 24px 18px 18px; }
  .doors-list { grid-template-columns: minmax(0, 1fr); }
  .door { grid-template-columns: 26px minmax(0, 1fr); justify-items: start; text-align: left;
          gap: 3px 12px; padding: 14px 15px; }
  .door-n { grid-row: span 2; align-self: center; }
}

/* ── 상세 화면 아래의 「다른 팁」 ──────────────────────────── */
.zip-next {
  margin-top: 48px; padding-top: 30px;
  border-top: 1px solid var(--line);
}
.zip-next h2, .zip-next h3 { font-size: 1.1rem; margin-bottom: 16px; }
.zip-next-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zip-next-item {
  display: grid; gap: 4px; min-width: 0;
  padding: 15px 18px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.zip-next-item:hover { border-color: var(--tint-line); background: var(--tint-bg); }
.zip-next-item b { font-size: .93rem; font-weight: 700; color: var(--ink); }
.zip-next-item span {
  font-size: .83rem; line-height: 1.65; color: var(--gray-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 좁은 화면 ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .zip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .zip-next-list { grid-template-columns: 1fr; }
  .course-hero-grid.is-zip { grid-template-columns: 240px 1fr; }
}

@media (max-width: 600px) {
  .zip-hero { padding: 40px 0 32px; }
  .zip-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 32px; }
  .zip-body { padding: 17px 18px 19px; }

  /* 썸네일을 위로 올리고 글을 아래에 둔다 */
  .course-hero-grid.is-zip { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ── 학습 화면 틀 안 (zip_view.php?embed=1 — learn.php 의 오른쪽) — 2026-09-30 ──
   사이트 머리말 · 맺음말 · 빵부스러기 · 「목록」 단추를 빼고 본문만. 머리말 높이만큼 비우던 자리도 없앤다. */
body.is-embed { --header-h: 0px; }
body.is-embed .site-header,
body.is-embed .site-footer,
body.is-embed .skip-link,
body.is-embed .breadcrumb,
body.is-embed .rd-side .btn-block { display: none; }