/* ═══════════════════════════════════════════════
 * twitter_tl/style.css — 트위터 타임라인 스킨
 * 클래스 접두사: tw-
 * ═══════════════════════════════════════════════ */

/* ── Material Symbols 기본 크기 ── */
.material-symbols-rounded {
  font-size: 20px;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
  display: inline-flex;
}
.tw-icon-btn .material-symbols-rounded { font-size: 18px; }
.tw-act       .material-symbols-rounded { font-size: 18px; }
.tw-back      .material-symbols-rounded { font-size: 20px; }
.tw-profile-img-placeholder .material-symbols-rounded,
.tw-post-avatar-ph          .material-symbols-rounded { font-size: 36px; color: var(--ink-mute); }

/* ── Profile Header ── */
.tw-header {
  background: var(--paper);
  margin-bottom: 0;
}
.tw-header-img {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}
.tw-header-img-placeholder {
  width: 100%;
  height: 200px;
  background: var(--accent-soft);
}
.tw-header-bottom {
  position: relative;
  padding: 0 16px 14px;
  border-bottom: 1px solid var(--hair-soft);
}
.tw-profile-img {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  outline: 4px solid var(--paper);
  background-color: var(--paper-2);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: -39px;
  left: 16px;
  display: block;
}
.tw-profile-img-placeholder {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  outline: 4px solid var(--paper);
  background: var(--paper-2);
  position: absolute;
  top: -39px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
}
.tw-header-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
  min-height: 42px;
}
.tw-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  transition: background .12s;
  padding: 0;
}
.tw-icon-btn:hover { background: var(--paper-2); }
.tw-icon-btn:disabled { opacity: .4; cursor: default; }
.tw-display-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin: 10px 0 2px;
}
.tw-bio {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 6px;
  line-height: 1.5;
}
.tw-stats {
  font-size: 13px;
  color: var(--ink-mute);
}
.tw-stats strong {
  color: var(--ink);
  font-weight: 700;
}

/* ── Category Nav ── */
.tw-cats {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: space-evenly;
  border-bottom: 1px solid var(--hair-soft);
  background: var(--paper);
}
.tw-cats::-webkit-scrollbar { display: none; }
.tw-cat-item {
  flex-shrink: 0;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s;
  white-space: nowrap;
}
.tw-cat-item:hover { color: var(--ink); }
.tw-cat-item.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ── Post Cards ── */
.tw-feed { background: var(--paper); }
.tw-post {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hair-soft);
}
.tw-post:last-child { border-bottom: none; }
.tw-post-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--paper-2);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.tw-post-avatar-ph {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.tw-post-body { flex: 1; min-width: 0; }
.tw-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 6px;
  margin-bottom: 4px;
}
.tw-post-name { font-size: 14px; font-weight: 700; color: var(--ink); }

.tw-inline-reply-form {
  margin-top: 6px;
}
.tw-admin-badge {
  font-size: 9px;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 2px;
}
.tw-post-handle { font-size: 13px; color: var(--ink-mute); }
.tw-post-dot { font-size: 13px; color: var(--ink-mute); }
.tw-post-time {
  font-size: 13px;
  color: var(--ink-mute);
  text-decoration: none;
}
.tw-post-time:hover { text-decoration: underline; }

/* Post content */
.tw-post-content {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.65;
  margin-bottom: 10px;
  word-break: break-word;
}
.tw-post-content p { margin: 0 0 6px; }
.tw-post-content p:last-child { margin: 0; }
.tw-post-content a { color: var(--accent); text-decoration: none; }
.tw-post-content a:hover { text-decoration: underline; }

/* Image gallery */
.tw-images {
  margin-bottom: 10px;
  border-radius: 12px;
  overflow: hidden;
}

/* 공통 */
.tw-img-1{width:fit-content}
.tw-img-1 img,
.tw-img-2 img,
.tw-img-3 img,
.tw-img-4 img {
  display: block;
  width: 100%;
  object-fit: cover;
  cursor: zoom-in;
  image-rendering: auto;
  image-rendering: smooth;
  image-rendering: high-quality;
}

/* 1장 — 풀 와이드 */
.tw-img-1 img {
  width:auto;
  max-height: 420px;
  max-width:100%;
}

/* 2장 — 좌우 반반 */
.tw-img-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.tw-img-2 img { aspect-ratio: 4/3; }

/* 3장 — 좌측 세로 1장 + 우측 가로 2장 */
.tw-img-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.tw-img-3 img:first-child {
  grid-row: 1 / 3;
  /* 오른쪽 두 이미지의 총 높이에 맞춰 stretch — aspect-ratio 로 결정 */
  aspect-ratio: 2/3;
  max-height:400px;
}
.tw-img-3 img:not(:first-child) { aspect-ratio: 4/3; max-height:200px; }

