/* ==============================================
   웹툰 사이트 - 네이버웹툰 스타일
   메인 컬러: #00DC64 (네이버 그린)
   ============================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "맑은 고딕", "Noto Sans KR", sans-serif;
  background: #ffffff;
  color: #1f2329;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font-family: inherit;
}

/* === 상단 헤더 === */
.header {
  background: white;
  border-bottom: 1px solid #ececec;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -1px;
  color: #1f2329;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
}
.logo-fallback {
  width: 24px;
  height: 24px;
  background: #00dc64;
  border-radius: 50%;
}
.logo-text {
  letter-spacing: -1px;
}
.logo-text .accent {
  color: #00dc64;
}

.nav {
  display: flex;
  gap: 4px;
  align-items: center;
}

.nav a {
  padding: 8px 14px;
  font-size: 14px;
  color: #555;
  border-radius: 6px;
  transition: all 0.15s;
  font-weight: 500;
}
.nav a:hover {
  background: #f5f5f5;
  color: #1f2329;
}
.nav a.admin-link {
  color: #00dc64;
  font-weight: 600;
}
.nav a.admin-link:hover {
  background: #e6faef;
  color: #00a651;
}

/* === 요일 탭 === */
.day-tabs-wrapper {
  background: white;
  border-bottom: 1px solid #ececec;
  position: sticky;
  top: 64px;
  z-index: 90;
}

.day-tabs {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.day-tabs::-webkit-scrollbar {
  display: none;
}

.day-tab {
  flex: 1;
  min-width: 80px;
  padding: 16px 0;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #767676;
  position: relative;
  transition: color 0.15s;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}
.day-tab:hover {
  color: #1f2329;
}
.day-tab.active {
  color: #00dc64;
  font-weight: 700;
  border-bottom-color: #00dc64;
}
.day-tab.completed-tab {
  color: #999;
}
.day-tab.completed-tab.active {
  color: #00dc64;
}

.day-tab.favorites-tab {
  color: #ff4757;
}
.day-tab.favorites-tab.active {
  color: #ff4757;
  border-bottom-color: #ff4757;
}

/* 카드 하트 마크 - 좌상단 */
.favorite-mark {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255, 71, 87, 0.95);
  color: white;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(255, 71, 87, 0.3);
}

/* === 메인 컨테이너 === */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px 60px;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.section-header h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.section-header h2 .day-name {
  color: #00dc64;
}
.section-header .count {
  font-size: 13px;
  color: #888;
}

/* === 웹툰 그리드 === */
.webtoon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px 16px;
}

.webtoon-card {
  display: block;
  transition: transform 0.15s;
}
.webtoon-card:hover {
  transform: translateY(-3px);
}
.webtoon-card:hover .thumb-wrapper {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.thumb-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
  margin-bottom: 10px;
  transition: box-shadow 0.15s;
}
.thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #00dc64 0%, #00a651 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
}

.episode-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.status-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #00dc64;
  color: white;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.status-badge.completed {
  background: #888;
}

.webtoon-info {
  padding: 0 4px;
}
.webtoon-info .title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1f2329;
  letter-spacing: -0.3px;
}
.webtoon-info .author {
  font-size: 12px;
  color: #767676;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.webtoon-info .genre {
  display: inline-block;
  font-size: 11px;
  color: #00a651;
  background: #e6faef;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 6px;
  font-weight: 500;
}

/* === 작품 상세 페이지 (네이버웹툰 스타일) === */
.detail-header-v2 {
  display: flex;
  gap: 28px;
  margin-bottom: 20px;
  padding: 8px 0 24px;
}

.detail-thumb-v2 {
  width: 200px;
  flex-shrink: 0;
  aspect-ratio: 3/4;
  background: #f5f5f5;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.detail-thumb-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb-overlay-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.thumb-overlay-badge.completed {
  background: #888;
}

.detail-info-v2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 6px;
  min-width: 0;
}

.detail-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 14px;
  line-height: 1.2;
}

