@charset "UTF-8";
/* ===================
   FONT
=================== */
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/woff2/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Originals";
  src: url("fonts/originals.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "cam";
  src: url("fonts/CambayDevanagari-Bold.AH.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "kopubbold";
  src: url("fonts/KoPubWorld_Dotum_Pro_Bold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "kopub";
  src: url("fonts/KoPubWorld_Dotum_Pro_Medium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "kopub";
  src: url("fonts/") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* ===================
   RESET / BASICS
=================== */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  background: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  font-family: "Pretendard", "cam", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
  cursor: url("/images/cursor.png") 6 6, auto;
}

/* 전체 고정 배경 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("/images/bg2.jpg") center/cover no-repeat;
  z-index: -1;
}

/* ===============================
   TOKENS (DESKTOP DEFAULT)
================================ */
:root {
  /* Layout container */
  --container-max: 698px;
  --pad-top: 80px;
  --pad-x: 30px;
  --pad-bottom: 40px;
  /* Home logo */
  --home-top: 12px;
  --home-left: 12px;
  --home-w: 140px;
  /* Brand */
  --fic-w: 220px;
  --brand-gap: 30px;
  --header-gap-bottom: 60px;
  /* Category */
  --cat-gap: 40px;
  --cat-fs: 8px;
  /* Type */
  --title-fw: 400;
  --title-lh: 1.7;
  --author-fw: 700;
  --author-lh: 1.5;
  /* Footer (PC) */
  --ft-maxw: 700px; /* 푸터 전체 폭 */
  --ft-pad-top: 80px; /* 푸터 상단 여백 */
  --ft-pad-x: 20px; /* 좌우 패딩 */
  --ft-gap: 40px; /* 칼럼 간격 */
  /* 4단: 1(왼쪽) | 2(스페이서) | 3(링크) | 4(오른쪽 배지) */
  --ft-col2-spacer: 60px; /* 2번 칼럼(빈칸) 폭 */
  --ft-col3-fr: .90fr; /* 3번 칼럼 비율(작아질수록 우측으로 붙음) */
  /* 이미지 크기(PC) */
  --ft-left-img-w: 120px;
  --ft-right1-w: 165px;
  --ft-right2-w: 144px;
  --ft-right-gap: 7px;
  /* 링크 타이포 */
  --ft-link-fs: 14px;
  --ft-link-color: #1c425a;
  --ft-link-gap: 7px;
  /* 카피라이트 이미지 */
  --cr-img-w: 280px;
  --cr-mt: 24px;
}

/* ===============================
   LAYOUT
================================ */
.wrap {
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
}

/* ===================
   HEADER / BRAND
=================== */
.home-link {
  position: fixed;
  top: var(--home-top);
  left: var(--home-left);
  z-index: 100;
}

.home-logo {
  width: var(--home-w);
  height: auto;
  margin: 0 !important;
}

.top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: var(--header-gap-bottom);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brand-gap);
  text-align: center;
}

.fic-logo {
  width: var(--fic-w);
  height: auto;
  margin: 0 auto;
}

/* ===================
   CATEGORY NAV
=================== */
.cat {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--cat-gap);
  flex-wrap: wrap;
  width: 100%;
}

.cat a {
  text-decoration: none;
  white-space: nowrap;
}

.cat span {
  font-family: "Originals", "Pretendard", sans-serif;
  font-size: var(--cat-fs);
  color: #fff;
}

/* 활성 fic 투명 50% */
.cat a.is-active span {
  opacity: 0.5;
  text-decoration: none;
}

/* ===================
   LIST / CARD
=================== */
.list {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap-y);
  align-items: center;
}

/* 타이포: 카드 너비 기준 스케일 */
.title {
  display: inline-flex;
  align-items: center;
  gap: var(--title-badge-gap);
  font-family: "kopub", helvetica, sans-serif;
  font-weight: var(--title-fw);
  font-size: 11px;
  line-height: var(--title-lh);
  margin: 0;
  color: #434649;
}

.author {
  font-family: "dx-hfl-std", "pretendard", helvetica, sans-serif;
  font-weight: var(--author-fw);
  font-size: 25px;
  line-height: var(--author-lh);
  color: #5a7081;
  margin-top: 5px;
}

/* 컨테이너쿼리 미지원 브라우저 폴백 */
@supports not (container-type: inline-size) {
  .title {
    line-height: 1;
  }
  .author {
    line-height: 1;
  }
}
/* 카드가 아주 좁아질 때(카드 폭 기준) 미세 축소 */
@container (max-width: 380px) {
  .title {
    line-height: 1;
  }
  .author {
    line-height: 1;
  }
}
.egg {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 0;
  margin-top: 30px;
}