/* 4장 — 2×2 그리드 */
.tw-img-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.tw-img-4 img { aspect-ratio: 1/1; max-height:200px; }

/* YouTube embed */
.tw-youtube {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}
.tw-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Action buttons */
.tw-actions {
  display: flex;
  gap: 2px;
  margin-top: 8px;
  margin-left: -8px;
}
.tw-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 13px;
  color: var(--ink-mute);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .1s, color .1s;
  line-height: 1;
}
.tw-act:hover { background: var(--accent-soft); color: var(--accent); }
.tw-act:disabled { opacity: .4; cursor: default; }
.tw-act:disabled:hover { background: none; color: var(--ink-mute); }
.tw-act.del:hover { background: #fff0f0; color: #e53e3e; }
.tw-act.tw-bookmark-btn.bookmarked { color: var(--accent); }
.tw-act.tw-bookmark-btn.bookmarked:hover { background: var(--accent-soft); color: var(--accent); }
.tw-act-del-form { display: inline; }

/* ── Image Lightbox ── */
.tw-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.tw-lightbox.open { display: flex; }
.tw-lightbox img {
  max-width: 94vw;
  max-height: 94vh;
  object-fit: contain;
  border-radius: 6px;
}

/* ── Settings Modal ── */
.tw-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9998;
  align-items: center;
  justify-content: center;
}
.tw-modal-overlay.open { display: flex; }
.tw-modal-box {
  background: var(--paper);
  border-radius: 16px;
  padding: 24px;
  width: 92%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
}
.tw-modal-box h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 20px;
}
.tw-field { margin-bottom: 14px; }
.tw-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 5px;
}
.tw-field input[type="text"],
.tw-field input[type="number"],
.tw-field input[type="url"],
.tw-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 14px;
  box-sizing: border-box;
  font-family: inherit;
}
.tw-field textarea { resize: vertical; min-height: 68px; }
.tw-field input[type="file"] { font-size: 13px; color: var(--ink-soft); }
.tw-field-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 6px;
  cursor: pointer;
}
.tw-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
.tw-btn {
  padding: 8px 22px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.tw-btn.primary { background: var(--accent); color: #fff; }
.tw-btn.ghost { background: var(--paper-2); color: var(--ink); }

/* ── Pagination ── */
.tw-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 16px;
  border-top: 1px solid var(--hair-soft);
  background: var(--paper);
}
.tw-pager a {
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.tw-pager a:hover { text-decoration: underline; }
.tw-pager .off { color: var(--ink-mute); font-size: 14px; }
.tw-pager .info { font-size: 13px; color: var(--ink-mute); }

/* ── Empty ── */
.tw-empty {
  padding: 60px 16px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 15px;
}

/* ── View page ── */
.tw-back {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid var(--hair-soft);
  background: var(--paper);
}
.tw-back:hover { background: var(--paper-2); }
.tw-view-meta {
  font-size: 13px;
  color: var(--ink-mute);
  padding: 10px 0 0;
  margin-top: 10px;
  border-top: 1px solid var(--hair-soft);
}
.tw-view-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin: 6px 0 10px;
  line-height: 1.3;
}
.tw-flash {
  margin: 12px 16px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
}
.tw-flash.success { background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; }
.tw-flash.error   { background: #fff5f5; color: #c53030; border: 1px solid #feb2b2; }

/* ── Compose Modal ── */
.tw-compose-box {
  background: var(--paper);
  border-radius: 16px;
  width: 92%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.tw-compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hair-soft);
}
.tw-compose-body {
  display: flex;
  gap: 12px;
  padding: 16px;
  flex: 1;
}
.tw-compose-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tw-compose-cat {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--hair);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  font-family: inherit;
}
.tw-compose-textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  font-family: inherit;
  line-height: 1.5;
  resize: none;
  min-height: 100px;
  box-sizing: border-box;
}
.tw-compose-textarea::placeholder { color: var(--ink-mute); }
.tw-compose-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tw-compose-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
}
.tw-compose-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.tw-compose-preview-item button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.6);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.tw-compose-preview-item button .material-symbols-rounded { font-size: 14px; }
.tw-compose-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border-top: 1px solid var(--hair-soft);
}
.tw-compose-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-mute);
}

/* ── Bookmarks Modal ── */
.tw-bookmarks-box {
  background: var(--paper);
  border-radius: 16px;
  width: 92%;
  max-width: 580px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tw-bookmarks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hair-soft);
  flex-shrink: 0;
}
#twBookmarksList {
  overflow-y: auto;
  flex: 1;
}
#twBookmarksList .tw-post {
  padding: 14px 20px;
}