.detail-meta-line {
  font-size: 13px;
  color: #555;
  margin-bottom: 18px;
  line-height: 1.7;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.detail-meta-line .credit {
  color: #555;
}
.detail-meta-line .credit strong {
  color: #1f2329;
  font-weight: 700;
}
.detail-meta-line .meta-sep {
  color: #ccc;
  margin: 0 2px;
}
.detail-meta-line .meta-bar {
  color: #ddd;
  margin: 0 6px;
}
.detail-meta-line .meta-tag {
  color: #555;
  font-weight: 500;
}

.detail-desc {
  color: #333;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 16px;
}

.hashtag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hashtag {
  display: inline-block;
  background: #f0f1f3;
  color: #555;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 14px;
  font-weight: 500;
  transition: background 0.15s;
}
.hashtag:hover {
  background: #e6faef;
  color: #00a651;
}

/* 액션 버튼 3개 */
.action-buttons {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
  margin-bottom: 32px;
}
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.action-btn .icon {
  font-size: 18px;
  font-weight: 700;
}
.action-favorite {
  background: #00dc64;
  color: white;
}
.action-favorite:hover {
  background: #00c45a;
}
.action-favorite.active {
  background: #ff4757;
}
.action-favorite.active:hover {
  background: #e63946;
}
.action-first {
  background: #f5f5f5;
  color: #1f2329;
}
.action-first:hover {
  background: #ebebeb;
}
.action-first .ep-name {
  color: #767676;
  font-weight: 500;
  font-size: 14px;
  margin-left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.action-share {
  background: #f5f5f5;
  color: #1f2329;
}
.action-share:hover {
  background: #ebebeb;
}

/* 회차 섹션 */
.episode-section {
  border-top: 1px solid #ececec;
  padding-top: 20px;
}
.episode-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 0 4px;
}
.ep-count {
  font-size: 14px;
  color: #555;
}
.ep-count strong {
  color: #1f2329;
  font-weight: 700;
}
.ep-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.sort-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: #999;
  cursor: pointer;
  padding: 4px 6px;
  font-weight: 500;
}
.sort-btn:hover {
  color: #1f2329;
}
.sort-btn.active {
  color: #1f2329;
  font-weight: 700;
}
.sort-divider {
  color: #ddd;
}

.episode-list-v2 {
  display: flex;
  flex-direction: column;
}
.episode-row-v2 {
  display: flex;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.1s;
  text-decoration: none;
  color: inherit;
}
.episode-row-v2:last-child {
  border-bottom: none;
}
.episode-row-v2:hover {
  background: #fafafa;
}
.ep-thumb-v2 {
  width: 110px;
  aspect-ratio: 16 / 9;
  background: #f0f0f0;
  border-radius: 6px;
  margin-right: 14px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid #ececec;
}
.ep-thumb-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 이미지가 정사각이든 세로형이든 가로형이든 자연스럽게 채움 */
}
.ep-num-overlay {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.ep-info-v2 {
  flex: 1;
  min-width: 0;
}
.ep-name-v2 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #1f2329;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep-meta-v2 {
  font-size: 11px;
  color: #999;
  display: flex;
  gap: 8px;
  align-items: center;
}
.ep-cuts {
  color: #888;
}
.ep-arrow-v2 {
  color: #ccc;
  font-size: 18px;
  margin-left: 10px;
  transition: color 0.1s;
  flex-shrink: 0;
}
.episode-row-v2:hover .ep-arrow-v2 {
  color: #00dc64;
}

.no-episodes-v2 {
  background: #fafafa;
  padding: 60px 20px;
  text-align: center;
  border-radius: 12px;
  margin-top: 20px;
}
.no-episodes-v2 .empty-icon {
  font-size: 48px;
  opacity: 0.4;
  margin-bottom: 12px;
}
.no-episodes-v2 h3 {
  color: #444;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
}
.no-episodes-v2 p {
  color: #888;
  font-size: 13px;
  line-height: 1.7;
}
.no-episodes-v2 code {
  background: #1f2329;
  color: #00dc64;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin: 0 2px;
  font-family: "SF Mono", Menlo, monospace;
}

/* === 뷰어 (검정 배경) === */
.viewer-body {
  background: #000;
  color: white;
}
.viewer-header {
  background: rgba(0, 0, 0, 0.95);
  border-bottom: 1px solid #222;
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
}
.viewer-header-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.viewer-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
  text-align: center;
}
.viewer-title .ep {
  color: #00dc64;
  margin-left: 8px;
  font-weight: 500;
}
.viewer-back {
  font-size: 13px;
  color: #ccc;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 500;
}
.viewer-back:hover {
  background: rgba(0, 220, 100, 0.15);
  color: #00dc64;
}

