/* ============================================================
   Rooms — 공통 스타일 (미니멀·실용)
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, "Malgun Gothic", "맑은 고딕", sans-serif;
  background: #f5f6f8; color: #2b2f36; line-height: 1.6;
}
a { color: inherit; }

/* 상단바 */
.rm-top { background: #fff; border-bottom: 1px solid #e6e8ec; position: sticky; top: 0; z-index: 50; }
.rm-top-inner {
  max-width: 980px; margin: 0 auto; padding: 0 18px;
  height: 56px; display: flex; align-items: center; gap: 18px;
}
.rm-brand { font-size: 17px; font-weight: 800; text-decoration: none; }
.rm-nav { display: flex; gap: 4px; margin-left: 6px; }
.rm-nav a {
  font-size: 13px; text-decoration: none; color: #4b5563;
  padding: 6px 11px; border-radius: 7px;
}
.rm-nav a:hover { background: #f0f2f5; }
.rm-user { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.rm-hi { font-size: 12.5px; color: #767c86; }
.rm-btn {
  font-size: 12.5px; text-decoration: none; color: #4b5563;
  border: 1px solid #d6d9de; background: #fff;
  padding: 5px 11px; border-radius: 7px; cursor: pointer;
}
.rm-btn:hover { background: #f0f2f5; }
.rm-btn-primary { background: #2b2f36; color: #fff; border-color: #2b2f36; }
.rm-btn-primary:hover { background: #14171c; }
.rm-btn-admin { background: #fff3e0; color: #c47d1a; border-color: #f0c27a; }

/* 플래시 */
.rm-flash {
  max-width: 980px; margin: 12px auto 0; padding: 10px 16px;
  background: #e7f5ec; border: 1px solid #b9e0c8; color: #2f7a52;
  border-radius: 8px; font-size: 13px;
}

/* 메인 */
.rm-main { max-width: 980px; margin: 0 auto; padding: 24px 18px 60px; }

/* 홈 히어로 */
.rm-hero { text-align: center; padding: 30px 0 26px; }
.rm-hero h1 {
  font-size: 28px; font-weight: 800; letter-spacing: -.5px;
  background: linear-gradient(90deg,#f7971e,#8E2DE2,#11998e,#4e90c2);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: heroflow 8s ease infinite;
}
@keyframes heroflow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
/* 두문자 강조 (아·나·만·공) */
.rm-hero h1 .hl {
  -webkit-text-fill-color: currentColor;       /* 그라데이션 대신 단색 또렷하게 */
  color: #2b2f36;
  font-size: 1.18em; font-weight: 900;
  padding: 0 1px;
  position: relative;
}
.rm-hero h1 .hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px;
  border-radius: 3px; opacity: .7;
}
/* 두문자 ↔ 방 색깔 매칭 */
.hl-idea   { color: #e8870c; }   /* 아 — 아이디어방(주황) */
.hl-build  { color: #2f74b5; }   /* 나 — 개발요청방(파랑) */
.hl-learn  { color: #12a07a; }   /* 만 — 배움방(초록) */
.hl-shorts { color: #9b2de2; }   /* 공 — 쇼츠방(보라) */
.hl-idea::after   { background: linear-gradient(90deg,#f7971e,#ffd200); }
.hl-build::after  { background: linear-gradient(90deg,#2b5876,#5ee7df); }
.hl-learn::after  { background: linear-gradient(90deg,#11998e,#38ef7d); }
.hl-shorts::after { background: linear-gradient(90deg,#8E2DE2,#ff7eb3); }
.rm-hero p { color: #767c86; font-size: 14px; margin-top: 8px; }

/* ===== 회전 캐러셀 (coverflow) ===== */
.carousel {
  position: relative;
  width: 100%;
  /* 전면 카드 높이 기준 */
  height: 440px;
  margin: 10px 0 6px;
  overflow: hidden;
  touch-action: pan-y;          /* 세로 스크롤 허용, 가로는 캐러셀이 처리 */
  user-select: none;
}
.carousel-track {
  position: absolute; inset: 0;
  /* 카드들은 JS가 절대배치/transform으로 제어 */
}
.carousel .room-card {
  position: absolute;
  top: 50%; left: 50%;
  width: min(78vw, 320px);
  height: 420px;
  margin: 0;
  will-change: transform, opacity;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s, filter .45s;
  cursor: pointer;
}
/* 캐러셀 안에서는 hover 떠오름 효과 끔(회전이 주효과) */
.carousel .room-card:hover { transform: none; }

.carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 6px;
  display: flex; justify-content: center; gap: 8px; z-index: 20;
}
.carousel-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: #cfd4da; cursor: pointer; transition: width .25s, background .25s;
}
.carousel-dots button.on { width: 22px; border-radius: 6px; background: #2b2f36; }

/* 카드 안 추가 요소 */
.room-card .rc-tags { margin-top: 2px; }
.room-card .rc-go {
  position: absolute; left: 22px; bottom: 18px;
  font-size: 13px; font-weight: 700; color: #fff;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .35s, transform .35s;
}
.carousel .room-card.is-center .rc-go { opacity: 1; transform: translateX(0); }

.room-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: block; text-decoration: none; color: #fff;
  border-radius: 16px; padding: 22px;
  min-height: 168px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background-position .6s ease;
}
/* 방별 그라데이션 */
.rc-idea   { background-image: linear-gradient(135deg,#f7971e 0%,#ffd200 45%,#ff8a5c 100%); }
.rc-build  { background-image: linear-gradient(135deg,#2b5876 0%,#4e90c2 50%,#5ee7df 100%); }
.rc-learn  { background-image: linear-gradient(135deg,#11998e 0%,#38ef7d 100%); }
.rc-shorts { background-image: linear-gradient(135deg,#8E2DE2 0%,#e94f8a 55%,#ff7eb3 100%); }

.room-card:hover {
  transform: translateY(-7px) scale(1.015);
  box-shadow: 0 16px 38px rgba(0,0,0,.20);
  background-position: 100% 50%;           /* 그라데이션 흐름 */
}

/* 위쪽 흐르는 광택(shine) */
.room-card .rc-shine {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 50%; height: 100%; z-index: 1;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: none;
}
.room-card:hover .rc-shine { animation: shine 0.9s ease forwards; }
@keyframes shine { to { left: 130%; } }

/* 내용은 광택 위로 */
.room-card .rc-emoji, .room-card h3, .room-card .rc-desc,
.room-card > div { position: relative; z-index: 2; }

.room-card .rc-emoji {
  font-size: 38px; line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  display: inline-block;
}
.room-card:hover .rc-emoji { transform: scale(1.18) rotate(-6deg); }

.room-card h3 { font-size: 19px; font-weight: 800; margin: 10px 0 5px; text-shadow: 0 1px 3px rgba(0,0,0,.18); }
.room-card .rc-desc { font-size: 13px; color: rgba(255,255,255,.92); line-height: 1.55; }
.room-card .rc-meta { margin-top: 14px; font-size: 12px; color: rgba(255,255,255,.85); display: flex; gap: 12px; }
.room-card .rc-tag {
  display: inline-block; font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.22); backdrop-filter: blur(2px);
  border-radius: 20px; padding: 3px 10px; margin-top: 12px; margin-right: 5px;
}

/* 공통: 섹션 제목 */
.rm-h2 { font-size: 18px; font-weight: 800; margin: 26px 0 12px; }
.rm-sub { color: #767c86; font-size: 13px; margin-bottom: 16px; }

/* 리스트 카드 */
.list { display: flex; flex-direction: column; gap: 10px; }
.item {
  background: #fff; border: 1px solid #e6e8ec; border-radius: 10px; padding: 14px 16px;
}
.item:hover { border-color: #c9cdd4; }
.item .it-title { font-size: 15px; font-weight: 700; text-decoration: none; }
.item .it-title:hover { text-decoration: underline; }
.item .it-sum { font-size: 13px; color: #767c86; margin-top: 3px; }
.item .it-meta { font-size: 12px; color: #9aa0a8; margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }

/* 상태 뱃지 */
.badge { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; color:#fff; }

/* 폼 */
.form { background:#fff; border:1px solid #e6e8ec; border-radius:12px; padding:20px; max-width:620px; }
.form .fld { margin-bottom: 14px; }
.form label { display:block; font-size:12.5px; font-weight:700; color:#4b5563; margin-bottom:5px; }
.form input[type=text], .form input[type=email], .form input[type=password],
.form textarea, .form select {
  width:100%; font-family:inherit; font-size:14px;
  border:1px solid #d6d9de; border-radius:8px; padding:9px 11px; background:#fff;
}
.form textarea { min-height: 130px; resize: vertical; }
.form .actions { display:flex; gap:8px; margin-top: 6px; }

/* 버튼 (큰 것) */
.btn-lg { font-size:14px; font-weight:700; padding:10px 18px; border-radius:9px;
  background:#2b2f36; color:#fff; border:none; cursor:pointer; text-decoration:none; display:inline-block; }
.btn-lg:hover { background:#14171c; }
.btn-ghost { background:#fff; color:#4b5563; border:1px solid #d6d9de; }
.btn-ghost:hover { background:#f0f2f5; }

/* 두 갈래 탭 (쇼츠방 server/make) */
.track-tabs { display:flex; gap:8px; margin-bottom:16px; }
.track-tabs a {
  text-decoration:none; font-size:13px; font-weight:700; color:#4b5563;
  border:1px solid #d6d9de; background:#fff; padding:7px 14px; border-radius:8px;
}
.track-tabs a.on { background:#2b2f36; color:#fff; border-color:#2b2f36; }

/* 댓글 */
.cmt-wrap { margin-top: 26px; }
.cmt-list { display:flex; flex-direction:column; gap:8px; }
.cmt { background:#fff; border:1px solid #eef0f3; border-radius:9px; padding:10px 13px; }
.cmt-admin { background:#fff8ef; border-color:#f0d6a8; }
.cmt-head { font-size:12px; color:#9aa0a8; margin-bottom:3px; }
.cmt-head b { color:#4b5563; }
.cmt-admin .cmt-head b { color:#c47d1a; }
.cmt-body { font-size:13.5px; }
.cmt-form { margin-top:12px; display:flex; gap:8px; align-items:flex-start; }
.cmt-form textarea { flex:1 1 auto; font-family:inherit; font-size:13.5px; border:1px solid #d6d9de; border-radius:8px; padding:8px 11px; resize:vertical; }

/* 상세 본문 */
.detail-head h1 { font-size: 22px; font-weight:800; }
.detail-meta { font-size:12.5px; color:#9aa0a8; margin:8px 0 16px; display:flex; gap:12px; flex-wrap:wrap; }
.detail-body { background:#fff; border:1px solid #e6e8ec; border-radius:12px; padding:20px; font-size:14.5px; white-space:pre-wrap; word-break:break-word; }
.like-btn { font-size:13px; border:1px solid #f0c0cb; background:#fff; color:#c0455b; padding:6px 14px; border-radius:20px; cursor:pointer; }
.like-btn.on { background:#fde8ec; }
.back-link { font-size:13px; color:#5a7da5; text-decoration:none; display:inline-block; margin-bottom:14px; }

/* 빈 상태 */
.empty { text-align:center; color:#9aa0a8; padding:40px 0; font-size:14px; }

/* 푸터 */
.rm-foot { border-top:1px solid #e6e8ec; background:#fff; margin-top: 40px; }
.rm-foot-inner {
  max-width:980px; margin:0 auto; padding:18px; font-size:12px; color:#9aa0a8;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px;
}

/* ============================================================
   풀스크린 캐러셀 홈 (home-fs)
   ============================================================ */
html, body { margin: 0; padding: 0; }
body.home-fs { overflow: hidden; background: #0e1014; height: 100%; }

.fs-carousel {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  /* dvh 우선, 미지원/오차 브라우저는 --vh 변수로 정확 보정 */
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  background:
    radial-gradient(120% 80% at 50% -10%, #20242c 0%, #0e1014 60%);
}
.fs-track { position: absolute; inset: 0; }

/* 슬라이드 카드 — 컨테이너(화면)를 꽉 채움. top:0 기준이라 상단 여백 없음 */
.fs-card {
  position: absolute; top: 0; left: 50%;
  width: 100%;
  height: 100%;                     /* 컨테이너(.fs-carousel) 높이를 그대로 */
  max-width: 560px;                 /* 데스크톱에선 폭 제한 */
  transform-origin: center center;
  text-decoration: none; color: #fff;
  overflow: hidden; isolation: isolate;
  will-change: transform, opacity;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .55s;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 60px rgba(0,0,0,.5);
}
/* 방별 그라데이션 (재사용) */
.rc-idea   { background-image: linear-gradient(160deg,#f7971e 0%,#ffd200 45%,#ff8a5c 100%); }
.rc-build  { background-image: linear-gradient(160deg,#2b5876 0%,#4e90c2 50%,#5ee7df 100%); }
.rc-learn  { background-image: linear-gradient(160deg,#11998e 0%,#38ef7d 100%); }
.rc-shorts { background-image: linear-gradient(160deg,#8E2DE2 0%,#e94f8a 55%,#ff7eb3 100%); }

.fs-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 380px; padding: 0 34px;
  text-align: left;
}
.fs-card .rc-emoji {
  font-size: 84px; line-height: 1; display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.3));
  margin-bottom: 8px;
}
.fs-card h2 { font-size: 32px; font-weight: 900; margin-bottom: 10px; text-shadow: 0 2px 8px rgba(0,0,0,.25); }
.fs-card .rc-desc { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.95); }
.fs-card .rc-tags { margin-top: 16px; }
.fs-card .rc-tag {
  display: inline-block; font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.22); border-radius: 20px;
  padding: 4px 12px; margin-right: 6px; margin-top: 6px;
}
.fs-card .rc-meta { margin-top: 18px; font-size: 13px; color: rgba(255,255,255,.85); }
.fs-card .rc-go {
  display: inline-block; margin-top: 26px;
  font-size: 16px; font-weight: 800; color: #fff;
  border: 2px solid rgba(255,255,255,.6); border-radius: 30px;
  padding: 11px 26px;
  opacity: 0; transform: translateY(8px); transition: opacity .4s .15s, transform .4s .15s, background .2s;
}
.fs-card.is-center .rc-go { opacity: 1; transform: translateY(0); }
.fs-card .rc-go:hover { background: rgba(255,255,255,.18); }

/* 광택 */
.fs-card .rc-shine {
  position: absolute; top: 0; left: -60%; width: 50%; height: 100%; z-index: 1;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.fs-card.is-center .rc-shine { animation: shine 1.1s ease .2s forwards; }
@keyframes shine { to { left: 130%; } }

/* 떠있는 삼선 메뉴 */
.fs-burger {
  position: fixed; top: max(16px, env(safe-area-inset-top)); right: 18px; z-index: 60;
  width: 46px; height: 46px; border: none; border-radius: 14px;
  background: rgba(0,0,0,.28); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer;
}
.fs-burger span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: #fff; transition: .25s; }
.fs-burger:hover { background: rgba(0,0,0,.42); }

/* 떠있는 브랜드 */
.fs-brand {
  position: fixed; top: max(20px, env(safe-area-inset-top)); left: 20px; z-index: 60;
  font-size: 17px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.4); pointer-events: none;
}

/* 점 인디케이터 */
.fs-dots {
  position: fixed; left: 0; right: 0; bottom: max(26px, env(safe-area-inset-bottom)); z-index: 60;
  display: flex; justify-content: center; gap: 9px;
}
.fs-dots button {
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,.45); cursor: pointer; transition: width .25s, background .25s;
}
.fs-dots button.on { width: 26px; border-radius: 6px; background: #fff; }

/* 슬라이드 메뉴 패널 */
.fs-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
  width: min(80vw, 320px); background: #fff;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0,0,0,.2);
}
.fs-menu.on { transform: translateX(0); }
.fs-menu-head { display: flex; align-items: center; padding: 18px 20px; border-bottom: 1px solid #eef0f3; }
.fs-menu-title { font-size: 17px; font-weight: 800; }
.fs-menu-close { margin-left: auto; border: none; background: none; font-size: 20px; color: #767c86; cursor: pointer; }
.fs-menu-nav { padding: 10px 0; flex: 1; }
.fs-menu-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 22px; font-size: 16px; font-weight: 600; color: #2b2f36; text-decoration: none;
}
.fs-menu-nav a span { font-size: 20px; }
.fs-menu-nav a:hover { background: #f5f6f8; }
.fs-menu-foot { padding: 18px 20px; border-top: 1px solid #eef0f3; display: flex; flex-direction: column; gap: 8px; }
.fs-menu-hi { font-size: 13px; color: #767c86; margin-bottom: 4px; }
.fs-menu-dim {
  position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.fs-menu-dim.on { opacity: 1; visibility: visible; }