/* ===============================
   FOOTER (PC: 4단, 2번 칸 스페이서)
================================ */
.site-footer {
  padding-top: var(--ft-pad-top);
}

.ft-divider {
  max-width: var(--ft-maxw);
  margin: 0 auto;
  height: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.9);
  padding: 15px;
}

.footer-row {
  max-width: var(--ft-maxw);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--ft-pad-x);
  display: grid;
  grid-template-columns: auto var(--ft-col2-spacer) minmax(120px, var(--ft-col3-fr)) auto; /* 4: 오른쪽 배지(콘텐츠 폭) */
  column-gap: var(--ft-gap);
  align-items: flex-start;
}

/* 칼럼 매핑 */
.footer-col.left {
  grid-column: 1;
}

.footer-col.middle {
  grid-column: 3;
  justify-self: end;
}

.footer-col.right {
  grid-column: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ft-right-gap);
}

/* 이미지/링크/카피라이트 */
.ft-img-left {
  width: var(--ft-left-img-w);
  height: auto;
}

.ft-img-right1 {
  width: var(--ft-right1-w);
  height: auto;
  border-radius: 0;
}

.ft-img-right2 {
  width: var(--ft-right2-w);
  height: auto;
  border-radius: 0;
}

.cam {
  font-family: "cam", "Pretendard", sans-serif;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--ft-link-gap);
}

.footer-links a {
  font-size: var(--ft-link-fs);
  color: var(--ft-link-color);
  text-decoration: underline;
}

.footer-links .nowrap {
  white-space: nowrap;
} /* "Make a review" 한 줄 고정 */
.copyright-img {
  display: block;
  width: var(--cr-img-w);
  height: auto;
  margin: var(--cr-mt) auto 0;
  padding: 10px;
}

/* ===============================
   BREAKPOINTS: FOOTER - 폭 줄수록 간격/비율 축소
================================ */
/* ≤572px (모바일 베이스) */
@media (max-width: 571.98px) {
  :root {
    /* layout */
    --container-max:100%;
    --pad-top:78px;
    --pad-x:14px;
    --pad-bottom:40px;
    /* header/nav */
    --home-top:15px;
    --home-left:15px;
    --home-w:100px;
    --fic-w:185px;
    --brand-gap:28px;
    --header-gap-bottom:45px;
    --cat-gap:35px;
    --cat-fs:6.5px;
    /* cards */
    --meta-top:30%;
    /* footer */
    --ft-gap:30px;
    --ft-col2-spacer:36px;
    --ft-col3-fr:.60fr;
    --ft-left-img-w:64px;
    --ft-right1-w:86px;
    --ft-right2-w:80px;
    --ft-link-fs:12px;
    --ft-link-gap:6px;
    --cr-img-w:200px;
    --cr-mt:18px;
  }
  .wrap {
    padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  }
  /* 링크는 우측 정렬 느낌 주기 */
  .footer-links {
    align-items: flex-start;
  }
  .footer-links a {
    text-align: left;
  }
  .ft-divider {
    max-width: calc(100vw - var(--ft-pad-x) * 2);
  }
  .footer-row {
    grid-template-columns: auto var(--ft-col2-spacer) auto;
  }
  /* 실제 폰트값 미세 축소는 토큰 밖에서 선언 */
  .title {
    font-size: 12px;
    line-height: 1.7;
  }
  .author {
    font-size: 30px;
    line-height: 1;
  }
}
/* ≤445px : 텍스트 위치/배지 간격 살짝 보정 */
@media (max-width: 400px) {
  :root {
    --meta-top:28%;
    --title-badge-gap:5px;
    --card-pad-x: 55px;
  }
  /* 실제 폰트값 미세 축소는 토큰 밖에서 선언 */
  .title {
    font-size: 11px;
    line-height: 1.7;
  }
  .author {
    font-size: 30px;
    line-height: 1;
  }
}
/* ≤440px : 글씨 왼쪽으로 */
@media (max-width: 400px) {
  :root {
    --card-pad-x: 52px;
  }
  /* 실제 폰트값 미세 축소는 토큰 밖에서 선언 */
  .title {
    font-size: 11px;
    line-height: 1.7;
  }
  .author {
    font-size: 30px;
    line-height: 1;
  }
}
/* ≤400px */
@media (max-width: 400px) {
  :root {
    --meta-top:25%;
  }
  :root .title {
    font-size: 11px;
  }
  :root .author {
    font-size: 30px;
  }
}
/* ≤375px : 초소형(시안 느낌 강화) */
@media (max-width: 375px) {
  :root {
    --meta-top:23%;
  }
  :root .title {
    font-size: 10px;
  }
  :root .author {
    font-size: 30px;
  }
}
/* ≤345px : 초소형2 */
@media (max-width: 345px) {
  :root {
    --meta-top:20%;
    --title-badge-gap:4px;
    --card-pad-x: 38px;
  }
  /* 실제 폰트값 미세 축소는 토큰 밖에서 선언 */
  .title {
    font-size: 4px;
    line-height: 1;
  }
  .author {
    font-size: 20px;
    line-height: 1;
  }
}
/* ≤320px : 아이폰se, mini */
@media (max-width: 320px) {
  :root {
    --meta-top:20%;
    --title-badge-gap:4px;
  }
  /* 실제 폰트값 미세 축소는 토큰 밖에서 선언 */
  .title {
    font-size: 6px;
    line-height: 1;
  }
  .author {
    font-size: 20px;
    line-height: 1;
  }
}
/* ===================
   FATE LIST — Cards
=================== */
/* 카드 컨테이너: 카드 폭 기준 폰트 스케일 위해 컨테이너 쿼리 ON */
.card {
  position: relative;
  width: 98%;
  container-type: inline-size;
  max-width: 550px;
}