.viewer-strip {
  max-width: 900px;
  margin: 0 auto;
  background: black;
}
.viewer-strip img {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

.viewer-nav {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 20px;
  display: flex;
  gap: 10px;
}
.nav-btn {
  flex: 1;
  padding: 16px;
  background: #1a1a1a;
  color: white;
  text-align: center;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #2a2a2a;
  transition: all 0.15s;
}
.nav-btn:hover {
  background: #00dc64;
  border-color: #00dc64;
  color: white;
}
.nav-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.nav-btn.list {
  flex: 0.7;
  background: transparent;
}

.viewer-empty {
  max-width: 900px;
  margin: 80px auto;
  text-align: center;
  color: #888;
  padding: 40px;
}

/* === 빈 요일 === */
.empty-day {
  text-align: center;
  padding: 80px 20px;
  background: #fafafa;
  border-radius: 12px;
  color: #888;
}
.empty-day .icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
}
.empty-day h3 {
  color: #444;
  font-size: 17px;
  margin-bottom: 6px;
  font-weight: 700;
}
.empty-day p {
  font-size: 13px;
}

/* === 관리자 페이지 === */
.admin-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 20px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.admin-header h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.panel {
  background: white;
  border: 1px solid #ececec;
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
}
.panel-header {
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid #ececec;
  background: #fafafa;
}
.panel-body {
  padding: 24px;
}

.alert {
  background: #fff8e7;
  border: 1px solid #ffd966;
  border-left: 4px solid #ffa500;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: #6b5500;
  margin-bottom: 20px;
  line-height: 1.7;
}
.alert code {
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 12px;
  margin: 0 2px;
}

.guide-box {
  background: #f0fbf4;
  border: 1px solid #b8e9c9;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.guide-title {
  font-size: 14px;
  font-weight: 700;
  color: #00a651;
  margin-bottom: 10px;
}
.guide-content {
  font-size: 13px;
  color: #2d5a3d;
  line-height: 1.7;
}
.guide-content code {
  background: rgba(0, 166, 81, 0.1);
  color: #006837;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
}
.guide-content pre {
  background: #1f2329;
  color: #00dc64;
  padding: 14px 16px;
  border-radius: 6px;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  margin: 10px 0;
  overflow-x: auto;
}
.guide-tip {
  background: white;
  border-left: 3px solid #00dc64;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 12px;
  color: #444;
  line-height: 1.7;
  margin-top: 10px;
}

/* 폼 */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.form-field {
  margin-bottom: 16px;
}
.form-field label {
  display: block;
  font-size: 13px;
  color: #1f2329;
  margin-bottom: 6px;
  font-weight: 600;
}
.form-field label .req {
  color: #00dc64;
}
.form-field input[type="text"],
.form-field input[type="password"],
.form-field input[type="date"],
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: white;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: #00dc64;
  box-shadow: 0 0 0 3px rgba(0, 220, 100, 0.1);
}
.form-field textarea {
  min-height: 80px;
  resize: vertical;
}
.form-field .helper {
  font-size: 12px;
  color: #888;
  margin-top: 6px;
  line-height: 1.6;
}
.form-field .helper code {
  background: #1f2329;
  color: #00dc64;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 11px;
}

/* 요일 체크박스 */
.day-checkboxes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.day-checkbox {
  position: relative;
}
.day-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.day-checkbox label {
  display: inline-block;
  padding: 8px 16px;
  background: #f5f5f5;
  border: 1.5px solid transparent;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #767676;
  cursor: pointer;
  margin: 0;
  transition: all 0.15s;
}
.day-checkbox input:checked + label {
  background: #00dc64;
  color: white;
  border-color: #00dc64;
}
.day-checkbox label:hover {
  background: #ebebeb;
}
.day-checkbox input:checked + label:hover {
  background: #00c45a;
}

/* 라디오 (연재/완결) */
.status-radios {
  display: flex;
  gap: 8px;
}

.author-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.author-fields input {
  width: 100%;
}
@media (max-width: 600px) {
  .author-fields {
    grid-template-columns: 1fr;
  }
}
.status-radio {
  flex: 1;
}
.status-radio input {
  display: none;
}
.status-radio label {
  display: block;
  text-align: center;
  padding: 10px;
  background: #f5f5f5;
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #767676;
  cursor: pointer;
  margin: 0;
  transition: all 0.15s;
}
.status-radio input:checked + label {
  background: #e6faef;
  color: #00a651;
  border-color: #00dc64;
}

