@charset "utf-8";

/* 블로그(blog.html) — itddaa.com/blog 레이아웃 구성, 메인 컬러·Pretendard 토큰
   loaded after style.css */
.page-blog { --bl-wrap: min(1600px, calc(100% - 2 * clamp(20px, 4vw, 80px))); background: #fff; }
.bl-wrap { width: var(--bl-wrap); margin: 0 auto; }

/* ===== visual ===== */
.bl-visual { position: relative; z-index: 1; overflow-x: clip; padding: calc(var(--header-h) + clamp(32px, 3.4vw, 64px)) 0 clamp(40px, 4vw, 80px); color: var(--ink); }
.bl-visual__bar { position: absolute; width: clamp(8px, .8vw, 15px); height: min(335px, 30%); background: var(--ink); }
.bl-visual__bar--r { right: 0; bottom: 0; transform-origin: center bottom; background: var(--brand); }
.bl-visual .bl-wrap { position: relative; }
.bl-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 60px; }
.bl-top__l { flex: 0 1 auto; min-width: 0; }
.bl-top__small { margin-bottom: clamp(30px, 3.2vw, 60px); font-size: clamp(14px, .9vw, 16px); font-weight: 500; line-height: 1.4; letter-spacing: -.02em; color: var(--mute); }
.bl-top__small span { display: block; min-height: 1.4em; }
.bl-title { font-size: clamp(40px, 4.4vw, 80px); font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.bl-title__row { display: block; overflow: hidden; padding: .1em 0 .23em; }
.bl-title__row + .bl-title__row { margin-top: -.25em; }
.bl-title__row > * { display: inline-block; position: relative; }
.bl-title__dot { position: absolute; top: 10%; left: 108%; width: calc(50 / 156 * 1em); min-width: 18px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--brand) 20%, rgba(26, 134, 218, 0) 62%); animation: bl-float 3s ease-in-out infinite; }
.bl-title__track span { color: var(--brand); }

.bl-mood { display: flex; flex-wrap: wrap; column-gap: .3em; margin-top: 6px; padding-left: calc(15 / 22 * 1em + .4em); font-size: clamp(17px, 1.15vw, 22px); font-weight: 400; line-height: 1.55; letter-spacing: -.025em; color: var(--ink-2); }
.bl-mood > span { display: flex; overflow: hidden; }
.bl-mood > span > * { display: block; }
.bl-gallery { width: 100vw; margin: clamp(28px, 2.6vw, 50px) 0 0 calc(50% - 50vw); overflow: hidden; }
.bl-gallery__track { display: flex; width: max-content; list-style: none; }
.bl-gallery__track li { flex: none; margin-right: clamp(8px, .6vw, 12px); height: clamp(130px, 10.4vw, 200px); overflow: hidden; border-radius: clamp(10px, .8vw, 16px); background: var(--paper); }
.bl-gallery__track img { display: block; width: auto; height: 100%; }
.bl-gallery.is-loop .bl-gallery__track { animation: bl-gallery var(--bl-gallery-dur, 60s) linear infinite; }
.bl-gallery:hover .bl-gallery__track { animation-play-state: paused; }
.bl-cate { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 0; margin: clamp(28px, 2.6vw, 50px) 0 0 -.6em; font-size: clamp(18px, 1.3vw, 25px); font-weight: 500; letter-spacing: -.02em; list-style: none; }
.bl-cate button { display: inline-flex; align-items: flex-start; gap: .2em; padding: 0 .6em; color: #b6bcc4; transition: color .25s var(--ease); }
.bl-cate button sup { font-size: .5em; font-weight: 600; line-height: 1.6; color: inherit; }
.bl-cate button:is(:hover, :focus-visible) { color: var(--brand); }
.bl-cate button[aria-pressed="true"] { color: var(--ink); text-decoration: line-through; text-decoration-thickness: 2px; }
.bl-bottom { margin-top: clamp(20px, 2.4vw, 46px); }
.bl-bottom__cue { display: inline-flex; align-items: center; gap: 4px; margin-top: clamp(20px, 1.8vw, 34px); font-size: clamp(17px, 1.3vw, 25px); font-weight: 500; line-height: 1.3; }
.bl-bottom__cue svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: bl-bob 3s ease-in-out infinite; }
.bl-bottom__msg { display: flex; align-items: flex-start; gap: .4em; max-width: 36em; font-size: clamp(17px, 1.15vw, 22px); font-weight: 400; line-height: 1.5; letter-spacing: -.02em; color: var(--ink-2); word-break: keep-all; }
.bl-bottom__msg::before { content: ""; flex: none; width: calc(15 / 22 * 1em); aspect-ratio: 1; margin-top: .3em; border-radius: 50%; background: var(--ink); }

