/* =========================================================
 *  하이론 Official Page — Purple Theme
 * ========================================================= */

/* ===== Fonts ===== */
/* 한글 — NanumSquareNeo (Naver) */
@font-face{font-family:'NanumSquareNeo';src:url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'NanumSquareNeo';src:url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'NanumSquareNeo';src:url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'NanumSquareNeo';src:url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'NanumSquareNeo';src:url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff2') format('woff2');font-weight:900;font-display:swap}


/* ===== Variables ===== */
:root{
  --purple-50:#f5f3ff;
  --purple-100:#ede9fe;
  --purple-200:#ddd6fe;
  --purple-300:#c4b5fd;
  --purple-400:#a78bfa;
  --purple-500:#8b5cf6;
  --purple-600:#7c3aed;
  --purple-700:#6d28d9;
  --purple-800:#5b21b6;
  --purple-900:#4c1d95;
  --lavender:#b794f4;
  --violet-soft:#9f7aea;
  --ink:#1a0f2e;
  --ink-soft:#3b2860;
  --text:#2a1f45;
  --text-soft:#6b5c8a;
  --bg:#faf8ff;
  --card:#fff;
  --line:#e9e2ff;
  --shadow-sm:0 4px 14px rgba(124,58,237,.08);
  --shadow-md:0 12px 32px rgba(124,58,237,.12);
  --shadow-lg:0 20px 50px rgba(76,29,149,.18);
  --nav-h:64px;
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;scroll-padding-top:var(--nav-h);
  background:#4c1d95;
}
body{
  font-family:'NanumSquareNeo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text);background:var(--bg);line-height:1.7;
  -webkit-font-smoothing:antialiased;
  font-weight:400;
  letter-spacing:-.01em;
  overscroll-behavior:none;
  margin:0;
  /* nav이 fixed라 body는 padding-top 대신 margin-top 없이 두고 hero에서 처리 */
}
/* nav 이전에 어떤 여백도 없도록 hero가 직접 상단부터 시작 */
.hero:first-of-type{margin-top:var(--nav-h)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul{list-style:none}
code{background:var(--purple-100);color:var(--purple-700);padding:2px 6px;border-radius:4px;font-size:.9em}

.container{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,24px)}

/* ===== FIXED NAV ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  background:#fff;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(167,139,250,.2);
  transition:background .3s ease, box-shadow .3s ease;
}
.nav.is-scrolled{box-shadow:0 4px 20px rgba(124,58,237,.08)}
.nav__inner{
  max-width:1200px;height:100%;margin:0 auto;padding:0 clamp(14px,4vw,24px);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.nav__brand{
  font-family:'NanumSquareNeo',sans-serif;font-weight:800;
  font-size:clamp(15px,4vw,18px);
  background:linear-gradient(135deg,var(--purple-600),var(--lavender));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  flex-shrink:0;
}
.nav__menu{
  display:flex;align-items:center;gap:4px;flex:1;justify-content:flex-end;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  height:100%;padding:8px 0;
}
.nav__menu::-webkit-scrollbar{display:none}
.nav__menu a{
  display:inline-flex;align-items:center;
  padding:7px 14px;border-radius:999px;
  font-family:'NanumSquareNeo',sans-serif;font-weight:600;
  font-size:clamp(11px,1.4vw,13px);line-height:1;
  color:var(--text-soft);letter-spacing:.01em;
  transition:color .2s ease, background .2s ease;
  white-space:nowrap;flex-shrink:0;
}
.nav__menu a:hover{color:var(--purple-700);background:var(--purple-50)}
.nav__menu a.is-active{color:#fff;background:linear-gradient(135deg,var(--purple-600),var(--purple-500))}

/* ===== HERO ===== */
.hero{
  position:relative;min-height:540px;
  padding:clamp(60px,10vw,90px) clamp(16px,4vw,24px) clamp(70px,10vw,110px);
  overflow:hidden;color:#fff;
  margin-top:-1px;  /* nav과 공백 방지 */
}
.hero__bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(196,181,253,.8) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 20%, rgba(139,92,246,.7) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(76,29,149,.6) 0%, transparent 60%),
    linear-gradient(135deg, #6d28d9 0%, #4c1d95 60%, #2e1065 100%);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1px 1px at 20px 30px,rgba(255,255,255,.4),transparent),
    radial-gradient(1px 1px at 60px 70px,rgba(255,255,255,.3),transparent),
    radial-gradient(1.5px 1.5px at 120px 40px,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 180px 90px,rgba(255,255,255,.3),transparent),
    radial-gradient(1.5px 1.5px at 240px 20px,rgba(255,255,255,.4),transparent);
  background-repeat:repeat;background-size:250px 120px;
  opacity:.6;animation:twinkle 8s linear infinite;
}
@keyframes twinkle{0%,100%{opacity:.6}50%{opacity:.3}}