/* 버튼 */
.btn {
  display: inline-block;
  padding: 11px 22px;
  background: #00dc64;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.btn:hover {
  background: #00c45a;
}
.btn-dark {
  background: #1f2329;
}
.btn-dark:hover {
  background: #000;
}
.btn-secondary {
  background: white;
  color: #555;
  border: 1px solid #d8d8d8;
}
.btn-secondary:hover {
  background: #f5f5f5;
  border-color: #999;
}
.btn-danger {
  background: white;
  color: #ff4757;
  border: 1px solid #ff4757;
}
.btn-danger:hover {
  background: #ff4757;
  color: white;
}
.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
}

/* 등록된 작품 리스트 */
.admin-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: white;
  border: 1px solid #ececec;
  border-radius: 10px;
  margin-bottom: 10px;
}
.admin-item .thumb {
  width: 50px;
  height: 64px;
  background: #f5f5f5;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.admin-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-item .info {
  flex: 1;
  min-width: 0;
}
.admin-item .info .title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
.admin-item .info .meta {
  font-size: 12px;
  color: #888;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.admin-item .info .meta .day-pill {
  display: inline-block;
  background: #e6faef;
  color: #00a651;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.admin-item .info .meta .completed-pill {
  background: #f0f0f0;
  color: #888;
}
.admin-item .info .meta code {
  background: #f5f5f5;
  color: #555;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 11px;
}
.admin-item .actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.episode-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.ep-pill {
  display: inline-block;
  padding: 3px 10px;
  background: #f5f5f5;
  color: #555;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.1s;
  border: 1px solid transparent;
}
.ep-pill:hover {
  background: #00dc64;
  color: white;
  border-color: #00dc64;
}

details.edit-form {
  margin-bottom: 10px;
}
details.edit-form summary {
  cursor: pointer;
  padding: 10px 14px;
  background: white;
  border: 1px dashed #d8d8d8;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  list-style: none;
}
details.edit-form summary::-webkit-details-marker {
  display: none;
}
details.edit-form summary::before {
  content: "✏️ ";
  margin-right: 4px;
}
details.edit-form summary:hover {
  background: #fafafa;
  border-color: #00dc64;
  color: #00a651;
}
details.edit-form[open] summary {
  background: #1f2329;
  color: white;
  border-style: solid;
  border-color: #1f2329;
  border-radius: 8px 8px 0 0;
}
details.edit-form .edit-body {
  padding: 20px;
  background: #fafafa;
  border: 1px solid #ececec;
  border-top: none;
  border-radius: 0 0 8px 8px;
}