/* ===== list ===== */
.bl-list { padding: clamp(40px, 4vw, 80px) 0 clamp(40px, 4vw, 80px); overflow: hidden; }
.bl-marquee { display: flex; margin: clamp(60px, 5vw, 100px) 0 0; font-size: clamp(80px, 12vw, 230px); font-weight: 700; line-height: 1; letter-spacing: -.04em; white-space: nowrap; color: #eef1f5; pointer-events: none; user-select: none; }
.bl-marquee span { flex: none; padding-right: .2em; }
.bl-list .bl-wrap { position: relative; }
.bl-status { margin-bottom: clamp(20px, 2vw, 32px); font-size: 16px; color: var(--mute); }
.bl-status b { color: var(--ink); font-weight: 700; }
.bl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(40px, 3.2vw, 60px) clamp(16px, 1.6vw, 30px); margin-bottom: clamp(60px, 4.2vw, 80px); list-style: none; }
.bl-card { display: block; color: inherit; text-decoration: none; }
.bl-card__img { position: relative; display: block; aspect-ratio: 1; margin-bottom: 20px; overflow: hidden; background: var(--paper); }
.bl-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bl-card__txt { display: block; }
.bl-card__tit { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: clamp(17px, 1vw, 19px); font-weight: 600; line-height: 1.45; letter-spacing: -.025em; word-break: keep-all; transition: color .25s var(--ease); }
.bl-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 20px; }
.bl-card__tags span { padding: 7px 12px 6px; border-radius: 3px; background: #b5bbc3; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.bl-card__tags .is-cate { background: var(--brand); }
.bl-card:is(:hover, :focus-visible) .bl-card__img img { transform: scale(1.08); }
.bl-card:is(:hover, :focus-visible) .bl-card__tit { color: var(--brand); }
.bl-empty { grid-column: 1 / -1; padding: 80px 0; text-align: center; font-size: 18px; color: var(--mute); }

.bl-more { text-align: center; }
.bl-more__msg { margin-bottom: 24px; font-size: clamp(18px, 1.15vw, 21px); font-weight: 400; line-height: 1.6; letter-spacing: -.02em; }
.bl-more__msg b { font-weight: 700; }
.bl-more__btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 3px; background: var(--ink); color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -.02em; transition: background .25s var(--ease); }
.bl-more__btn:is(:hover, :focus-visible) { background: var(--brand); }
.bl-more__btn[hidden] { display: none; }
.bl-more__btn small { font-size: 14px; font-weight: 500; opacity: .7; }

/* ===== motion ===== */
.js-motion .bl-visual__bar { transform: scaleY(0); transition: transform 1.2s var(--ease); }
.js-motion .bl-title__row > * { transform: translateY(120%); transition: transform 1.1s var(--ease); }
.js-motion .bl-title__row + .bl-title__row > * { transition-delay: .12s; }
.js-motion .bl-mood > span > * { transform: translateY(110%); transition: transform 1s var(--ease) .3s; }
.js-motion :is(.bl-cate, .bl-bottom__cue, .bl-bottom__msg, .bl-gallery) { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js-motion .bl-bottom__msg { transition-delay: .7s; }
.js-motion .bl-gallery { transition-delay: .8s; }
.js-motion .bl-bottom__cue { transition-delay: .95s; }
.js-motion .bl-cate { transition-delay: 1.1s; }
.is-ready .bl-visual__bar, .is-ready .bl-title__row > *, .is-ready .bl-mood > span > *,
.is-ready :is(.bl-cate, .bl-bottom__cue, .bl-bottom__msg, .bl-gallery) { opacity: 1; transform: none; }
.bl-marquee.is-on span { animation: bl-marquee 20s linear infinite; }
.js-motion .bl-grid > li { opacity: 0; transform: translateY(48px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js-motion .bl-grid > li.is-in { opacity: 1; transform: none; }

@keyframes bl-marquee { to { transform: translateX(-100%); } }
@keyframes bl-gallery { to { transform: translateX(-50%); } }
@keyframes bl-float { 50% { transform: translateY(-30%); } }
@keyframes bl-bob { 50% { transform: translateY(5px); } }

@media (prefers-reduced-motion: reduce) {
  .bl-title__dot, .bl-bottom__cue svg, .bl-marquee span, .bl-gallery__track { animation: none !important; }
  .bl-gallery { overflow-x: auto; }
}

/* ===== responsive ===== */
@media (max-width: 1280px) {
  .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .bl-visual__bar { display: none; }
  .bl-title { font-size: clamp(30px, 8.4vw, 40px); }
  .bl-cate { gap: 6px; margin: 26px 0 0; font-size: 16px; }
  .bl-cate button { padding: .45em .7em; border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink-2); }
  .bl-cate button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; text-decoration: none; }
  .bl-bottom { margin-top: 24px; }
  .bl-gallery { margin-top: 24px; }
  .bl-gallery__track li { height: 120px; border-radius: 10px; }
}
@media (max-width: 560px) {
  .bl-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .bl-card__img { margin-bottom: 16px; }
  .bl-card__tit { font-size: 17px; }
  .bl-card__tags { margin-top: 14px; }
  .bl-more__btn { font-size: 16px; }
}