/* ── Reply count badge ── */
.tw-act-count { font-size: 13px; }

/* ── Replies (below post) ── */
.tw-replies { margin-top: 4px; }
.tw-replies:empty { display: none; }
.tw-reply-item {
  display: flex;
  gap: 10px;
  padding: 8px 0 6px;
  border-top: 1px solid var(--hair-soft);
  flex-wrap: wrap;
}
.tw-reply-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--paper-2);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tw-reply-avatar .material-symbols-rounded { font-size: 22px; color: var(--ink-mute); }
.tw-reply-body { flex: 1; min-width: 0; }
.tw-reply-children {
  width: 100%;
  margin-left: 42px;
}
.tw-reply-content {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
  margin-top: 2px;
  word-break: break-word;
}

/* Reply action buttons — 한 줄에 수평 나열 */
.tw-reply-item-actions {
  display: inline-flex;
  gap: 1px;
  margin-left: auto;
  flex-shrink: 0;
}
.tw-reply-item .tw-post-meta {
  flex-wrap: nowrap;
  overflow: hidden;
}
.tw-reply-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink-mute);
  transition: background .1s, color .1s;
  padding: 0;
}
.tw-reply-act-btn .material-symbols-rounded { font-size: 14px; }
.tw-reply-act-btn:hover { background: var(--accent-soft); color: var(--accent); }
.tw-reply-act-btn.del:hover { background: #fff0f0; color: #e53e3e; }

/* Inline edit */
.tw-reply-edit-ta {
  width: 100%;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.55;
  padding: 6px 10px;
  resize: none;
  outline: none;
  box-sizing: border-box;
  min-height: 54px;
  display: block;
}
.tw-reply-edit-btns {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

/* Password input in reply create modal */
.tw-reply-pw-input {
  display: block;
  width: 100%;
  border: none;
  border-top: 1px solid var(--hair-soft);
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  padding: 8px 0 0;
  margin-top: 6px;
}
.tw-reply-pw-input::placeholder { color: var(--ink-mute); }

/* Password verify modal */
.tw-replypw-box { max-width: 320px !important; }
.tw-replypw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.tw-replypw-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 14px;
  box-sizing: border-box;
  font-family: inherit;
  outline: none;
}
.tw-replypw-input:focus { border-color: var(--accent); }

/* ── Reply Modal ── */
.tw-reply-modal-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.tw-reply-orig-row {
  display: flex;
  gap: 12px;
}
.tw-reply-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 40px;
}
.tw-reply-orig-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--paper-2);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  display: block;
}
.tw-reply-orig-avatar-ph {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tw-reply-orig-avatar-ph .material-symbols-rounded { font-size: 28px; color: var(--ink-mute); }
.tw-reply-thread-line {
  width: 2px;
  flex: 1;
  min-height: 14px;
  background: var(--hair);
  border-radius: 1px;
  margin-top: 4px;
}
.tw-reply-orig-info {
  flex: 1;
  min-width: 0;
  padding-bottom: 10px;
}
.tw-reply-orig-text {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 3px;
  word-break: break-word;
}
.tw-reply-to-label {
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 8px;
}
.tw-reply-input-row {
  display: flex;
  gap: 12px;
  padding-top: 10px;
  flex: 1;
}
.tw-reply-input-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper-2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tw-reply-input-avatar .material-symbols-rounded { font-size: 26px; color: var(--ink-mute); }
.tw-reply-input-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.tw-reply-author-input {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
  padding: 0;
  margin-bottom: 4px;
}
.tw-reply-author-input::placeholder { color: var(--ink-mute); font-size: 14px; }

/* ── Responsive ── */
@media (max-width: 520px) {
  .tw-header-img,
  .tw-header-img-placeholder { height: 130px; }
  .tw-profile-img,
  .tw-profile-img-placeholder { width: 66px; height: 66px; top: -33px; outline: none; border: 4px solid var(--paper); }
  .tw-display-name { margin-top: 10px; font-size: 16px; }
  .tw-post { padding: 14px 0; }
  .tw-replies { padding: 0 6px; }
  .tw-reply-item { gap: 6px; }
  .tw-reply-avatar { width: 24px; height: 24px; }
  .tw-reply-children { margin-left: 30px; }
  .tw-reply-item-actions { gap: 0; }
  .tw-reply-act-btn { width: 20px; height: 20px; }
  .tw-reply-act-btn .material-symbols-rounded { font-size: 12px; }
  .tw-reply-content { font-size: 12px; }
  .tw-post-body { overflow: hidden; }
}