/* === 로그인/회원가입 페이지 === */
.auth-body {
  background: linear-gradient(135deg, #f0fbf4 0%, #e6faef 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-wrapper {
  width: 100%;
  max-width: 420px;
}
.auth-box {
  background: white;
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.auth-logo {
  text-align: center;
  margin-bottom: 8px;
}
.auth-logo-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 16px;
  margin: 0 auto 8px;
  display: block;
}
.auth-logo-fallback {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #00dc64, #00a651);
  border-radius: 50%;
  margin: 0 auto 8px;
  display: block;
}
.auth-logo-text {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  color: #1f2329;
  margin-top: 8px;
}
.auth-subtitle {
  text-align: center;
  color: #767676;
  font-size: 13px;
  margin-bottom: 28px;
}
.auth-form .form-field {
  margin-bottom: 14px;
}
.auth-form .form-field input {
  padding: 12px 14px;
  font-size: 14px;
}
.auth-error {
  background: #fff5f5;
  color: #d63031;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid #ff4757;
  margin-bottom: 16px;
}
.auth-btn {
  width: 100%;
  padding: 13px;
  font-size: 15px;
  margin-top: 8px;
}
.auth-switch {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: #767676;
}
.auth-switch a {
  color: #00dc64;
  font-weight: 700;
}
.auth-switch a:hover {
  text-decoration: underline;
}
.auth-admin-hint {
  margin-top: 16px;
  padding: 10px 14px;
  background: #f5f5f5;
  border-radius: 8px;
  font-size: 11px;
  color: #888;
  text-align: center;
  line-height: 1.6;
}

/* 관리자 인증 페이지 */
.admin-auth-body {
  background: linear-gradient(135deg, #1f2329 0%, #2c3e50 100%) !important;
}
.admin-auth-box {
  background: white;
  border-top: 4px solid #1f2329;
}
.admin-shield {
  width: 56px;
  height: 56px;
  margin: 0 auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f2329;
  border-radius: 14px;
  color: white;
  font-size: 26px;
}
.auth-current-user {
  text-align: center;
  font-size: 12px;
  color: #767676;
  background: #f5f5f5;
  padding: 8px 14px;
  border-radius: 8px;
  margin-bottom: 18px;
}
.auth-current-user strong {
  color: #1f2329;
}
.auth-bottom-links {
  text-align: center;
  margin-top: 20px;
}
.auth-bottom-links a {
  font-size: 12px;
  color: #999;
}
.auth-bottom-links a:hover {
  color: #1f2329;
}

/* === 헤더 사용자 정보 === */
.user-info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-left: 4px;
  background: #f5f5f5;
  border-radius: 16px;
}
.user-name {
  font-size: 13px;
  color: #1f2329;
  font-weight: 600;
}
.user-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.user-badge.admin-badge {
  background: #00dc64;
  color: white;
}
.logout-link {
  font-size: 12px !important;
  color: #999 !important;
  padding: 6px 10px !important;
}
.logout-link:hover {
  color: #ff4757 !important;
  background: transparent !important;
}

/* === 사용자 관리 페이지 === */
.user-table-wrapper {
  overflow-x: auto;
}
.user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.user-table thead {
  background: #fafafa;
  border-bottom: 1px solid #ececec;
}
.user-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  color: #555;
  font-size: 12px;
  white-space: nowrap;
}
.user-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
  vertical-align: middle;
}
.user-table tbody tr:hover {
  background: #fafafa;
}
.user-table .user-id {
  background: #f0f1f3;
  color: #1f2329;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
}
.user-table .user-nick {
  font-weight: 600;
}
.user-table .user-date {
  color: #555;
  font-size: 12px;
  white-space: nowrap;
}
.user-table .user-date-sub {
  color: #aaa;
  font-size: 10px;
  margin-top: 2px;
}
.user-table .user-count {
  text-align: center;
  font-weight: 600;
  color: #00a651;
  font-size: 13px;
}