/* 블러 박스 */
.glass {
  position: relative;
  padding: clamp(20px, 4cqw, 28px) var(--card-pad-x, clamp(20px, 6cqw, 40px));
  border-radius: 3px;
  background: rgba(255, 255, 255, 0); /* 안쪽 약간만 색 */
  filter: blur(0.1); /* 내용 왜곡 최소화 */
}

/* 가장자리 소프트한 퍼짐(외곽 블러 느낌) */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.6); /* 블러 먹이는 색 */
  filter: blur(5px); /* 외곽 번짐 강도 */
  z-index: -1; /* 텍스트 뒤 */
}

/* 카드 간격 */
.list {
  gap: clamp(18px, 3cqw, 36px);
}

/* 텍스트 기본(자간 변수로 제어) */
:root {
  --ls-body: 0.01em;
  --ls-title: 0.005em;
  --ls-author: 0.02em;
}

/* 자간 적용 지점 */
.title,
.title-text p {
  letter-spacing: -0.02em;
}

.author {
  letter-spacing: -0.02em;
}

/* 이미 쓰고 있는 스케일 유지 + 살짝 보정 */
.title {
  font-size: clamp(12px, 2cqw, 16px);
  line-height: var(--title-lh, 1.7);
  color: rgba(35, 36, 38, 0.8156862745);
}

.author {
  font-size: clamp(13px, 4.2cqw, 35px);
  line-height: var(--author-lh, 1);
  color: rgba(12, 44, 65, 0.6823529412);
  margin-bottom: 2px;
}

/* 본문 문단 여백 */
.title-text p {
  margin: 0 0 clamp(6px, 3.3cqw, 18px);
  word-break: keep-all;
  line-break: loose;
}

/*=====모바일 또 보정======*/
/* ===== FATE list: 모바일 튜닝 (≤572px) ===== */
@media (max-width: 572px) {
  :root {
    /* 상단 여백만 살짝 늘려 첫 카드가 더 내려오게 */
    --header-gap-bottom: 50px; /* 기존 50px → 70px */
    /* 좌우 여백(글줄 폭) 살짝 늘리기: 카드 내부 패딩 축소 */
    --card-pad-x: 15px; /* 기존 값보다 -4~10px 정도 줄임 */
    /* 필요하면 페이지 전체 패딩도 살짝 축소 */
    --pad-x: 15px; /* wrap 좌우 패딩 살짝만 줄임 */
  }
  /* 블러 사각형: 상하좌우 동일 패딩 적용 */
  .glass {
    /* 한 줄로 동일 값: 상=하=좌=우 */
    --glass-pad: clamp(10px, 4cqw, 28px);
    padding: clamp(10px, 4cqw, 26px) clamp(10px, 5cqw, 38px);
    border-radius: 12px; /* 둥글기 유지 */
  }
  .title {
    font-size: clamp(9px, 2.8cqw, 15px);
  }
  .author {
    font-size: clamp(20px, 5cqw, 35px);
  }
}
/* 초소형 보정 (≤400px): 너무 꽉 차 보이면 아주 살짝만 패딩 복원 */
@media (max-width: 400px) {
  .glass {
    --glass-pad: clamp(10px, 3cqw, 20px);
  }
  .glass .title {
    font-size: clamp(11px, 3.5cqw, 15px);
  }
  .glass .author {
    font-size: clamp(20px, 5cqw, 35px);
  }
}
@media (min-width: 572px) and (max-width: 768px) {
  :root {
    --header-gap-bottom: 50px;
    --card-pad-x: 40px;
    --pad-x: 20px;
  }
  .title {
    font-size: clamp(11px, 2.5cqw, 15px);
  }
  .author {
    font-size: clamp(12px, 4.6cqw, 35px);
  }
}
.card p:last-child {
  margin-bottom: 0;
}