.hero__deco{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero__deco span{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(183,148,244,.35),transparent 70%);
  filter:blur(40px);
}
.hero__deco span:nth-child(1){width:340px;height:340px;top:-80px;left:-80px;animation:float 12s ease-in-out infinite}
.hero__deco span:nth-child(2){width:280px;height:280px;bottom:-60px;right:10%;animation:float 15s ease-in-out infinite reverse}
.hero__deco span:nth-child(3){width:200px;height:200px;top:40%;right:-60px;animation:float 10s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-20px)}}

.hero__inner{
  position:relative;z-index:1;
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;
}
.hero__avatar{justify-self:center}

/* Rounded square frame (no spin) */
.avatar-frame{
  position:relative;
  width:280px;height:340px;
  border-radius:28px;padding:8px;
  background:linear-gradient(135deg,#e0c3fc 0%,#8b5cf6 40%,#c4b5fd 70%,#7c3aed 100%);
  box-shadow:
    0 24px 64px rgba(76,29,149,.55),
    0 0 100px rgba(183,148,244,.35),
    inset 0 1px 0 rgba(255,255,255,.35);
  transform:rotate(-2deg);
  transition:transform .4s ease;
}
.avatar-frame::before{
  content:"";position:absolute;inset:-6px;border-radius:32px;
  background:linear-gradient(135deg,rgba(224,195,252,.4),transparent 50%,rgba(124,58,237,.3));
  filter:blur(20px);z-index:-1;opacity:.8;
}
.avatar-frame:hover{transform:rotate(0deg) scale(1.02)}
.avatar-frame img{
  width:100%;height:100%;border-radius:22px;object-fit:cover;
  background:#fff;display:block;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.9);
}
.avatar-frame__tag{
  position:absolute;bottom:-14px;right:-10px;
  padding:8px 16px;border-radius:999px;
  background:linear-gradient(135deg,#fff,#f5f0ff);
  color:var(--purple-800);
  font-family:'NanumSquareNeo',sans-serif;font-weight:800;font-size:13px;letter-spacing:.02em;
  box-shadow:0 8px 20px rgba(76,29,149,.35),0 0 0 3px rgba(255,255,255,.5);
  transform:rotate(4deg);
  white-space:nowrap;
}

.hero__eyebrow{
  font-family:'NanumSquareNeo',sans-serif;font-weight:800;
  letter-spacing:.3em;font-size:clamp(10px,2.6vw,13px);
  opacity:.9;margin-bottom:12px;
  color:#e0c3fc;
}
.hero__name{
  font-size:clamp(24px,5.2vw,42px);font-weight:800;line-height:1.2;margin-bottom:10px;
  text-shadow:0 6px 30px rgba(0,0,0,.3);
  word-break:keep-all;letter-spacing:-.02em;
}
.hero__name span{
  font-family:'NanumSquareNeo',sans-serif;font-weight:600;opacity:.85;
  font-size:.58em;margin-left:6px;
}
.hero__sub{
  font-weight:700;font-size:clamp(11px,2.5vw,13px);
  letter-spacing:.25em;opacity:.75;color:#e0c3fc;
  margin-bottom:24px;
}
.hero__tag{
  font-size:clamp(13px,3.4vw,16px);opacity:.95;margin-bottom:26px;max-width:540px;
  word-break:keep-all;
}
.hero__meta{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:26px;width:100%;max-width:560px}
.hero__meta li{
  display:flex;align-items:center;gap:14px;
  font-size:clamp(12px,3vw,14px);padding:11px 0 11px 22px;
  border-bottom:1px solid rgba(255,255,255,.2);
  word-break:keep-all;white-space:nowrap;
  position:relative;
}
.hero__meta li::before{
  content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:#e0c3fc;
  box-shadow:0 0 12px rgba(224,195,252,.8);
}
.hero__meta strong{
  min-width:44px;opacity:.75;color:#e0c3fc;
  font-family:'NanumSquareNeo',sans-serif;font-size:clamp(10px,2.4vw,12px);letter-spacing:.12em;
  flex-shrink:0;
}
.hero__meta span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero__cta{display:flex;flex-wrap:nowrap;gap:clamp(6px,1.5vw,12px);max-width:540px}
.btn{
  position:relative;flex:1 1 0;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;gap:clamp(4px,1.2vw,7px);
  padding:clamp(9px,2.4vw,13px) clamp(6px,2vw,20px);border-radius:12px;
  font-weight:700;font-size:clamp(10.5px,2.5vw,14px);letter-spacing:.01em;
  white-space:nowrap;
  background:rgba(255,255,255,.12);color:#fff;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1.5px solid rgba(255,255,255,.25);
  box-shadow:0 8px 24px rgba(30,10,70,.35), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3), background .25s ease, border-color .25s ease, box-shadow .25s ease;
  font-family:'NanumSquareNeo',sans-serif;
  overflow:hidden;
}
.btn::before{
  content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(135deg,rgba(255,255,255,.25),transparent 60%);
  transition:opacity .25s ease;
}
.btn:hover{transform:translateY(-3px) scale(1.02);border-color:rgba(255,255,255,.5);box-shadow:0 14px 36px rgba(30,10,70,.5), inset 0 1px 0 rgba(255,255,255,.3)}
.btn:hover::before{opacity:1}
.btn svg{position:relative;z-index:1;flex-shrink:0}
.btn span{position:relative;z-index:1}

.btn--ig{background:linear-gradient(45deg,#833AB4 0%,#C13584 35%,#E1306C 60%,#F77737 100%);border-color:rgba(255,255,255,.35)}
.btn--ig:hover{box-shadow:0 14px 36px rgba(225,48,108,.45), inset 0 1px 0 rgba(255,255,255,.35)}

.btn--yt{background:linear-gradient(135deg,#FF0033 0%,#CC0029 100%);border-color:rgba(255,255,255,.35)}
.btn--yt:hover{box-shadow:0 14px 36px rgba(255,0,51,.4), inset 0 1px 0 rgba(255,255,255,.35)}

.btn--tt{background:linear-gradient(135deg,#000 0%,#1a1a1a 100%);border-color:rgba(255,255,255,.25)}
.btn--tt:hover{box-shadow:0 14px 36px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.3)}

/* ===== SECTION TITLE ===== */
.sec-title{
  font-family:'NanumSquareNeo',sans-serif;
  font-size:clamp(22px,5.2vw,32px);font-weight:700;margin-bottom:clamp(18px,4vw,28px);
  display:flex;align-items:center;gap:10px;color:var(--ink);
  flex-wrap:wrap;word-break:keep-all;letter-spacing:-.01em;
}
.sec-title span{
  display:inline-block;font-family:'NanumSquareNeo',sans-serif;
  font-size:clamp(10px,2.4vw,11px);letter-spacing:.2em;padding:5px 12px;border-radius:999px;
  background:linear-gradient(135deg,var(--purple-600),var(--purple-500));color:#fff;
  flex-shrink:0;
}

/* ===== FEED ===== */
.feed{padding:clamp(50px,9vw,70px) 0;position:relative}
.feed--ig{background:linear-gradient(180deg,#fff 0%,#f8f3ff 100%)}
.feed--yt{background:#fff}
.feed--tt{background:linear-gradient(180deg,#1a0f2e 0%,#2e1065 100%);color:#fff}
.feed--tt .sec-title{color:#fff}
.feed--tt .sec-title span{background:#fff;color:var(--purple-800)}
.feed--tt .feed__handle{color:#e0c3fc}
.feed--tt .feed__more{color:#c4b5fd}

/* ===== FEED BAR (single-line header) ===== */
.feed__bar{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-bottom:clamp(18px,4vw,28px);flex-wrap:nowrap;
}
.feed__titleset{
  display:flex;align-items:center;gap:10px;
  min-width:0;flex:1;
}
.feed__title{
  font-family:'NanumSquareNeo',sans-serif;
  font-size:clamp(22px,5.2vw,32px);font-weight:700;
  color:var(--ink);letter-spacing:-.01em;
  line-height:1.1;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.feed--tt .feed__title{color:#fff}

.feed__badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:999px;
  font-family:'NanumSquareNeo',sans-serif;
  font-size:clamp(9.5px,2.2vw,11px);font-weight:800;
  letter-spacing:.18em;
  background:#faf5ff;
  color:var(--purple-700);
  border:1px solid var(--purple-200);
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(196,181,253,.35);
  position:relative;
}
.feed__badge::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#f472b6;display:inline-block;
  box-shadow:0 0 0 0 rgba(244,114,182,.6);
  animation:pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 0 rgba(244,114,182,.55)}
  50%{box-shadow:0 0 0 6px rgba(244,114,182,0)}
}

/* 전체 보기 — more button */
.more{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:999px;
  font-family:'NanumSquareNeo',sans-serif;font-weight:700;
  font-size:clamp(11.5px,2.7vw,13px);letter-spacing:.01em;
  color:#fff;flex-shrink:0;
  background:linear-gradient(135deg,var(--purple-600),var(--purple-500));
  box-shadow:0 4px 14px rgba(124,58,237,.3);
  transition:all .25s ease;
  white-space:nowrap;
}
.more:hover{transform:translateX(3px);box-shadow:0 6px 20px rgba(124,58,237,.45)}
.more:hover svg{transform:translateX(2px)}
.more svg{transition:transform .2s ease}

/* ===== GRID ===== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid--yt{grid-template-columns:repeat(2,1fr);gap:20px}
.grid--tt{grid-template-columns:repeat(4,1fr);gap:14px}
.item{
  position:relative;display:block;border-radius:14px;overflow:hidden;
  background:var(--purple-100);aspect-ratio:1/1;transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:var(--shadow-sm);
}
.grid--yt .item{aspect-ratio:16/9;border-radius:16px}
.grid--tt .item{aspect-ratio:9/16}
.item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.item:hover img{transform:scale(1.06)}
.item__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(30,10,70,.88) 100%);
  padding:14px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;
}
.item__title{font-size:13px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item__date{font-size:11px;opacity:.8;margin-top:4px;font-family:'NanumSquareNeo',sans-serif}
.item__badge{
  position:absolute;top:10px;right:10px;
  background:rgba(76,29,149,.85);color:#fff;font-size:11px;padding:4px 8px;border-radius:6px;
  font-family:'NanumSquareNeo',sans-serif;font-weight:700;backdrop-filter:blur(4px);
}
.item__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.item__play::before{content:"";border:10px solid transparent;border-left:16px solid var(--purple-800);margin-left:4px}

/* ===== Skeleton ===== */
.skeleton{
  aspect-ratio:1/1;border-radius:14px;
  background:linear-gradient(90deg,var(--purple-100) 25%,var(--purple-50) 50%,var(--purple-100) 75%);
  background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;
}
.skeleton--v{aspect-ratio:9/16}
.skeleton--w{aspect-ratio:16/9;border-radius:16px}
.feed--tt .skeleton{background:linear-gradient(90deg,#2a1a4d 25%,#3d2566 50%,#2a1a4d 75%);background-size:200% 100%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== Fallback ===== */
.fallback{
  grid-column:1/-1;padding:48px 24px;text-align:center;
  border-radius:16px;background:rgba(139,92,246,.06);
  border:1px dashed rgba(139,92,246,.3);
}
.feed--tt .fallback{background:rgba(255,255,255,.05);border-color:rgba(224,195,252,.3)}
.fallback p{margin-bottom:16px;font-size:14px;color:var(--text-soft)}
.feed--tt .fallback p{color:#c4b5fd}
.fallback .btn{background:linear-gradient(135deg,var(--purple-600),var(--purple-500));color:#fff;box-shadow:0 6px 18px rgba(124,58,237,.35)}

/* ===== ABOUT ===== */
.about{
  padding:clamp(60px,9vw,90px) 0 clamp(50px,8vw,80px);
  background:
    radial-gradient(ellipse at top,#f3ecff 0%,#faf8ff 40%),
    #faf8ff;
}
.block{
  background:#fff;border-radius:clamp(14px,3vw,20px);
  padding:clamp(20px,4.5vw,32px);margin-bottom:14px;
  box-shadow:var(--shadow-sm);border:1px solid var(--line);
  transition:transform .25s ease, box-shadow .25s ease;
}
.block:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.block__title{
  font-size:clamp(16px,4.2vw,20px);font-weight:800;margin-bottom:12px;color:var(--ink);
  display:flex;align-items:center;gap:8px;word-break:keep-all;
}
.block__lead{font-size:clamp(14px,3.6vw,16px);color:var(--ink-soft);word-break:keep-all}
.block p{font-size:clamp(13px,3.4vw,15px);color:var(--text);margin-bottom:10px;word-break:keep-all}
.block p:last-child{margin-bottom:0}
.block em{font-style:normal;font-weight:700;color:var(--purple-700)}
.block .muted{font-size:clamp(12px,3.2vw,13px);color:var(--text-soft);background:var(--purple-50);padding:12px 14px;border-radius:10px;border-left:3px solid var(--purple-400);word-break:keep-all}

/* Timeline */
.timeline{position:relative;padding-left:4px}
.timeline::before{
  content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--purple-400),var(--purple-200));
  transform:translateX(-1px);  /* width:2px의 정확한 중앙 정렬 */
}
.tl{display:flex;gap:18px;padding:14px 0;position:relative;align-items:center}
.tl__dot{
  width:16px;height:16px;border-radius:50%;flex-shrink:0;
  background:#fff;border:3px solid var(--purple-500);
  box-shadow:0 0 0 4px var(--purple-50);z-index:1;
}
.tl__body{flex:1;min-width:0}
.tl__date{
  font-family:'NanumSquareNeo',sans-serif;font-weight:700;font-size:clamp(11px,2.8vw,12px);
  letter-spacing:.06em;color:var(--purple-600);margin-bottom:4px;
}
.tl__body p:last-child{font-size:clamp(13px,3.3vw,14.5px);color:var(--text);word-break:keep-all}

/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tag{
  padding:5px 12px;border-radius:999px;font-size:clamp(11px,2.8vw,13px);font-weight:600;
  background:var(--purple-100);color:var(--purple-800);
  transition:transform .15s ease, background .15s ease;
}
.tag:hover{background:var(--purple-200);transform:translateY(-2px)}

/* Facts */
.facts li{
  padding:12px 16px;background:var(--purple-50);border-radius:12px;
  margin-bottom:8px;font-size:clamp(13px,3.3vw,14.5px);
  border-left:3px solid var(--purple-400);
  word-break:keep-all;
}
.facts li strong{color:var(--purple-700);display:inline-block;margin-right:4px}

.about__note{
  font-size:13px;color:var(--text-soft);text-align:center;
  margin-top:24px;padding:14px;
}
.about__note a{color:var(--purple-600);text-decoration:underline}

/* ===== FOOTER (minimal) ===== */
.foot{
  padding:18px 24px;text-align:center;
  background:var(--ink);
  font-size:11.5px;color:rgba(255,255,255,.55);
  letter-spacing:.02em;
}
.foot a{color:rgba(255,255,255,.75);transition:color .2s ease}
.foot a:hover{color:#e0c3fc}

/* ============================================
   GO TO TOP BUTTON
   ============================================ */
.gotop{
  position:fixed;right:clamp(14px,3.5vw,22px);bottom:clamp(14px,3.5vw,22px);
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple-600),var(--purple-500));
  color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(124,58,237,.4);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease, box-shadow .25s ease;
  z-index:90;
}
.gotop.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.gotop:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(124,58,237,.55)}
.gotop:active{transform:translateY(-1px)}

/* ============================================
   TABLET & MOBILE (≤ 900px)
   ============================================ */
@media (max-width:900px){
  /* Nav: inline scroll (no hamburger) */
  .nav__menu{gap:2px;padding:6px 0}
  .nav__menu a{padding:6px 10px;font-size:12px;line-height:1}

  /* Hero → column */
  .hero__inner{grid-template-columns:1fr;text-align:center;gap:28px}
  .hero__text{display:flex;flex-direction:column;align-items:center}
  .hero__name{text-align:center;width:100%}
  .hero__sub{text-align:center}
  .hero__tag{margin-left:auto;margin-right:auto;text-align:center}
  .hero__meta{margin-left:auto;margin-right:auto;text-align:left;width:100%;max-width:460px}
  .hero__cta{margin:0 auto;width:100%;max-width:420px}
  .avatar-frame{width:clamp(200px,55vw,260px);height:clamp(240px,65vw,310px)}
  .avatar-frame__tag{font-size:clamp(11px,2.8vw,13px);padding:6px 14px}

  /* About stays as single column */
  .about__grid{grid-template-columns:1fr}
}

/* ============================================
   MOBILE CAROUSEL (≤ 768px)
   - Feed 카드를 가로 스크롤 캐러셀로 전환
   - 한 개 위주 보이고 옆으로 살짝 보여 스와이프 유도
   ============================================ */
@media (max-width:768px){
  .grid{
    display:flex;grid-template-columns:none;
    gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding:clamp(16px,4vw,24px);
    padding:4px clamp(16px,4vw,24px) 14px;
    margin:0 calc(-1 * clamp(16px,4vw,24px));
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  .grid::-webkit-scrollbar{height:6px}
  .grid::-webkit-scrollbar-track{background:transparent}
  .grid::-webkit-scrollbar-thumb{background:var(--purple-300);border-radius:99px}
  .feed--tt .grid::-webkit-scrollbar-thumb{background:rgba(224,195,252,.4)}

  .grid .item, .grid .skeleton{
    flex:0 0 calc(85% - 7px);
    scroll-snap-align:start;
    min-width:0;
  }
  /* YouTube = 16:9 가로, 한 개만 */
  .grid--yt .item, .grid--yt .skeleton{flex:0 0 calc(90% - 7px)}
  /* TikTok = 세로, 한 개 보이고 옆이 살짝 */
  .grid--tt .item, .grid--tt .skeleton{flex:0 0 calc(60% - 7px)}

  .feed__bar{margin-bottom:18px}
}

/* 조금 더 큰 모바일(480~768)에서는 2개 살짝 보이게 */
@media (min-width:480px) and (max-width:768px){
  .grid .item, .grid .skeleton{flex:0 0 calc(46% - 7px)}
  .grid--yt .item, .grid--yt .skeleton{flex:0 0 calc(68% - 7px)}
  .grid--tt .item, .grid--tt .skeleton{flex:0 0 calc(36% - 7px)}
}

/* ============================================
   SMALL MOBILE (≤ 480px)
   ============================================ */
@media (max-width:480px){
  .hero__meta{grid-template-columns:1fr;max-width:100%}
  .hero__cta{gap:6px;max-width:100%}
  .btn{padding:10px 4px;gap:4px}
  .btn svg{width:14px;height:14px}
  .btn span{font-size:11px}
  .feed__bar{gap:8px}
  .feed__titleset{gap:8px}
  .more{padding:7px 13px}
  .more svg{width:12px;height:12px}
  .gotop{width:42px;height:42px}
  .gotop svg{width:18px;height:18px}
}

/* ============================================
   EXTRA SMALL (≤ 360px) - iPhone SE 등
   ============================================ */
@media (max-width:360px){
  :root{--nav-h:58px}
  .nav__brand{font-size:14px}
  .nav__menu a{font-size:13px;padding:12px 14px}
  .hero__name{font-size:22px}
  .btn{padding:9px 2px;font-size:10px}
  .btn svg{width:12px;height:12px}
  .btn span{font-size:10px}
  .hero__meta li{font-size:11.5px;padding-left:10px}
  .hero__meta strong{min-width:42px;font-size:9.5px}
  .block__title{font-size:15px}
  .facts li{font-size:12.5px;padding:10px 12px}
  .tl__body p:last-child{font-size:12.5px}
  .block p{font-size:12.5px}
  .sec-title{font-size:18px;gap:8px}
  .sec-title span{font-size:9.5px;padding:4px 10px;letter-spacing:.2em}
}