/* 마스터 계정 표시 */
.master-row {
  background: linear-gradient(90deg, rgba(255, 193, 7, 0.06) 0%, transparent 100%);
}
.master-row:hover {
  background: linear-gradient(90deg, rgba(255, 193, 7, 0.1) 0%, #fafafa 100%) !important;
}
.master-badge {
  display: inline-block;
  margin-left: 6px;
  background: linear-gradient(135deg, #ffc107, #ff9800);
  color: white;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  vertical-align: middle;
}

/* 비밀번호 재설정 팝업 */
.reset-form summary {
  list-style: none;
  cursor: pointer;
}
.reset-form summary::-webkit-details-marker {
  display: none;
}
.reset-form {
  position: relative;
  display: inline-block;
}
.reset-popup {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
.reset-popup input {
  width: 140px;
  padding: 6px 10px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
}

/* === 헤더 검색창 === */
.header-search {
  flex: 1;
  max-width: 360px;
  margin: 0 24px;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border: 1px solid transparent;
  border-radius: 22px;
  padding: 0 6px 0 16px;
  transition: all 0.15s;
}
.header-search:focus-within {
  background: white;
  border-color: #00dc64;
  box-shadow: 0 0 0 3px rgba(0, 220, 100, 0.1);
}
.header-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  padding: 9px 4px;
  font-size: 13px;
  font-family: inherit;
  color: #1f2329;
}
.header-search input::placeholder {
  color: #aaa;
}
.header-search button {
  border: none;
  background: transparent;
  color: #767676;
  cursor: pointer;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  border-radius: 50%;
  transition: all 0.15s;
}
.header-search button:hover {
  color: #00dc64;
  background: #e6faef;
}

/* === 검색 결과 페이지 === */
.search-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #ececec;
}
.search-header h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.search-query {
  color: #00dc64;
}
.search-count {
  font-size: 13px;
  color: #888;
  font-weight: 600;
}

/* === 대시보드 인사말 카드 === */
.dashboard-greeting {
  background: linear-gradient(135deg, #1f2329 0%, #2c3e50 100%);
  border-radius: 16px;
  padding: 28px 32px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.greeting-text {
  flex: 1;
  min-width: 0;
}
.greeting-date {
  font-size: 12px;
  color: #00dc64;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.greeting-hello {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.greeting-name {
  color: #00dc64;
}
.greeting-sub {
  font-size: 13px;
  color: #ccc;
  line-height: 1.6;
}
.greeting-sub strong {
  color: white;
  font-weight: 700;
}
.greeting-resume-link {
  color: #00dc64;
  font-weight: 600;
}
.greeting-resume-link:hover {
  text-decoration: underline;
}
.greeting-stats {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.stat-item {
  text-align: center;
  padding: 0 18px;
  position: relative;
  cursor: pointer;
  transition: opacity 0.15s;
  text-decoration: none;
  color: inherit;
}
.stat-item + .stat-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #444;
}
.stat-item:hover {
  opacity: 0.75;
}
.stat-num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: white;
}
.stat-num.green { color: #00dc64; }
.stat-num.pink { color: #ff4757; }
.stat-label {
  font-size: 11px;
  color: #999;
  margin-top: 6px;
  letter-spacing: 0.3px;
}

/* === 빠른 메뉴 === */
.quick-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 32px;
}
.quick-menu.three-cols {
  grid-template-columns: repeat(3, 1fr);
}
.quick-item {
  background: #f8fafb;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
  cursor: pointer;
}
.quick-item:hover:not(.disabled) {
  background: white;
  border-color: #00dc64;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.quick-item.disabled {
  opacity: 0.5;
  cursor: default;
}
.quick-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.icon-recent { background: #e6f4ff; color: #1971c2; }
.icon-today { background: #e6faef; color: #00a651; }
.icon-favorite { background: #ffe6ec; color: #ff4757; }
.icon-history { background: #f3e8ff; color: #7c3aed; }
.icon-new { background: #fff8e1; color: #f57c00; }
.icon-random { background: #ede7ff; color: #6c5ce7; }
.quick-text {
  flex: 1;
  min-width: 0;
}
.quick-title {
  font-size: 13px;
  font-weight: 700;
  color: #1f2329;
  margin-bottom: 2px;
}
.quick-sub {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === 회차 리스트 - 시청 표시 === */
.episode-row-v2.viewed {
  background: rgba(0, 0, 0, 0.02);
}
.episode-row-v2.viewed .ep-name-v2 {
  color: #888;
}
.episode-row-v2.viewed .ep-thumb-v2 img {
  opacity: 0.55;
}
.episode-row-v2.last-viewed {
  background: linear-gradient(90deg, #e6faef 0%, transparent 60%);
  border-left: 3px solid #00dc64;
  padding-left: calc(4px - 3px);
}
.episode-row-v2.last-viewed .ep-name-v2 {
  color: #1f2329;
  font-weight: 700;
}
.ep-continue-mark {
  position: absolute;
  top: 4px;
  left: 4px;
  background: #00dc64;
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(0, 220, 100, 0.4);
}
.ep-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 8px;
  font-weight: 700;
  vertical-align: middle;
}
.ep-tag.continue {
  background: #00dc64;
  color: white;
}
.ep-tag.viewed {
  background: #e0e0e0;
  color: #888;
}

/* === 이어보기 버튼 === */
.action-buttons.two-buttons {
  grid-template-columns: 1fr 2fr;
}
.action-continue {
  background: #00dc64 !important;
  color: white !important;
}
.action-continue:hover {
  background: #00a651 !important;
}
.action-continue .ep-name {
  color: rgba(255, 255, 255, 0.85);
}

/* === 기록함 페이지 === */
.history-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid #ececec;
}
.history-header h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.history-count {
  font-size: 13px;
  color: #888;
  font-weight: 600;
}
.history-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.history-hint {
  font-size: 12px;
  color: #888;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.history-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: white;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 14px;
  transition: all 0.15s;
}
.history-row:hover {
  border-color: #00dc64;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.history-thumb {
  width: 96px;
  aspect-ratio: 3/4;
  flex-shrink: 0;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}
.history-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.history-thumb .thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: #f0f0f0;
}
.history-thumb .favorite-mark {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

.history-info {
  flex: 1;
  min-width: 0;
}
.history-title-link {
  text-decoration: none;
  color: inherit;
}
.history-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2329;
  margin-bottom: 4px;
}
.history-title-link:hover .history-title {
  color: #00dc64;
}
.history-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.history-author {
  font-size: 12px;
  color: #767676;
}
.badge-completed {
  font-size: 10px;
  background: #888;
  color: white;
  padding: 2px 7px;
  border-radius: 8px;
  font-weight: 700;
}
.history-progress {
  margin-bottom: 8px;
}
.progress-bar-wrap {
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #00dc64, #00a651);
  border-radius: 3px;
  transition: width 0.3s;
}
.progress-text {
  font-size: 11px;
  color: #555;
  font-weight: 500;
}
.history-time {
  font-size: 11px;
  color: #999;
}
.history-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.btn-primary {
  background: #00dc64;
  color: white;
  border: none;
}
.btn-primary:hover {
  background: #00a651;
}
.history-delete {
  width: 32px;
  padding: 6px 0 !important;
  color: #999 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
.history-delete:hover {
  color: #ff4757 !important;
  border-color: #ff4757 !important;
}

@media (max-width: 768px) {
  /* 검색창 모바일 */
  .header-search { 
    margin: 0 8px; 
    max-width: none;
    padding: 0 4px 0 12px;
  }
  .header-search input { 
    font-size: 12px; 
    padding: 7px 4px; 
  }
  .header-search input::placeholder { font-size: 11px; }
  
  /* 대시보드 모바일 */
  .dashboard-greeting {
    flex-direction: column;
    padding: 20px 22px;
    gap: 18px;
    text-align: left;
    align-items: stretch;
  }
  .greeting-hello { font-size: 20px; }
  .greeting-stats {
    width: 100%;
    justify-content: space-around;
    border-top: 1px solid #444;
    padding-top: 14px;
  }
  .stat-num { font-size: 22px; }
  .stat-item { padding: 0 12px; }
  
  .quick-menu, .quick-menu.three-cols {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .quick-item { padding: 12px 14px; }
  .quick-icon { width: 36px; height: 36px; font-size: 17px; }
  
  /* 검색 결과 모바일 */
  .search-header h1 { font-size: 18px; }
  
  /* 기록함 모바일 */
  .history-header h1 { font-size: 20px; }
  .history-row {
    flex-wrap: wrap;
    padding: 12px;
    gap: 12px;
  }
  .history-thumb { width: 70px; }
  .history-info { flex: 1 1 calc(100% - 84px); min-width: 0; }
  .history-title { font-size: 14px; }
  .history-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
  }
}

@media (max-width: 768px) {
  /* user-table 모바일 처리는 아래 통합 미디어쿼리에서 카드형으로 처리 */
}

/* 모바일 */
@media (max-width: 768px) {
  .header-inner { padding: 0 14px; height: 56px; }
  .day-tabs-wrapper { top: 56px; }
  .container { padding: 16px 14px 60px; }
  
  /* 헤더 로고 모바일에선 작게 */
  .logo-img { width: 36px; height: 36px; }
  .logo-text { font-size: 18px; }
  
  /* 요일 탭은 9개라 모바일에서 가로 스크롤 처리 */
  .day-tabs { padding: 0 4px; }
  .day-tab {
    min-width: 56px;
    padding: 13px 0;
    font-size: 13px;
    flex-shrink: 0;
    flex: 0 0 auto;
  }
  
  .nav { gap: 2px; }
  .nav a { padding: 5px 8px; font-size: 12px; }
  .user-info { padding: 4px 8px; gap: 4px; }
  .user-name { font-size: 12px; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-badge.admin-badge { font-size: 9px; padding: 1px 5px; }
  .logout-link { font-size: 11px !important; padding: 4px 6px !important; }
  
  /* 섹션 타이틀 */
  .section-header h2 { font-size: 18px; }
  .section-header .count { font-size: 12px; }
  
  /* 작품 카드 그리드 - 모바일에선 2열 위주로 */
  .webtoon-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 14px 8px;
  }
  .webtoon-info .title { font-size: 13px; }
  .webtoon-info .author { font-size: 11px; }
  
  /* 로그인 페이지 */
  .auth-box { padding: 28px 22px; }
  .auth-logo-img { width: 80px; height: 80px; }
  .auth-logo-text { font-size: 22px; }
  
  /* 작품 상세 - 표지 + 정보 세로 배치 */
  .detail-header-v2 {
    flex-direction: column;
    gap: 16px;
    padding: 8px 0 16px;
  }
  .detail-thumb-v2 {
    width: 140px;
    align-self: center;
  }
  .detail-info-v2 {
    padding-top: 0;
  }
  .detail-title { font-size: 22px; text-align: center; }
  .detail-meta-line {
    justify-content: center;
    font-size: 11px;
    flex-wrap: wrap;
  }
  .detail-desc { font-size: 13px; }
  .hashtag-list { justify-content: center; }
  .hashtag { font-size: 11px; padding: 4px 10px; }
  
  /* 액션 버튼 */
  .action-buttons {
    grid-template-columns: 1fr 2fr 1fr;
    gap: 6px;
    margin-bottom: 22px;
  }
  .action-btn {
    padding: 12px 8px;
    font-size: 13px;
  }
  .action-first .ep-name { display: none; }
  
  /* 회차 리스트 - 가로형 썸네일 사이즈 조정 */
  .ep-thumb-v2 {
    width: 90px;
    margin-right: 10px;
  }
  .episode-row-v2 { padding: 10px 4px; }
  .ep-name-v2 { font-size: 13px; }
  .ep-meta-v2 { font-size: 10px; }
  
  /* 뷰어 - 모바일에선 화면 꽉 채우게 */
  .viewer-strip { max-width: 100%; }
  .viewer-nav { padding: 24px 14px; gap: 6px; }
  .nav-btn { padding: 13px 8px; font-size: 13px; }
  .viewer-title { font-size: 12px; }
  .viewer-back { font-size: 11px; padding: 5px 9px; }
  
  /* 폼 */
  .form-row { grid-template-columns: 1fr; }
  
  /* 관리자 페이지 */
  .admin-container { padding: 16px 14px; }
  .admin-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .admin-header h1 { font-size: 20px; }
  .admin-header > div { display: flex; gap: 6px; flex-wrap: wrap; }
  .panel-body { padding: 16px; }
  .panel-header { padding: 12px 16px; font-size: 14px; }
  
  /* 관리자 - 작품 등록 항목 */
  .admin-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .admin-item .info { flex: 1 1 calc(100% - 70px); }
  .admin-item .actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }
  
  /* 사용자 관리 테이블 - 모바일에선 카드형으로 변신 */
  .user-table-wrapper {
    overflow-x: visible;
  }
  .user-table {
    display: block;
  }
  .user-table thead {
    display: none; /* 헤더 숨김 */
  }
  .user-table tbody, .user-table tr, .user-table td {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
  }
  .user-table tr {
    background: white;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .user-table tr:hover {
    background: white !important;
  }
  .master-row {
    border: 1.5px solid #ffc107 !important;
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.08), white) !important;
  }
  .user-table td {
    padding: 4px 0;
    text-align: left;
  }
  /* 각 셀 앞에 라벨 붙이기 */
  .user-table td:nth-child(1) { /* 아이디 */
    padding-bottom: 6px;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 6px;
    font-size: 14px;
  }
  .user-table td:nth-child(2)::before { content: "닉네임: "; color: #888; font-size: 11px; }
  .user-table td:nth-child(3)::before { content: "가입: "; color: #888; font-size: 11px; }
  .user-table td:nth-child(4)::before { content: "최근접속: "; color: #888; font-size: 11px; display: block; margin-bottom: 2px; }
  .user-table td:nth-child(5)::before { content: "접속횟수: "; color: #888; font-size: 11px; }
  .user-table td:nth-child(6)::before { content: "관심: "; color: #888; font-size: 11px; }
  .user-table .user-count {
    text-align: left;
    display: inline;
  }
  .user-table td:last-child {
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid #f5f5f5;
  }
  
  /* 비번 재설정 팝업 - 모바일 위치 조정 */
  .reset-popup {
    right: auto;
    left: 0;
    width: calc(100vw - 60px);
    max-width: 280px;
  }
  .reset-popup input { flex: 1; width: auto; }
}

/* 작은 모바일 (~ 380px) */
@media (max-width: 380px) {
  .day-tab { min-width: 48px; font-size: 12px; }
  .nav a:not(.logout-link) { padding: 5px 6px; font-size: 11px; }
  .user-info { padding: 3px 6px; }
  .user-info .user-badge { display: none; } /* 관리자 뱃지 숨김 */
  .webtoon-grid { grid-template-columns: 1fr 1fr; }
  .ep-thumb-v2 { width: 75px; }
}