/*탑버튼*/
.top-button-wrapper {
  display: flex;
  justify-content: center;
  margin: 40px auto 0 auto;
  max-width: 800px;
  padding-right: 10px;
}

#top-button {
  padding: 5px 18px;
  font-size: 8px;
  font-family: "Originals";
  background-color: rgba(255, 255, 255, 0);
  color: rgba(255, 255, 255, 0.737254902);
  border: 1.5px solid rgba(255, 255, 255, 0.737254902);
  border-radius: 19px;
  cursor: pointer;
}

/* 다크모드 대응 */
body[data-theme=dark] #top-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* 작가 버튼 기본 스타일 */
.author {
  margin: 0;
}

.author-btn {
  all: unset; /* 기본 버튼 스타일 제거 */
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: block;
  width: 100%;
  padding: 3px 0;
  text-align: center;
}

/* 2) meta는 열렸을 때만 간격 생기게 */
.card .meta {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.card.open .meta {
  gap: 8px;
}

/* 3) 본문(아코디언 바디) — 닫힘/열림 패딩 분리 */
.title {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease, margin 0.35s ease;
  padding: 0;
  margin: 0;
}

.card.open .title {
  max-height: 3000px;
}

/* 4) 마지막 문단 뒤 공백 제거 */
.card p:last-child {
  margin-bottom: 0;
}

/*푸터 오버드라이브*/
/* 모바일 푸터 조정 */
/* ===== Footer fine-tuning to match fic list ===== */
/* ≤400px */
@media (max-width: 400px) {
  :root {
    --ft-gap:23px;
    --ft-col2-spacer:11px;
    --ft-col3-fr:.55fr;
    --ft-left-img-w:50px;
    --ft-right1-w:82px;
    --ft-right2-w:75px;
    --ft-link-fs:12px;
    --cr-img-w:150px;
    --cr-mt:13px;
  }
}
/* ≤375px */
@media (max-width: 375px) {
  :root {
    --ft-gap:25px;
    --ft-col2-spacer:0px; /* 스페이서 제거 → 가운데 링크 칼럼 붙임 */
    --ft-col3-fr:0.1fr;
    --ft-left-img-w:60px;
    --ft-right1-w:82px;
    --ft-right2-w:74px;
    --ft-link-fs:11px;
    --cr-img-w:150px;
    --cr-mt:14px;
  }
}
/* ≤345px */
@media (max-width: 345px) {
  :root {
    --ft-gap:22px;
    --ft-col2-spacer:0px;
    --ft-col3-fr:0fr; /* 오른쪽으로 더 붙임 */
    --ft-left-img-w:60px;
    --ft-right1-w:83px;
    --ft-right2-w:73px;
    --ft-link-fs:11px;
    --cr-img-w:150px;
    --cr-mt:14px;
  }
}
/* ≤320px */
@media (max-width: 320px) {
  :root {
    --ft-gap:16px;
    --ft-col2-spacer:0px;
    --ft-col3-fr:0fr;
    --ft-left-img-w:60px;
    --ft-right1-w:85px;
    --ft-right2-w:75px;
    --ft-link-fs:11px;
    --cr-img-w:150px;
    --cr-mt:14px;
  }
}
/* (선택) 링크 밑줄도 fic과 통일하려면 */
.footer-links a {
  text-decoration: underline;
}

.spin-hover {
  transition: transform 0.3s ease; /* 살짝 부드럽게 */
}

.spin-hover:hover {
  animation: spin 1s linear infinite; /* hover 동안 무한 회전 */
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* 기본(접힘 상태) → 여유는 있지만 높이 줄임 */
.card .glass {
  padding: 8px var(--card-pad-x);
}

/* 열림 상태일 때는 다시 넉넉하게 */
.card.open .glass {
  padding: 30px var(--card-pad-x);
}

@media (max-width: 572px) {
  .card.open .glass {
    padding: 25px;
  }
}
@media (min-width: 768px) {
  .card .glass {
    padding: 15px; /* 예시: 위아래 35px, 좌우 50px */
  }
  .card.open .glass {
    padding: 25px;
  }
}
.card.open .title {
  padding: 0 0 10px;
}/*# sourceMappingURL=fatelist.css.map */