.vision_landing_shell {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, #f2f2f3 0%, #dadbdd 44%, #cfd1d4 100%);
}

.vision_landing_stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    linear-gradient(136deg, rgba(255, 255, 255, 0.7) 0%, rgba(238, 240, 242, 0.58) 46%, rgba(206, 210, 214, 0.92) 100%);
}

.vision_landing_stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0, transparent 34%, transparent 64%, rgba(123, 130, 140, 0.12) 100%),
    linear-gradient(145deg, transparent 0 58%, rgba(126, 132, 140, 0.18) 58.4%, transparent 58.8%);
}

.vision_landing_stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12%;
  background: linear-gradient(180deg, rgba(177, 181, 186, 0.1), rgba(159, 163, 168, 0.42));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.vision_landing_glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.38;
}

.vision_landing_glow_left {
  left: 10%;
  top: 12%;
  width: 240px;
  height: 240px;
  background: rgba(145, 198, 255, 0.36);
}

.vision_landing_glow_right {
  right: 8%;
  bottom: 10%;
  width: 280px;
  height: 280px;
  background: rgba(255, 255, 255, 0.32);
}

.vision_landing_shadow {
  position: absolute;
  inset: auto 12% 8% 12%;
  height: 14px;
  border-radius: 999px;
  background: rgba(104, 111, 121, 0.22);
  filter: blur(16px);
}

.vision_icon {
  position: static;
}

.vision_bubble {
  position: relative;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.97), rgba(224, 225, 228, 0.96));
  box-shadow:
    inset -12px -16px 26px rgba(182, 186, 192, 0.48),
    inset 12px 10px 22px rgba(255, 255, 255, 0.92),
    0 24px 45px rgba(114, 119, 128, 0.2);
}

.vision_bubble_white {
  background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.98), rgba(229, 230, 232, 0.96));
}

.vision_bubble_blue {
  background: radial-gradient(circle at 30% 24%, #1cb7ff, #1570e2 72%, #0a57bf 100%);
}

.vision_bubble_green {
  background: radial-gradient(circle at 30% 24%, #6dff72, #1dd64d 72%, #10b938 100%);
}

.vision_bubble_red {
  background: radial-gradient(circle at 30% 24%, #ff4e3d, #ea0707 72%, #be0000 100%);
}

.vision_bubble_dark {
  background: radial-gradient(circle at 30% 24%, #717171, #4b4b4b 64%, #282828 100%);
}

.vision_bubble_trade {
  border-radius: 34px;
  background: linear-gradient(180deg, #facc15 0%, #f59e0b 100%);
  box-shadow:
    inset -12px -16px 26px rgba(146, 64, 14, 0.36),
    inset 12px 10px 22px rgba(255, 255, 255, 0.68),
    0 24px 45px rgba(114, 119, 128, 0.2);
}

.vision_trade_top,
.vision_trade_screen,
.vision_trade_base {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid #111827;
  border-radius: 8px;
  box-shadow: 0 6px 0 #111827;
}

.vision_trade_top {
  top: 33px;
  width: 94px;
  height: 18px;
  background: #ef4444;
}

.vision_trade_screen {
  top: 52px;
  width: 104px;
  height: 70px;
  background: #dbeafe;
  overflow: hidden;
}

.vision_trade_screen::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 3px solid #111827;
  border-radius: 4px;
  background: #ffffff;
}

.vision_trade_bar {
  position: absolute;
  bottom: 13px;
  width: 13px;
  border: 3px solid #111827;
  border-radius: 3px 3px 0 0;
  z-index: 1;
}

.vision_trade_bar_red {
  left: 26px;
  height: 26px;
  background: #ef4444;
}

.vision_trade_bar_yellow {
  left: 45px;
  height: 38px;
  background: #facc15;
}

.vision_trade_bar_green {
  left: 64px;
  height: 31px;
  background: #22c55e;
}

.vision_trade_base {
  top: 132px;
  width: 70px;
  height: 16px;
  background: #2563eb;
}

.vision_bubble_shinzan {
  background: radial-gradient(circle at 30% 24%, #fff8e8, #fef3d0 72%, #fde8b0 100%);
  overflow: hidden;
}

.vision_shinzan_svg {
  width: 100%;
  height: 100%;
  display: block;
}

.vision_bubble_shincrayon {
  background:
    url('/images/shin_crayon.png') center / contain no-repeat,
    radial-gradient(circle at 30% 24%, #f0faf7, #e0f5ef 72%, #cceee7 100%);
}


.vision_icon_button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.18s ease, filter 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.vision_icon_button:hover {
  transform: scale(1.04);
  filter: brightness(1.02);
}

.vision_icon_button:active {
  transform: scale(0.93);
  filter: brightness(0.95);
  transition: transform 0.07s ease, filter 0.07s ease;
}

.vision_icon_button:focus-visible {
  outline: 3px solid rgba(42, 122, 255, 0.35);
  outline-offset: 10px;
}

.vision_icon_trade {
  pointer-events: auto;
}

/* =============================================
   3D 원통 캐러셀
   ============================================= */

.vision_carousel_scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 700px;
  perspective-origin: 50% 50%;
  overflow: hidden;
  touch-action: none;
}

.vision_carousel_scene::before,
.vision_carousel_scene::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 26%;
  z-index: 20;
  pointer-events: none;
}

.vision_carousel_scene::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(234, 235, 238, 0.90) 0%, transparent 100%);
}

.vision_carousel_scene::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(214, 216, 220, 0.84) 0%, transparent 100%);
}

.vision_carousel_drum {
  width: 760px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(0deg);
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: grab;
}

.vision_carousel_drum.is_dragging {
  cursor: grabbing;
  transition: none;
}

.vision_carousel_row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  opacity: 0.48;
  transition: opacity 0.45s ease;
}

.vision_carousel_row.is_active {
  pointer-events: auto;
  opacity: 1;
}

.vision_carousel_row[data-row-idx="0"] {
  transform: rotateX(40deg) translateZ(280px);
}

.vision_carousel_row[data-row-idx="1"] {
  transform: rotateX(0deg) translateZ(280px);
}

.vision_carousel_row[data-row-idx="2"] {
  transform: rotateX(-40deg) translateZ(280px);
}

.vision_carousel_dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 30;
}

.vision_carousel_dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(80, 80, 90, 0.28);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.vision_carousel_dot.is_active {
  background: rgba(50, 50, 65, 0.7);
  transform: scale(1.4);
}

.landing_auth_modal,
.landing_message_modal,
.landing_gallery_modal,
.landing_browser_modal,
.landing_trade_modal,
.landing_settings_modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 0.2s ease;
}

.landing_auth_modal {
  z-index: 40;
}

.landing_auth_modal.is_open,
.landing_message_modal.is_open,
.landing_gallery_modal.is_open,
.landing_browser_modal.is_open,
.landing_trade_modal.is_open,
.landing_settings_modal.is_open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.landing_auth_dim,
.landing_message_dim,
.landing_gallery_dim,
.landing_browser_dim,
.landing_trade_dim,
.landing_settings_dim {
  position: absolute;
  inset: 0;
  background: rgba(16, 19, 28, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  will-change: opacity;
}

.landing_auth_panel,
.landing_phone_shell,
.landing_gallery_shell,
.landing_browser_shell,
.landing_trade_shell,
.landing_settings_panel {
  position: relative;
  z-index: 1;
  will-change: transform;
  transform: scale(0.97) translateY(10px);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing_auth_modal.is_open .landing_auth_panel,
.landing_message_modal.is_open .landing_phone_shell,
.landing_gallery_modal.is_open .landing_gallery_shell,
.landing_browser_modal.is_open .landing_browser_shell,
.landing_trade_modal.is_open .landing_trade_shell,
.landing_settings_modal.is_open .landing_settings_panel {
  transform: scale(1) translateY(0);
}

.landing_auth_panel {
  width: min(420px, calc(100vw - 32px));
  padding: 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 34px 90px rgba(42, 48, 58, 0.28);
  color: #1d2330;
  backdrop-filter: blur(22px);
}

.landing_auth_eyebrow {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: #6f7a8d;
}

.landing_auth_title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.05;
}

.landing_auth_description {
  margin: 0.9rem 0 1.4rem;
  color: #526076;
  line-height: 1.6;
}

.landing_auth_form {
  display: grid;
  gap: 0.9rem;
}

.landing_auth_form label {
  display: grid;
  gap: 0.38rem;
  font-size: 0.9rem;
  color: #445166;
}

.landing_auth_form input {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(112, 123, 142, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  font: inherit;
  color: #1f2430;
}

.landing_auth_error {
  min-height: 1.2rem;
  margin: 0;
  color: #d33a51;
  font-size: 0.88rem;
}

.landing_auth_submit {
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #1d8cff, #6e5bff);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 16px 28px rgba(52, 98, 255, 0.26);
}

.landing_auth_links {
  display: flex;
  gap: 0.9rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.landing_auth_link {
  color: #445166;
  font-size: 0.88rem;
  text-decoration: none;
}

.landing_phone_shell {
  width: min(402px, calc(100vw - 24px));
  max-height: calc(100svh - 24px);
  padding: 10px;
  border-radius: 44px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(180deg, #1f232c, #090b10);
  box-shadow:
    0 44px 110px rgba(11, 13, 18, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.landing_message_window_controls,
.landing_browser_window_controls {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
}

.landing_message_window_dot {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.28);
}

.landing_message_window_dot_close {
  background: linear-gradient(180deg, #ff6a5d, #f04438);
  cursor: pointer;
}

.landing_message_window_dot_minimize {
  background: linear-gradient(180deg, #ffca4f, #f5b400);
}

.landing_message_window_dot_expand {
  background: linear-gradient(180deg, #63d56a, #22b339);
}

.landing_phone_notch {
  width: 124px;
  height: 26px;
  margin: 0 auto 6px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, #050608, #161a1f);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.landing_phone_screen {
  height: min(760px, calc(100svh - 72px));
  min-height: 0;
  padding: 0;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 244, 248, 0.98)),
    linear-gradient(180deg, #f3f5f8, #e7ebf2 100%);
  color: #1d2633;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.landing_gallery_shell {
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  padding: 18px;
  border-radius: 36px;
  background: linear-gradient(180deg, #12141b, #0a0c11);
  box-shadow: 0 40px 100px rgba(11, 13, 18, 0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.landing_browser_shell {
  width: min(1400px, calc(100vw - 40px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border-radius: 16px;
  background: #ffffff;
  font-family: "Jua", sans-serif;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.landing_browser_chrome {
  height: min(900px, calc(100vh - 52px));
  min-height: 0;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.landing_browser_toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 80px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.landing_browser_nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.landing_browser_nav_btn {
  width: 30px;
  height: 30px;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.landing_browser_nav_btn:hover {
  background: #f1f5f9;
  color: #334155;
}

.landing_browser_addressbar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.landing_browser_address_lock {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  color: transparent;
  background: #22c55e;
}

.landing_browser_address_url {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #64748b;
  font-size: 0.82rem;
}

.landing_browser_actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.landing_browser_toolbar_link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: #64748b;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  font-size: 0.82rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.landing_browser_toolbar_link:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.landing_browser_toolbar_home {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  background: #0f172a;
  border: 0;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, transform 0.1s ease;
}

.landing_browser_toolbar_home:hover {
  background: #1e293b;
  transform: scale(1.03);
}

.landing_browser_toolbar_home:active {
  transform: scale(0.97);
}

.landing_browser_nav_btn.is_loading {
  opacity: 0.5;
  pointer-events: none;
  animation: landing_spin 0.6s linear infinite;
}

@keyframes landing_spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.landing_browser_body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
}

.landing_browser_content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 40px;
}

.landing_browser_header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #ffffff;
  padding: 24px 0 0;
}

/* 상세 뷰에서는 헤더 sticky 해제 — detail_nav가 top:0에 단독으로 붙도록 */
.landing_browser_header.is_detail_view {
  position: static;
}

.landing_browser_header_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
}

.landing_browser_header_info {
  min-width: 0;
}

.landing_browser_header h2 {
  margin: 0;
  color: #0f172a;
  font-size: 1.4rem;
  line-height: 1.2;
}

.landing_browser_description {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 0.85rem;
  line-height: 1.5;
}

.landing_browser_search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 200px;
  flex-shrink: 0;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: border-color 0.15s ease, width 0.2s ease;
}

.landing_browser_search:focus-within {
  border-color: #3b82f6;
  width: 260px;
}

.landing_browser_search_icon {
  color: #94a3b8;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.landing_browser_search input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #1e293b;
  font: inherit;
  font-size: 0.85rem;
}

.landing_browser_search input::placeholder {
  color: #94a3b8;
}

.landing_browser_category_nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  scrollbar-width: none;
}

.landing_browser_category_nav::-webkit-scrollbar {
  display: none;
}

.landing_browser_category_tab {
  flex-shrink: 0;
  padding: 10px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #94a3b8;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.landing_browser_category_tab:hover {
  color: #475569;
}

.landing_browser_category_tab.is_active {
  color: #0f172a;
  border-bottom-color: #0f172a;
  font-weight: 600;
}

.landing_browser_eyebrow {
  margin: 0;
  color: #94a3b8;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.landing_browser_primary_link,
.landing_browser_secondary_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  text-decoration: none;
}

.landing_browser_primary_link {
  background: #3b82f6;
  color: #ffffff;
  font-weight: 600;
  transition: background 0.15s ease;
}

.landing_browser_primary_link:hover {
  background: #2563eb;
}

.landing_browser_secondary_button {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  transition: background 0.15s ease;
}

.landing_browser_secondary_button:hover {
  background: #f1f5f9;
}

.landing_browser_danger_button {
  border: 1px solid #fecaca;
  background: #ffffff;
  color: #dc2626;
  transition: background 0.15s ease;
}

.landing_browser_danger_button:hover {
  background: #fef2f2;
}

.landing_browser_detail_nav_actions {
  display: flex;
  gap: 8px;
}

.landing_browser_feed_list {
  display: flex;
  flex-direction: column;
}

.landing_browser_feed_item {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.12s ease;
}

.landing_browser_feed_item:first-child {
  padding-top: 24px;
}

.landing_browser_feed_item:hover {
  background: #fafbfc;
}

.landing_browser_feed_text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.landing_browser_feed_category {
  color: #3b82f6;
  font-size: 0.9rem;
  font-weight: 600;
}

.landing_browser_feed_title {
  margin: 0;
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.landing_browser_feed_excerpt {
  margin: 0;
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.landing_browser_feed_meta {
  display: flex;
  gap: 8px;
  color: #94a3b8;
  font-size: 0.78rem;
  margin-top: auto;
}

.landing_browser_feed_meta span + span::before {
  content: "·";
  margin-right: 8px;
}

.landing_browser_feed_thumb_wrap {
  flex-shrink: 0;
  width: 140px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
}

.landing_browser_feed_thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing_browser_empty_state {
  margin: 0;
  padding: 40px 0;
  text-align: center;
  color: #94a3b8;
  font-size: 0.92rem;
}

.landing_browser_home[hidden],
.landing_browser_detail[hidden],
.landing_browser_editor[hidden] {
  display: none !important;
}

/* 홈 뷰 관리자 액션 */
.landing_browser_home_actions {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0 4px;
}

/* 상세 뷰 전체 컨테이너 */
.landing_browser_detail {
  padding: 0 0 24px;
}

/* 상단 네비게이션 바 */
.landing_browser_detail_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 12px;
  border-bottom: 1px solid #f1f5f9;
}

/* 목록으로 back 버튼 — pill 스타일 */
.landing_browser_detail_back_btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #f8fafc;
  color: #475569;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.landing_browser_detail_back_btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

.landing_browser_detail_back_btn svg {
  flex-shrink: 0;
}

/* 에디터 취소 버튼도 동일 스타일 */
.landing_browser_detail_back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #f8fafc;
  color: #475569;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.landing_browser_detail_back:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

.landing_browser_detail_nav--bottom {
  border-bottom: none;
  border-top: 1px solid #f1f5f9;
  padding: 14px 0 0;
  justify-content: center;
}

/* 본문 영역 */
.landing_browser_detail_body {
  display: grid;
  gap: 14px;
  padding-top: 20px;
  max-width: 1000px;
}

/* 메타 뱃지 영역 */
.landing_browser_detail_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.landing_browser_detail_badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}

.landing_browser_detail_badge--category {
  background: #eff6ff;
  color: #2563eb;
}

.landing_browser_detail_badge--author,
.landing_browser_detail_badge--date {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
  font-weight: 400;
}

.landing_browser_detail_badge--draft {
  background: #fef9c3;
  color: #854d0e;
}

.landing_browser_detail_title {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  line-height: 1.25;
  font-weight: 700;
}

/* 요약: 왼쪽 accent 라인 */
.landing_browser_detail_excerpt {
  margin: 0;
  color: #475569;
  line-height: 1.7;
  font-size: 0.93rem;
  padding: 10px 14px;
  border-left: 3px solid #3b82f6;
  background: #f8fafc;
  border-radius: 0 8px 8px 0;
}

.landing_browser_detail_featured {
  margin: 0;
}

.landing_browser_detail_featured_image,
.landing_browser_detail_image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
}

.landing_browser_detail_content {
  display: grid;
  gap: 1rem;
  color: #334155;
  font-size: 0.97rem;
  line-height: 1.85;
}

.landing_browser_detail_content p {
  margin: 0;
}

.landing_browser_detail_content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* 코드 블록 · 테이블: 모바일에서 가로 스크롤 */
.landing_browser_detail_content pre,
.landing_browser_detail_content .ql-syntax {
  overflow-x: auto;
  white-space: pre;
  word-break: normal;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.landing_browser_detail_content code {
  word-break: break-all;
}

.landing_browser_detail_content table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.landing_browser_detail_content blockquote {
  margin: -0.25rem 0;
  padding: 12px 16px 12px 18px;
  background: #f1f5f9;
  border-left: 3px solid #94a3b8;
  border-radius: 0 6px 6px 0;
  color: #475569;
  font-style: italic;
}

.landing_browser_detail_figure {
  margin: 0;
  display: grid;
  gap: 0.7rem;
}

.landing_browser_detail_caption {
  color: #94a3b8;
  font-size: 0.82rem;
  text-align: center;
}

/* 이전/다음 글 네비게이션 */
.landing_browser_detail_pagination {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
}

.landing_browser_detail_pagination_item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.13s, border-color 0.13s;
}

.landing_browser_detail_pagination_item:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.landing_browser_detail_pagination_item--next {
  text-align: right;
}

.landing_browser_detail_pagination_label {
  font-size: 0.7rem;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.landing_browser_detail_pagination_title {
  font-size: 0.83rem;
  color: #1e293b;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 사이드바: 글 목록 ── */
.landing_browser_detail_sidebar {
  border-left: 1px solid #f1f5f9;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: start;
  position: sticky;
  top: 0;
}

.landing_browser_sidebar_header {
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.landing_browser_sidebar_eyebrow {
  margin: 0;
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.landing_browser_sidebar_list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
}

.landing_browser_sidebar_item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}

.landing_browser_sidebar_item:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.landing_browser_sidebar_item.is_active {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.landing_browser_sidebar_item_category {
  font-size: 0.68rem;
  color: #3b82f6;
  font-weight: 600;
}

.landing_browser_sidebar_item.is_active .landing_browser_sidebar_item_category {
  color: #2563eb;
}

.landing_browser_sidebar_item_title {
  font-size: 0.8rem;
  color: #334155;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.landing_browser_sidebar_item.is_active .landing_browser_sidebar_item_title {
  color: #1e40af;
  font-weight: 600;
}

.landing_browser_sidebar_item_date {
  font-size: 0.68rem;
  color: #94a3b8;
}

/* ── 댓글 섹션 ── */
.lnr_comment_section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
}

.lnr_comment_heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.93rem;
  font-weight: 600;
  color: #475569;
  letter-spacing: -0.01em;
}

.lnr_comment_count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 12px;
  background: #eff6ff;
  color: #3b82f6;
  font-size: 0.73rem;
  font-weight: 700;
}

/* 댓글 작성 폼 */
.lnr_comment_form {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #f1f5f9;
}

.lnr_comment_form_avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.lnr_comment_form_body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lnr_comment_form_textarea {
  width: 100%;
  min-height: 68px;
  padding: 11px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: 0.87rem;
  color: #1e293b;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
  line-height: 1.6;
}

.lnr_comment_form_textarea:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.08);
}

.lnr_comment_form_textarea::placeholder {
  color: #94a3b8;
}

.lnr_comment_form_actions {
  display: flex;
  justify-content: flex-end;
}

.lnr_comment_form_submit {
  padding: 8px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 2px 6px rgba(37,99,235,0.18);
}

.lnr_comment_form_submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,99,235,0.25);
}

.lnr_comment_form_submit:active {
  transform: translateY(0);
}

.lnr_comment_form_submit:disabled {
  background: #cbd5e1;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* 비로그인 안내 */
.lnr_comment_login_prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font-size: 0.85rem;
}

.lnr_comment_login_prompt button {
  flex-shrink: 0;
  padding: 7px 18px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 2px 6px rgba(37,99,235,0.18);
}

.lnr_comment_login_prompt button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,99,235,0.25);
}

/* 댓글 목록 */
.lnr_comment_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lnr_comment_item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fafbfd;
  transition: background 0.15s;
}

.lnr_comment_item:hover {
  background: #f1f5f9;
}

.lnr_comment_avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* 아바타 파스텔 컬러 팔레트 */
.lnr_comment_avatar--blue {
  background: linear-gradient(135deg, #bfdbfe 0%, #dbeafe 100%);
  color: #2563eb;
}
.lnr_comment_avatar--green {
  background: linear-gradient(135deg, #bbf7d0 0%, #dcfce7 100%);
  color: #16a34a;
}
.lnr_comment_avatar--purple {
  background: linear-gradient(135deg, #ddd6fe 0%, #ede9fe 100%);
  color: #7c3aed;
}
.lnr_comment_avatar--pink {
  background: linear-gradient(135deg, #fecdd3 0%, #ffe4e6 100%);
  color: #e11d48;
}
.lnr_comment_avatar--amber {
  background: linear-gradient(135deg, #fde68a 0%, #fef3c7 100%);
  color: #b45309;
}

.lnr_comment_body {
  flex: 1;
  min-width: 0;
}

.lnr_comment_header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.lnr_comment_author {
  font-size: 0.84rem;
  font-weight: 600;
  color: #1e293b;
}

.lnr_comment_date {
  font-size: 0.73rem;
  color: #a1a1aa;
}

.lnr_comment_content {
  font-size: 0.87rem;
  color: #475569;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.lnr_comment_delete {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  padding: 3px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #cbd5e1;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.lnr_comment_delete:hover {
  color: #f87171;
  background: #fef2f2;
}

.lnr_comment_delete svg {
  width: 13px;
  height: 13px;
}

/* 빈 상태 */
.lnr_comment_empty {
  padding: 32px 0;
  text-align: center;
  color: #a1a1aa;
  font-size: 0.85rem;
}

.lnr_comment_empty_icon {
  display: block;
  margin: 0 auto 8px;
  width: 36px;
  height: 36px;
  color: #d4d4d8;
}

.landing_browser_editor {
  display: grid;
  gap: 18px;
  padding: 24px 0 0;
}

.landing_browser_editor_intro {
  display: grid;
  gap: 8px;
}

.landing_browser_editor_form {
  display: grid;
  gap: 16px;
}

.landing_browser_editor_form.is_submitting {
  opacity: 0.82;
}

.landing_browser_editor_error {
  padding: 0.95rem 1rem;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #dc2626;
  font-size: 0.9rem;
}

.landing_browser_editor_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.landing_browser_editor_label {
  display: grid;
  gap: 0.45rem;
  color: #334155;
  font-size: 0.88rem;
  font-weight: 500;
}

.landing_browser_editor_label_hint {
  font-weight: 400;
  color: #94a3b8;
  font-size: 0.8rem;
}

.landing_browser_editor_label input,
.landing_browser_editor_label select,
.landing_browser_editor_label textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #1e293b;
  font: inherit;
  line-height: 1.6;
  outline: none;
  transition: border-color 0.15s ease;
}

.landing_browser_editor_label input:focus,
.landing_browser_editor_label select:focus,
.landing_browser_editor_label textarea:focus {
  border-color: #3b82f6;
}

.landing_browser_editor_label input,
.landing_browser_editor_label select {
  min-height: 44px;
  padding: 0 14px;
}

.landing_browser_editor_label textarea {
  min-height: 120px;
  padding: 12px 14px;
  resize: vertical;
}

.landing_browser_editor_label select option {
  color: #1e293b;
  background: #ffffff;
}

.landing_browser_editor_label input::placeholder,
.landing_browser_editor_label textarea::placeholder {
  color: #94a3b8;
}

.landing_browser_editor_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── 이미지 라이트박스 ── */
.landing_browser_lightbox {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: rgba(10, 12, 18, 0.92);
  backdrop-filter: blur(6px);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.landing_browser_lightbox.is_open {
  visibility: visible;
  opacity: 1;
}

.landing_browser_lightbox_close {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.landing_browser_lightbox_close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.landing_browser_lightbox_controls {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 40px;
  backdrop-filter: blur(8px);
}

.landing_browser_lightbox_ctrl {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}

.landing_browser_lightbox_ctrl:hover {
  background: rgba(255, 255, 255, 0.18);
}

.landing_browser_lightbox_zoom_level {
  min-width: 46px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.landing_browser_lightbox_stage {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}

.landing_browser_lightbox_stage.is_zoomed {
  cursor: grab;
  overflow: scroll;
  align-items: flex-start;
  justify-content: flex-start;
}

.landing_browser_lightbox_stage.is_zoomed.is_grabbing {
  cursor: grabbing;
}

.landing_browser_lightbox_img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.18s ease;
  pointer-events: none;
  user-select: none;
}

/* 클릭 가능한 이미지에 커서 표시 */
.landing_browser_detail_content img,
.landing_browser_detail_featured_image {
  cursor: zoom-in;
}

/* ── Quill 에디터 오버라이드 ── */
.landing_browser_editor_quill {
  border-radius: 0 0 8px 8px;
}

.landing_browser_editor_quill .ql-toolbar.ql-snow {
  border: 1px solid #e2e8f0;
  border-radius: 8px 8px 0 0;
  background: #f8fafc;
  padding: 6px 8px;
  font-family: inherit;
}

.landing_browser_editor_quill .ql-container.ql-snow {
  border: 1px solid #e2e8f0;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  font-family: inherit;
  font-size: 0.95rem;
  color: #1e293b;
}

.landing_browser_editor_quill .ql-editor {
  min-height: 280px;
  line-height: 1.8;
  padding: 14px 16px;
}

.landing_browser_editor_quill .ql-editor.ql-blank::before {
  color: #94a3b8;
  font-style: normal;
  left: 16px;
}

.landing_browser_editor_quill .ql-editor img {
  max-width: 100%;
  border-radius: 8px;
  margin: 8px 0;
}

.landing_browser_editor_quill .ql-editor blockquote {
  margin: 2px 0;
  padding: 12px 16px 12px 18px;
  background: #f1f5f9;
  border-left: 3px solid #94a3b8;
  border-radius: 0 6px 6px 0;
  color: #475569;
  font-style: italic;
}

.landing_browser_editor_quill .ql-snow .ql-stroke {
  stroke: #475569;
}

.landing_browser_editor_quill .ql-snow .ql-fill {
  fill: #475569;
}

.landing_browser_editor_quill .ql-snow.ql-toolbar button:hover .ql-stroke,
.landing_browser_editor_quill .ql-snow .ql-toolbar button:hover .ql-stroke {
  stroke: #3b82f6;
}

.landing_browser_editor_quill .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.landing_browser_editor_quill .ql-snow .ql-toolbar button.ql-active .ql-stroke {
  stroke: #2563eb;
}

.landing_browser_editor_quill .ql-snow.ql-toolbar button:hover .ql-fill,
.landing_browser_editor_quill .ql-snow .ql-toolbar button:hover .ql-fill {
  fill: #3b82f6;
}

.landing_browser_editor_quill .ql-picker-label {
  color: #475569;
}

.landing_browser_editor_quill .ql-picker-label:hover {
  color: #3b82f6;
}

.landing_browser_editor_quill .ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.landing_gallery_header {
  padding: 18px 18px 8px;
}

.landing_gallery_label {
  margin: 0;
  color: #7f8ca3;
  font-size: 0.78rem;
}

.landing_gallery_header h2 {
  margin: 0.4rem 0 0;
  color: #ffffff;
  font-size: 1.9rem;
}

.landing_gallery_user {
  margin: 0.45rem 0 0;
  color: #8e9cb3;
  font-size: 0.9rem;
}

.landing_gallery_body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 18px 18px;
}

@keyframes landing_gallery_spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes landing_gallery_shimmer {
  0% {
    background-position: -600px 0;
  }

  100% {
    background-position: 600px 0;
  }
}

.landing_gallery_state {
  margin: 1.2rem 0;
  text-align: center;
  color: #97a4b9;
  font-size: 0.95rem;
}

.landing_gallery_state.is_loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 0;
}

.landing_gallery_state.is_loading::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #5d9cf5;
  border-radius: 50%;
  animation: landing_gallery_spin 0.75s linear infinite;
  flex-shrink: 0;
}

.landing_gallery_image.is_loading {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.11) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 600px 100%;
  animation: landing_gallery_shimmer 1.4s ease-in-out infinite;
}

.landing_gallery_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.landing_gallery_item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 24px;
  padding: 10px;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}

.landing_gallery_image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.landing_gallery_name {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #dfe7f3;
  word-break: break-word;
}

.landing_gallery_breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 18px 10px;
  min-height: 32px;
}

.landing_gallery_bc_btn {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #a8bbd4;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.landing_gallery_bc_btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.landing_gallery_bc_sep {
  color: #4e5d72;
  font-size: 0.85rem;
  padding: 0 2px;
}

.landing_gallery_bc_current {
  padding: 4px 10px;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
}

.landing_gallery_folder {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  padding: 10px;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.landing_gallery_folder:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

.landing_gallery_folder_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: rgba(255, 200, 80, 0.12);
  font-size: 2.4rem;
}

.landing_gallery_folder_name {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #ffd980;
  word-break: break-word;
}

.landing_gallery_more_wrap {
  display: flex;
  justify-content: center;
  padding: 18px 0 4px;
}

.landing_gallery_more_btn {
  padding: 10px 32px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.07);
  color: #c8d8ee;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.landing_gallery_more_btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.landing_gallery_more_btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.landing_message_statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #111827;
}

.landing_message_status_icons {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.landing_message_signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.landing_message_signal i {
  display: block;
  width: 3px;
  border-radius: 999px;
  background: #111827;
}

.landing_message_signal i:nth-child(1) {
  height: 4px;
  opacity: 0.55;
}

.landing_message_signal i:nth-child(2) {
  height: 6px;
  opacity: 0.7;
}

.landing_message_signal i:nth-child(3) {
  height: 8px;
  opacity: 0.85;
}

.landing_message_signal i:nth-child(4) {
  height: 10px;
}

.landing_message_wifi {
  position: relative;
  width: 14px;
  height: 10px;
  border-top: 2px solid #111827;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-radius: 50% 50% 0 0;
}

.landing_message_wifi::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #111827;
  transform: translateX(-50%);
}

.landing_message_battery {
  width: 22px;
  height: 11px;
  border: 1.7px solid #111827;
  border-radius: 4px;
  position: relative;
}

.landing_message_battery::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 2px;
  width: 2px;
  height: 5px;
  border-radius: 0 2px 2px 0;
  background: #111827;
}

.landing_message_battery span {
  position: absolute;
  inset: 1.5px;
  border-radius: 2px;
  background: #111827;
}

.landing_message_header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 10px 18px 14px;
  background: rgba(248, 249, 251, 0.92);
  border-bottom: 1px solid rgba(192, 199, 210, 0.55);
  box-shadow: 0 10px 24px rgba(201, 208, 220, 0.16);
}

.landing_message_header_avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e6ebf3, #cbd5e1);
  color: #364152;
  font-size: 1rem;
  font-weight: 700;
}

.landing_message_header_text {
  min-width: 0;
  flex: 1;
  text-align: center;
}

.landing_message_header_label {
  margin: 0;
  color: #8d97a8;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.landing_message_header_user {
  margin: 0.18rem 0 0;
  color: #8a95a6;
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing_message_header h2 {
  margin: 0.12rem 0 0;
  font-size: 1.12rem;
  line-height: 1.2;
  font-weight: 700;
}

.landing_message_list_wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.landing_message_list {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0.82rem;
  padding: 18px 12px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;
  cursor: grab;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.86), transparent 26%),
    linear-gradient(180deg, #eef2f7 0%, #e9edf4 100%);
}

.landing_message_list.is_dragging,
.landing_message_list.is_dragging * {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.landing_message_list::-webkit-scrollbar {
  display: none;
}

.landing_message_item {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 84%;
  gap: 0.2rem;
}

.landing_message_item_receive {
  margin-right: auto;
}

.landing_message_item_send {
  margin-left: auto;
}

.landing_message_bubble {
  padding: 0.82rem 0.96rem;
  border-radius: 22px;
  font-size: 0.95rem;
  line-height: 1.42;
  box-shadow: 0 10px 22px rgba(70, 92, 123, 0.1);
}

.landing_message_bubble_receive {
  background: #ffffff;
  color: #1f2937;
  border: 1px solid rgba(210, 216, 225, 0.78);
  border-top-left-radius: 8px;
}

.landing_message_bubble_send {
  margin-left: auto;
  background: linear-gradient(180deg, #36d95c, #26c94b);
  color: #ffffff;
  border-top-right-radius: 8px;
}

.landing_message_name {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.64;
  color: #000000;
}

.landing_message_meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.56rem;
  margin-bottom: 0.22rem;
}

.landing_message_meta_actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.44rem;
  margin-left: auto;
}

.landing_message_time {
  font-size: 0.7rem;
  opacity: 0.84;
  white-space: nowrap;
  color: #7a879a;
}

.landing_message_time[hidden] {
  display: none;
}

.landing_message_scroll_btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.48rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: rgba(30, 40, 55, 0.82);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 5;
}

.landing_message_scroll_btn[hidden] {
  display: none;
}

.landing_message_scroll_btn:hover {
  background: rgba(20, 30, 45, 0.92);
}

.landing_message_item_receive .landing_message_time {
  align-self: flex-end;
  padding-right: 0.35rem;
}

.landing_message_item_send .landing_message_time {
  align-self: flex-start;
  padding-left: 0.35rem;
}

.landing_message_content {
  white-space: pre-wrap;
  word-break: break-word;
}

/* 말풍선 + 삭제 버튼 가로 배치 */
.landing_message_bubble_row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.landing_message_item_send .landing_message_bubble_row {
  flex-direction: row-reverse;
}

.landing_message_delete {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 6px;
  border: none;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, transform 0.12s;
}

.landing_message_delete svg {
  width: 12px;
  height: 12px;
}

.landing_message_bubble_row:hover .landing_message_delete,
.landing_message_item:hover > .landing_message_delete {
  opacity: 1;
}

.landing_message_delete:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: scale(1.1);
}

.landing_message_state {
  margin: auto 0;
  text-align: center;
  color: #7a879a;
  font-size: 0.92rem;
}

.landing_message_input {
  min-height: 78px;
  margin: 0 10px 12px;
  padding: 10px 10px 10px 14px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  box-shadow:
    0 10px 24px rgba(160, 172, 190, 0.22),
    inset 0 0 0 1px rgba(191, 199, 211, 0.72);
}

.landing_message_input_field {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  max-height: 124px;
  border: 0;
  background: transparent;
  color: #243041;
  font: inherit;
  line-height: 1.45;
  resize: none;
  outline: none;
  overflow-y: auto;
}

.landing_message_input_field::placeholder {
  color: #7f8a9e;
}

.landing_message_send_button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #1583ff, #006ef5);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0, 110, 245, 0.3);
}

.landing_toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 35;
  transform: translate(-50%, 16px);
  min-width: 220px;
  max-width: calc(100vw - 32px);
  padding: 0.92rem 1rem;
  border-radius: 999px;
  background: rgba(19, 24, 31, 0.82);
  color: #ffffff;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(16px);
}

.landing_toast.is_visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.weather_sun {
  position: absolute;
  left: 30px;
  top: 34px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffdc08;
  box-shadow: 0 0 20px rgba(255, 220, 8, 0.35);
}

.weather_cloud {
  position: absolute;
  left: 47px;
  top: 60px;
  width: 72px;
  height: 42px;
  border-radius: 30px;
  background: linear-gradient(180deg, #ffffff, #dce1e6);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.weather_cloud::before,
.weather_cloud::after {
  content: "";
  position: absolute;
  bottom: 14px;
  border-radius: 50%;
  background: inherit;
}

.weather_cloud::before {
  left: 8px;
  width: 34px;
  height: 34px;
}

.weather_cloud::after {
  right: 7px;
  width: 42px;
  height: 42px;
}

.message_shape {
  position: absolute;
  left: 34px;
  top: 30px;
  width: 102px;
  height: 82px;
  border-radius: 48px;
  background: linear-gradient(180deg, #fefefe, #e4f1df);
}

.message_shape::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: -10px;
  width: 24px;
  height: 24px;
  border-radius: 0 0 0 24px;
  background: inherit;
  transform: rotate(14deg);
}

.vision_calendar_face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.calendar_month {
  margin-top: -8px;
  color: #e7493d;
  font-size: 1rem;
  line-height: 1;
}

.calendar_day {
  color: #1f1f1f;
  font-size: 4rem;
  line-height: 0.95;
  font-weight: 300;
}

.photos_flower {
  position: absolute;
  inset: 27px;
  border-radius: 50%;
  background: conic-gradient(
    #ff4c65 0deg 40deg,
    #ff8b1c 40deg 80deg,
    #e2d300 80deg 120deg,
    #37c948 120deg 160deg,
    #0cb7d9 160deg 200deg,
    #356df7 200deg 240deg,
    #704af0 240deg 280deg,
    #de42a6 280deg 320deg,
    #ff4c65 320deg 360deg
  );
  box-shadow: inset 0 0 0 12px rgba(255, 255, 255, 0.28);
}

.photos_flower::after {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
}

.vision_clock_face {
  position: relative;
}

.vision_clock_pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background: #ff8b15;
  z-index: 2;
}

.vision_clock_hand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: bottom center;
  border-radius: 999px;
}

.vision_clock_hand_hour {
  width: 5px;
  height: 48px;
  margin-left: -2.5px;
  margin-top: -48px;
  background: #262626;
  transform: rotate(-58deg);
}

.vision_clock_hand_minute {
  width: 4px;
  height: 64px;
  margin-left: -2px;
  margin-top: -64px;
  background: #444444;
  transform: rotate(124deg);
}

.vision_clock_hand_second {
  width: 2px;
  height: 72px;
  margin-left: -1px;
  margin-top: -72px;
  background: #ff8a14;
  transform: rotate(180deg);
}

.vision_browser_face {
  position: relative;
}

.vision_browser_ring {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fefefe 0 23%, transparent 24%),
    radial-gradient(circle at 50% 50%, #4eb9ff 0 62%, #1168d7 74%, #0b54b5 100%);
}

.vision_browser_needle {
  position: absolute;
  left: 79px;
  top: 38px;
  width: 12px;
  height: 98px;
  background: linear-gradient(180deg, #f35f57 0 50%, #f8f8f8 50% 100%);
  clip-path: polygon(50% 0, 100% 100%, 50% 78%, 0 100%);
  transform: rotate(43deg);
  transform-origin: 50% 78%;
}

.vision_wiki_face {
  background: radial-gradient(circle at 28% 22%, #ffffff, #e8e8e8 72%, #d8d8d8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vision_wiki_letter {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 80px;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 1;
  user-select: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.vision_music_note,
.vision_gear {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vision_music_note {
  font-size: 5.6rem;
  color: #f46bc0;
  text-shadow:
    18px 12px 0 #6fb7ff,
    6px -10px 0 rgba(255, 255, 255, 0.72);
}

.vision_play_triangle {
  position: absolute;
  left: 66px;
  top: 52px;
  width: 0;
  height: 0;
  border-top: 32px solid transparent;
  border-bottom: 32px solid transparent;
  border-left: 52px solid #ffffff;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.16));
}

.vision_gear {
  font-size: 5.5rem;
  color: #d0d4d8;
}

@keyframes vision_float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes landing_viewer_spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.landing_viewer_modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.landing_viewer_modal.is_open {
  display: flex;
}

.landing_viewer_dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  cursor: pointer;
}

.landing_viewer_shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
}

.landing_viewer_close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(30, 34, 44, 0.9);
  color: #ffffff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

.landing_viewer_close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.landing_viewer_img_wrap {
  position: relative;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 100px);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  line-height: 0;
}

.landing_viewer_img {
  display: block;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 100px);
  object-fit: contain;
  border-radius: 14px;
  transition: filter 0.35s ease, opacity 0.35s ease;
}

.landing_viewer_img.is_preview {
  filter: blur(10px);
  transform: scale(1.04);
  transition: none;
}

.landing_viewer_spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: #5d9cf5;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: landing_viewer_spin 0.75s linear infinite;
}

.landing_viewer_img.is_preview ~ .landing_viewer_spinner {
  display: block;
}

.landing_viewer_name {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.84rem;
  text-align: center;
  max-width: calc(100vw - 40px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1440px) {
  .vision_bubble {
    width: 190px;
    height: 190px;
  }
}

@media (min-width: 1920px) {
  .vision_bubble {
    width: 210px;
    height: 210px;
  }
}

@media (max-width: 900px) {
  .vision_bubble {
    width: 130px;
    height: 130px;
  }

  .vision_carousel_drum {
    width: 570px;
    height: 155px;
  }

  .vision_carousel_row[data-row-idx="0"] {
    transform: rotateX(40deg) translateZ(220px);
  }

  .vision_carousel_row[data-row-idx="1"] {
    transform: rotateX(0deg) translateZ(220px);
  }

  .vision_carousel_row[data-row-idx="2"] {
    transform: rotateX(-40deg) translateZ(220px);
  }

  .calendar_day {
    font-size: 3rem;
  }
}

@media (max-width: 640px) {
  .vision_landing_shell {
    height: 100svh;
  }

  .landing_auth_modal,
  .landing_message_modal,
  .landing_gallery_modal,
  .landing_browser_modal {
    padding: 12px;
  }

  .landing_auth_panel {
    padding: 24px 18px 18px;
    border-radius: 24px;
  }

  .landing_phone_shell {
    width: calc(100vw - 8px);
    max-height: calc(100svh - 8px);
    padding: 8px;
    border-radius: 32px;
  }

  .landing_message_window_controls {
    top: 12px;
    left: 12px;
  }

  .landing_gallery_shell {
    width: calc(100vw - 16px);
    padding: 12px;
    border-radius: 28px;
  }

  .landing_browser_shell {
    width: calc(100vw - 12px);
    max-height: calc(100svh - 12px);
    border-radius: 12px;
  }

  .landing_browser_window_controls {
    top: 10px;
    left: 10px;
  }

  .landing_browser_chrome {
    height: calc(100svh - 32px);
    min-height: 0;
  }

  .landing_browser_toolbar {
    grid-template-columns: 1fr;
    padding: 46px 12px 10px;
    gap: 8px;
  }

  .landing_browser_nav {
    display: none;
  }

  .landing_browser_actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .landing_browser_content {
    padding: 0 16px 32px;
  }

  .landing_browser_header_top {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .landing_browser_search {
    width: 100%;
  }

  .landing_browser_search:focus-within {
    width: 100%;
  }

  .landing_browser_feed_item {
    gap: 14px;
  }

  .landing_browser_feed_thumb_wrap {
    width: 100px;
    height: 72px;
  }

  .landing_browser_editor_grid {
    grid-template-columns: 1fr;
  }

  .landing_phone_screen {
    height: calc(100svh - 50px);
    min-height: 0;
    padding: 0;
    border-radius: 24px;
  }

  .landing_message_statusbar {
    padding: 10px 14px 7px;
  }

  .landing_message_header {
    gap: 0.7rem;
    padding: 8px 14px 12px;
  }

  .landing_message_header_avatar {
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
  }

  .landing_message_header h2 {
    font-size: 1rem;
  }

  .landing_message_header_user {
    font-size: 0.8rem;
  }

  .landing_gallery_header {
    padding: 14px 10px 8px;
  }

  .landing_gallery_body {
    min-height: 70svh;
    max-height: 70svh;
    padding: 0 10px 10px;
  }

  .landing_gallery_grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .landing_message_list {
    padding: 14px 8px 8px;
    gap: 0.68rem;
  }

  .landing_message_item {
    max-width: 90%;
  }

  .landing_message_bubble {
    font-size: 0.9rem;
  }

  .landing_message_input {
    min-height: 72px;
    margin: 0 8px 8px;
    padding: 8px 8px 8px 12px;
  }

  .landing_message_input_field {
    min-height: 48px;
  }

  .landing_message_send_button {
    width: 38px;
    height: 38px;
  }

  .vision_bubble {
    width: 94px;
    height: 94px;
  }

  /* 모바일: 기울어진 원반(tilted wheel) 3D 캐러셀
     - 아이콘 10개를 원(ㅇ) 위에 배치
     - 원반을 X축으로 30° 기울여 perspective로 입체감 부여
     - 좌우 스와이프 → 원반 rotateZ 회전
     - 파라미터: tilt 30°, radius 130px, perspective 400px, Y offset -60px */
  .vision_carousel_scene {
    perspective: 400px;
    perspective-origin: 50% 50%;
    justify-content: center;
  }

  .vision_carousel_scene::before,
  .vision_carousel_scene::after {
    display: none;
  }

  .vision_carousel_drum {
    transform-style: preserve-3d;
    width: 0;
    height: 0;
    margin-top: -60px;
    display: block;
    cursor: default;
    transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .vision_carousel_drum.is_dragging {
    cursor: default;
  }

  /* 행: 드럼 중심에 겹쳐지는 0×0 패스스루 컨테이너
     [data-row-idx] 속성 선택자(0,2,0)가 .vision_carousel_row(0,1,0)보다
     specificity가 높으므로 transform을 !important로 강제 재정의 */
  .vision_carousel_row,
  .vision_carousel_row[data-row-idx="0"],
  .vision_carousel_row[data-row-idx="1"],
  .vision_carousel_row[data-row-idx="2"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: visible;
    display: block;
    transform: none !important;
    transform-style: preserve-3d;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    opacity: 1;
    pointer-events: none;
  }

  .vision_carousel_row.is_active {
    pointer-events: none;
  }

  .vision_icon_button {
    position: absolute;
    width: 0;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .vision_icon_button .vision_bubble {
    flex-shrink: 0; /* width:0 flex 컨테이너에서 버블이 0px로 찌그러지는 것을 방지 */
    transform: scale(0.70);
    opacity: 0.50;
    transition: transform 0.38s ease, opacity 0.38s ease;
  }

  .vision_icon_button.is_mobile_active {
    pointer-events: auto;
  }

  .vision_icon_button.is_mobile_active .vision_bubble {
    transform: scale(1.3);
    opacity: 1;
  }

  .vision_icon_button:hover {
    transform: none;
    filter: none;
  }

  .vision_icon_button:active {
    transform: none;
    filter: none;
    transition: none;
  }

  .vision_icon_button.is_mobile_active:active .vision_bubble {
    transform: scale(1.0);
    filter: brightness(0.95);
    transition: transform 0.07s ease, filter 0.07s ease;
  }

  .weather_sun {
    left: 17px;
    top: 18px;
    width: 30px;
    height: 30px;
  }

  .weather_cloud {
    left: 24px;
    top: 36px;
    width: 44px;
    height: 27px;
  }

  .message_shape {
    left: 20px;
    top: 18px;
    width: 56px;
    height: 44px;
  }

  .vision_wiki_letter {
    font-size: 48px;
  }

  .vision_browser_ring {
    inset: 12px;
  }

  .vision_browser_needle {
    left: 43px;
    top: 18px;
    width: 7px;
    height: 58px;
  }

  .vision_music_note {
    font-size: 3rem;
    text-shadow:
      10px 7px 0 #6fb7ff,
      3px -6px 0 rgba(255, 255, 255, 0.72);
  }

  .vision_play_triangle {
    left: 37px;
    top: 29px;
    border-top-width: 18px;
    border-bottom-width: 18px;
    border-left-width: 28px;
  }

  .vision_gear {
    font-size: 3.3rem;
  }

  .calendar_month {
    font-size: 0.72rem;
  }

  .calendar_day {
    font-size: 2.1rem;
  }

  .vision_clock_pin {
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    margin-top: -3.5px;
  }

  .vision_clock_hand_hour {
    height: 28px;
    margin-top: -28px;
  }

  .vision_clock_hand_minute {
    height: 38px;
    margin-top: -38px;
  }

  .vision_clock_hand_second {
    height: 42px;
    margin-top: -42px;
  }

  /* 브라우저 헤더 */
  .landing_browser_header {
    padding: 16px 0 0;
  }

  .landing_browser_header h2 {
    font-size: 1.15rem;
  }

  .landing_browser_description {
    font-size: 0.82rem;
  }

  .landing_browser_addressbar {
    font-size: 0.78rem;
    padding: 5px 10px;
  }

  /* 피드 아이템 - 모바일에서 세로 스택 */
  .landing_browser_feed_item {
    flex-direction: column;
    gap: 10px;
    padding: 16px 0;
  }

  .landing_browser_feed_thumb_wrap {
    width: 100%;
    height: 180px;
    border-radius: 10px;
  }

  .landing_browser_feed_text {
    gap: 6px;
  }

  .landing_browser_feed_title {
    font-size: 1rem;
  }

  .landing_browser_feed_meta {
    font-size: 0.78rem;
  }

  /* 상세 뷰 */
  .landing_browser_detail_nav {
    padding: 12px 0 10px;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 2;
  }

  .landing_browser_detail_back_btn {
    font-size: 0.82rem;
    padding: 5px 10px;
    gap: 4px;
  }

  .landing_browser_detail_body {
    padding-top: 12px;
    gap: 12px;
  }

  .landing_browser_detail_meta {
    gap: 5px;
  }

  .landing_browser_detail_badge {
    font-size: 0.72rem;
    padding: 2px 8px;
  }

  .landing_browser_detail_content {
    font-size: 0.93rem;
    line-height: 1.75;
  }

  /* 라이트박스 컨트롤 - 터치 친화적 */
  .landing_browser_lightbox_controls {
    padding: 8px 12px;
    gap: 8px;
  }

  .landing_browser_lightbox_controls button {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .landing_browser_lightbox_close {
    width: 40px;
    height: 40px;
  }

  /* Quill 툴바 줄바꿈 허용 */
  .landing_browser_editor_quill .ql-toolbar {
    flex-wrap: wrap;
  }

  /* 홈 글쓰기 버튼 */
  .landing_browser_home_actions {
    margin-top: 8px;
  }

  /* 페이지네이션 */
  .landing_browser_detail_pagination {
    flex-direction: column;
    gap: 8px;
  }

  /* 댓글 모바일 */
  .lnr_comment_form {
    padding: 12px;
  }

  .lnr_comment_form_textarea {
    min-height: 56px;
  }

  .lnr_comment_item {
    padding: 12px;
  }

  .lnr_comment_login_prompt {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

/* ===========================
   시계 모달
   =========================== */

.landing_clock_modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 0.2s ease;
}

.landing_clock_modal.is_open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.landing_clock_dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  will-change: opacity;
  cursor: pointer;
}

.landing_clock_shell {
  position: relative;
  width: 380px;
  border-radius: 24px;
  background: #0c0c0e;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 32px 80px rgba(0, 0, 0, 0.7),
    0 8px 24px rgba(0, 0, 0, 0.5);
  padding-bottom: 44px;
  will-change: transform;
  transform: scale(0.97) translateY(10px);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing_clock_modal.is_open .landing_clock_shell {
  transform: scale(1) translateY(0);
}

.landing_trade_modal {
  z-index: 95;
}

.landing_trade_shell {
  width: min(1120px, calc(100vw - 24px));
  height: min(780px, calc(100vh - 24px));
  padding: 46px 12px 12px;
  border-radius: 28px;
  background: #FEF9EE;
  overflow: hidden;
  box-shadow:
    0 0 0 3px #2C2C2C,
    6px 6px 0 #2C2C2C,
    0 32px 90px rgba(0, 0, 0, 0.28);
}

.landing_trade_title {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: #2C2C2C;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.landing_trade_frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 20px;
  background: #FEF9EE;
}

/* ── 투자 모드 선택 화면 (저축 테마 통일) ──────── */

.landing_trade_mode_picker {
  --mp-yellow: #F5C842;
  --mp-mint:   #6DC8A0;
  --mp-pink:   #F4839A;
  --mp-ink:    #2C2C2C;
  --mp-bg:     #FEF9EE;
  --mp-card:   #FFFFFF;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: var(--mp-bg);
}

.landing_trade_mode_label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mp-ink);
  opacity: 0.45;
}

.landing_trade_mode_cards {
  display: flex;
  gap: 18px;
}

.landing_trade_mode_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 180px;
  height: 190px;
  border: 2px solid var(--mp-ink);
  border-radius: 20px;
  background: var(--mp-card);
  color: var(--mp-ink);
  cursor: pointer;
  font-family: inherit;
  box-shadow: 4px 4px 0 var(--mp-ink);
  transition: transform .14s, box-shadow .14s;
}

.landing_trade_mode_card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--mp-ink);
}

.landing_trade_mode_card:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--mp-ink);
}

.landing_trade_mode_card_icon {
  font-size: 32px;
  line-height: 1;
}

.landing_trade_mode_card[data-mode="real"] {
  background: #FFFDF0;
}

.landing_trade_mode_card[data-mode="paper"] {
  background: #F0FFFB;
}

.landing_trade_mode_card[data-mode="savings"] {
  background: #FFF0F5;
}

.landing_trade_mode_card_title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--mp-ink);
}

.landing_trade_mode_card_desc {
  font-size: 11px;
  color: var(--mp-ink);
  opacity: 0.45;
  letter-spacing: 0.02em;
}

@media (max-width: 480px) {
  .landing_trade_mode_cards {
    flex-direction: column;
  }
  .landing_trade_mode_card {
    width: 260px;
    height: 110px;
    flex-direction: row;
    gap: 16px;
    padding: 0 24px;
    justify-content: flex-start;
  }
  .landing_trade_mode_card_desc { display: none; }
}

/* ── 저축 포트폴리오 (짱구 스타일) ───────────── */

/* 변수 */
.td_savings {
  --sv-yellow:  #F5C842;
  --sv-mint:    #6DC8A0;
  --sv-pink:    #F4839A;
  --sv-ink:     #2C2C2C;
  --sv-muted:   #888888;
  --sv-bg:      #FEF9EE;
  --sv-card:    #FFFFFF;
  --sv-border:  2px solid #2C2C2C;
  --sv-radius:  20px;
  --sv-shadow:  3px 3px 0 #2C2C2C;
  --sv-cream:   #F0EDE6;

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--sv-bg);
  border-radius: 20px;
  position: relative;
}

/* 헤더 오버라이드 */
.td_savings .td_header {
  background: var(--sv-yellow);
  border-bottom: var(--sv-border);
  border-radius: 20px 20px 0 0;
}

.td_savings .td_mode_badge {
  background: var(--sv-ink);
  color: var(--sv-yellow);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border: none;
}

.td_savings .td_back_btn {
  background: var(--sv-card);
  border: var(--sv-border);
  border-radius: 20px;
  color: var(--sv-ink);
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--sv-ink);
  transition: transform .1s, box-shadow .1s;
}

.td_savings .td_back_btn:hover {
  transform: translate(-1px,-1px);
  box-shadow: 3px 3px 0 var(--sv-ink);
}

.td_savings .td_back_btn:active {
  transform: translate(1px,1px);
  box-shadow: 1px 1px 0 var(--sv-ink);
}

/* 헤더 우측 버튼 그룹 */
.td_savings_hdr_actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.td_savings_hdr_btn {
  padding: 5px 10px;
  border: 2px solid var(--sv-ink);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--sv-ink);
  transition: transform .1s, box-shadow .1s;
  white-space: nowrap;
}
.td_savings_hdr_btn:hover  { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--sv-ink); }
.td_savings_hdr_btn:active { transform: translate(1px,1px);   box-shadow: 1px 1px 0 var(--sv-ink); }
.td_savings_hdr_btn--add    { background: var(--sv-yellow); color: var(--sv-ink); }
.td_savings_hdr_btn--record { background: var(--sv-mint);   color: var(--sv-ink); }

.td_savings_body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 요약 4칸 */
.td_savings_summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.td_savings_summary_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  background: var(--sv-card);
  border: var(--sv-border);
  border-radius: var(--sv-radius);
  box-shadow: var(--sv-shadow);
}

.td_savings_summary_item--return {
  background: #FFF5F9;
  border-color: var(--sv-pink);
  box-shadow: 3px 3px 0 var(--sv-pink);
}

.td_savings_summary_label {
  font-size: 10px;
  font-weight: 700;
  color: var(--sv-muted);
  letter-spacing: .03em;
  white-space: nowrap;
}

.td_savings_summary_val {
  font-size: 13px;
  font-weight: 800;
  color: var(--sv-ink);
  word-break: break-all;
  text-align: center;
  line-height: 1.3;
}

.td_savings_return_val { color: #3DAA72; }
.td_savings_return_val[data-sign="neg"] { color: #E05555; }

/* 환율 배너 */
.td_savings_fx_bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--sv-card);
  border: var(--sv-border);
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--sv-ink);
}

.td_savings_fx_label {
  font-size: 10px;
  font-weight: 700;
  color: var(--sv-muted);
  letter-spacing: .04em;
  white-space: nowrap;
}

.td_savings_fx_rate {
  font-size: 13px;
  font-weight: 800;
  color: var(--sv-ink);
  letter-spacing: -.01em;
}

.td_savings_fx_date {
  font-size: 10px;
  font-weight: 600;
  color: var(--sv-muted);
  flex: 1;
}

.td_savings_fx_refresh {
  background: none;
  border: 1.5px solid var(--sv-muted);
  border-radius: 99px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  color: var(--sv-muted);
  padding: 0;
  transition: color .1s, border-color .1s, transform .3s;
  flex-shrink: 0;
}
.td_savings_fx_refresh:hover { color: var(--sv-ink); border-color: var(--sv-ink); }
.td_savings_fx_refresh.is_loading { animation: sv-spin .8s linear infinite; }

@keyframes sv-spin { to { transform: rotate(360deg); } }

/* 월 저축 계획 박스 */
.td_savings_cash_plan,
.td_savings_plan {
  background: var(--sv-card);
  border: var(--sv-border);
  border-radius: var(--sv-radius);
  box-shadow: var(--sv-shadow);
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.td_savings_cash_plan > .td_savings_box_title,
.td_savings_plan > .td_savings_box_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.td_savings_plan_total {
  font-size: 11px;
  font-weight: 800;
  color: var(--sv-muted);
  letter-spacing: .02em;
}

.td_savings_plan_section {
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid #2C2C2C;
}

.td_savings_plan_section--pension  { background: #FFFBF0; }
.td_savings_plan_section--isa      { background: #F0FFF8; }
.td_savings_plan_section--cma      { background: #F0F6FF; }
.td_savings_plan_section--deposit  { background: #FFF5E6; }
.td_savings_plan_section--install  { background: #F0FFF4; }
.td_savings_plan_section--parking  { background: #FEFDE7; }

.td_savings_plan_acct_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1.5px solid #2C2C2C;
}

.td_savings_plan_acct_name {
  font-size: 12px;
  font-weight: 800;
  color: var(--sv-ink);
}

.td_savings_plan_acct_amt {
  font-size: 12px;
  font-weight: 800;
  color: var(--sv-ink);
  background: var(--sv-yellow);
  padding: 2px 8px;
  border-radius: 20px;
  border: 1.5px solid #2C2C2C;
}

.td_savings_plan_items {
  list-style: none;
  padding: 6px 10px 8px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.td_savings_plan_items li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
}

.td_savings_plan_item_name {
  font-size: 11px;
  font-weight: 600;
  color: var(--sv-ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td_savings_plan_item_amt {
  font-size: 11px;
  font-weight: 800;
  color: var(--sv-ink);
  white-space: nowrap;
}

/* 수익률 배지 */
.td_savings_plan_item_profit {
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  padding: 1px 5px;
  border-radius: 20px;
  flex-shrink: 0;
}
.td_savings_plan_item_profit--up { background: #FFF0F0; color: #E03030; }
.td_savings_plan_item_profit--dn { background: #F0F4FF; color: #1A6FD4; }

/* 선택 단가 두 칸 배치 */
.td_savings_optional_row {
  display: flex;
  gap: 6px;
}
.td_savings_optional_row .td_savings_input--sm { flex: 1; min-width: 0; }

/* 계획 항목 수정/삭제 버튼 */
.td_savings_plan_edit,
.td_savings_plan_del {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid #D0D0D0;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  padding: 0;
  transition: all .15s;
  color: #AAAAAA;
}
.td_savings_plan_edit:hover { border-color: var(--sv-ink); color: var(--sv-ink); }
.td_savings_plan_del:hover  { border-color: #E03030; color: #E03030; }

/* 빈 상태 */
.td_savings_plan_empty {
  font-size: 11px;
  color: var(--sv-muted);
  padding: 8px 2px;
  text-align: center;
}

.td_savings_plan_items--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 10px;
}

.td_savings_plan_items--grid li {
  padding: 2px 4px;
  background: rgba(255,255,255,0.6);
  border-radius: 6px;
}

/* ── 평가 요약 섹션 ─────────────────────────────────────── */
.td_savings_eval {
  margin-top: 12px;
  border-top: 1px solid var(--sv-border, #E8E8E8);
  padding-top: 10px;
}
.td_savings_eval_title {
  font-size: 11px;
  font-weight: 700;
  color: var(--sv-muted, #999);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.td_savings_eval_section {
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 6px;
}
.td_savings_eval_section:last-child { margin-bottom: 0; }
.td_savings_eval_section--pension { background: #FFFBF0; }
.td_savings_eval_section--isa     { background: #F0FFF8; }
.td_savings_eval_section--cma     { background: #F0F6FF; }

.td_savings_eval_acct {
  font-size: 11px;
  font-weight: 700;
  color: var(--sv-ink, #333);
  margin-bottom: 5px;
}
.td_savings_eval_row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 0;
  font-size: 11px;
  color: var(--sv-ink, #333);
  border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.td_savings_eval_row:last-child { border-bottom: none; }
.td_savings_eval_name {
  flex: 1;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.td_savings_eval_invest  { color: var(--sv-muted, #999); white-space: nowrap; font-size: 10px; }
.td_savings_eval_arrow   { color: #ccc; font-size: 9px; flex-shrink: 0; }
.td_savings_eval_current { color: var(--sv-ink, #333); font-weight: 500; white-space: nowrap; font-size: 10px; }
.td_savings_eval_profit {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}
.td_savings_eval_profit--up { background: #FFF0F0; color: #E03030; }
.td_savings_eval_profit--dn { background: #F0F4FF; color: #1A6FD4; }

/* 공통 박스 타이틀 */
.td_savings_box_title {
  font-size: 12px;
  font-weight: 800;
  color: var(--sv-ink);
  letter-spacing: .02em;
  margin-bottom: 10px;
}

/* 종목 추가 */
/* 종목 추가 열기 버튼 */
.td_savings_open_add_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  background: var(--sv-yellow);
  color: var(--sv-ink);
  border: var(--sv-border);
  border-radius: var(--sv-radius);
  box-shadow: var(--sv-shadow);
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.td_savings_open_add_btn:hover {
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--sv-ink);
}
.td_savings_open_add_btn:active {
  transform: translate(1px,1px);
  box-shadow: 1px 1px 0 var(--sv-ink);
}

/* 종목 추가 모달 */
.td_savings_modal_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
  border-radius: inherit;
}
.td_savings_modal_overlay[hidden] { display: none; }

.td_savings_modal {
  background: var(--sv-bg);
  border: var(--sv-border);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  width: 100%;
  padding: 20px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 -4px 0 var(--sv-ink);
}

.td_savings_modal_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.td_savings_modal_title {
  font-size: 14px;
  font-weight: 800;
  color: var(--sv-ink);
}

.td_savings_modal_close {
  background: none;
  border: 2px solid var(--sv-ink);
  border-radius: 99px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  color: var(--sv-ink);
  font-family: inherit;
  transition: background .1s;
  padding: 0;
}
.td_savings_modal_close:hover { background: var(--sv-yellow); }

.td_savings_modal_body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.td_savings_modal_label {
  font-size: 11px;
  font-weight: 700;
  color: var(--sv-muted);
  letter-spacing: .04em;
}

/* 모달 내부에서 폼을 세로 배치 */
.td_savings_modal_body .td_savings_add_form {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.td_savings_modal_body .td_savings_input--qty,
.td_savings_modal_body .td_savings_input--buy-price,
.td_savings_modal_body .td_savings_input--cur-price { max-width: none; }
.td_savings_modal_body .td_savings_add_btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
}

/* 계좌 유형 탭 */
.td_savings_acct_tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.td_savings_acct_tab {
  flex: 1 0 calc(33.333% - 4px);
  padding: 7px 0;
  border: 2px solid #D0D0D0;
  border-radius: 99px;
  background: transparent;
  color: #AAAAAA;
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}

.td_savings_acct_tab:hover {
  border-color: var(--sv-ink);
  color: var(--sv-ink);
}

.td_savings_acct_tab[data-acct="ISA"]::before    { content: "⭐ "; }
.td_savings_acct_tab[data-acct="CMA"]::before    { content: "💚 "; }
.td_savings_acct_tab[data-acct="연금저축"]::before { content: "🐖 "; }
.td_savings_acct_tab[data-acct="예금"]::before    { content: "🏦 "; }
.td_savings_acct_tab[data-acct="적금"]::before    { content: "📅 "; }
.td_savings_acct_tab[data-acct="파킹통장"]::before { content: "🅿️ "; }

.td_savings_acct_tab[data-acct="ISA"].is_active {
  background: var(--sv-yellow);
  border-color: var(--sv-ink);
  color: var(--sv-ink);
  box-shadow: 2px 2px 0 var(--sv-ink);
}

.td_savings_acct_tab[data-acct="CMA"].is_active {
  background: var(--sv-mint);
  border-color: var(--sv-ink);
  color: var(--sv-ink);
  box-shadow: 2px 2px 0 var(--sv-ink);
}

.td_savings_acct_tab[data-acct="연금저축"].is_active {
  background: var(--sv-pink);
  border-color: var(--sv-ink);
  color: #fff;
  box-shadow: 2px 2px 0 var(--sv-ink);
}

.td_savings_acct_tab[data-acct="예금"].is_active {
  background: #FFE0B2;
  border-color: var(--sv-ink);
  color: var(--sv-ink);
  box-shadow: 2px 2px 0 var(--sv-ink);
}

.td_savings_acct_tab[data-acct="적금"].is_active {
  background: #C8F7C5;
  border-color: var(--sv-ink);
  color: var(--sv-ink);
  box-shadow: 2px 2px 0 var(--sv-ink);
}

.td_savings_acct_tab[data-acct="파킹통장"].is_active {
  background: #FFF176;
  border-color: var(--sv-ink);
  color: var(--sv-ink);
  box-shadow: 2px 2px 0 var(--sv-ink);
}

/* 보유 목록 계좌 배지 */
.td_savings_holdings_acct_badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1.5px solid var(--sv-ink);
  white-space: nowrap;
}

.td_savings_acct--ISA      { background: var(--sv-yellow); color: var(--sv-ink); }
.td_savings_acct--CMA      { background: var(--sv-mint);   color: var(--sv-ink); }
.td_savings_acct--연금저축  { background: var(--sv-pink);   color: #fff; }

.td_savings_add_form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.td_savings_input {
  flex: 1;
  background: var(--sv-bg);
  border: 2px solid #D0D0D0;
  border-radius: 12px;
  color: var(--sv-ink);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 11px;
  outline: none;
  font-family: inherit;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.td_savings_input--sm {
  font-size: 11px;
  padding: 7px 9px;
  color: var(--sv-muted);
}

.td_savings_input::placeholder { color: #bbb; }

.td_savings_input:focus {
  border-color: var(--sv-ink);
  box-shadow: 2px 2px 0 var(--sv-ink);
}

/* 수량 input — 너비 제한 */
.td_savings_input--qty        { max-width: 120px; }
.td_savings_input--buy-price  { max-width: 120px; }
.td_savings_input--cur-price  { max-width: 120px; }

/* 숫자 스피너 제거 */
.td_savings_input[type="number"]::-webkit-inner-spin-button,
.td_savings_input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.td_savings_add_btn {
  background: var(--sv-yellow);
  color: var(--sv-ink);
  border: 2px solid var(--sv-ink);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 16px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--sv-ink);
  transition: transform .1s, box-shadow .1s;
}

.td_savings_add_btn:not(:disabled):hover {
  transform: translate(-1px,-1px);
  box-shadow: 3px 3px 0 var(--sv-ink);
}

.td_savings_add_btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--sv-ink); }
.td_savings_add_btn:disabled { opacity: .5; cursor: not-allowed; }

/* 통화 탭 */
.td_savings_currency_tabs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.td_savings_currency_tab {
  padding: 6px 10px;
  border: 2px solid #D0D0D0;
  border-radius: 99px;
  background: transparent;
  color: #AAAAAA;
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.td_savings_currency_tab:hover { border-color: var(--sv-ink); color: var(--sv-ink); }
.td_savings_currency_tab.is_active {
  background: var(--sv-ink);
  border-color: var(--sv-ink);
  color: var(--sv-yellow);
  box-shadow: 2px 2px 0 var(--sv-yellow);
}

/* 단위 탭 (주 / 금액) */
.td_savings_unit_tabs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.td_savings_unit_tab {
  padding: 7px 14px;
  border: 2px solid #D0D0D0;
  border-radius: 99px;
  background: transparent;
  color: #AAAAAA;
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.td_savings_unit_tab:hover { border-color: var(--sv-ink); color: var(--sv-ink); }
.td_savings_unit_tab.is_active {
  background: var(--sv-ink);
  border-color: var(--sv-ink);
  color: #fff;
  box-shadow: 2px 2px 0 var(--sv-yellow);
}

/* 단위 패널 (hidden 시 완전 제거) */
.td_savings_unit_panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.td_savings_unit_panel[hidden] { display: none; }

/* 종목 수정 버튼 */
.td_savings_holdings_edit {
  background: none;
  border: 1.5px solid var(--sv-muted);
  border-radius: 6px;
  color: var(--sv-muted);
  font-size: 12px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color .1s, border-color .1s;
  flex-shrink: 0;
}
.td_savings_holdings_edit:hover { color: var(--sv-ink); border-color: var(--sv-ink); }

/* 계좌별 자산 배분 3박스 래퍼 */
.td_savings_alloc_boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* 각 계좌 박스 기본 */
.td_savings_acct_box {
  background: var(--sv-card);
  border: var(--sv-border);
  border-radius: var(--sv-radius);
  box-shadow: var(--sv-shadow);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* 계좌별 상단 색상 띠 */
.td_savings_acct_box[data-acct="ISA"]      { border-top: 5px solid var(--sv-yellow); }
.td_savings_acct_box[data-acct="CMA"]      { border-top: 5px solid var(--sv-mint);   }
.td_savings_acct_box[data-acct="연금저축"] { border-top: 5px solid var(--sv-pink);   }

.td_savings_acct_box_header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-bottom: 7px;
  border-bottom: 2px dashed #E8E8E8;
  min-width: 0;
}

.td_savings_acct_box_dot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--sv-ink);
  flex-shrink: 0;
}

.td_savings_acct_box_name {
  font-size: 11px;
  font-weight: 800;
  color: var(--sv-ink);
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.td_savings_acct_box_total {
  font-size: 10px;
  font-weight: 700;
  color: var(--sv-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.td_savings_acct_box_empty {
  font-size: 11px;
  color: #ccc;
  text-align: center;
  padding: 8px 0;
}

.td_savings_acct_box_list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.td_savings_acct_box_row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 7px;
  column-gap: 6px;
  row-gap: 3px;
  align-items: center;
}

.td_savings_acct_box_stock {
  font-size: 12px;
  font-weight: 700;
  color: var(--sv-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td_savings_acct_box_qty {
  font-size: 10px;
  font-weight: 600;
  color: var(--sv-muted);
  white-space: nowrap;
  text-align: right;
}

.td_savings_acct_box_bar_wrap {
  grid-column: 1 / 2;
  background: var(--sv-cream);
  border-radius: 99px;
  height: 7px;
  overflow: hidden;
  border: 1px solid #DDD8CE;
}

.td_savings_acct_box_bar {
  display: block;
  height: 100%;
  border-radius: 99px;
  transition: width .4s cubic-bezier(.34,1.56,.64,1);
}

.td_savings_acct_box_pct {
  grid-column: 2 / 3;
  font-size: 10px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .td_savings_alloc_boxes { grid-template-columns: 1fr; }
}

/* 종목별 보유량 */
.td_savings_holdings_box {
  background: var(--sv-card);
  border: var(--sv-border);
  border-radius: var(--sv-radius);
  box-shadow: var(--sv-shadow);
  padding: 14px;
}

.td_savings_holdings_list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.td_savings_holdings_empty {
  font-size: 13px;
  color: #ccc;
  text-align: center;
  padding: 12px 0;
}

/* Holdings 목록 — 7컬럼: rank | name | acct | value | pct | edit | del */
.td_savings_holdings_item {
  display: grid;
  grid-template-columns: 20px 1fr auto auto auto 22px 26px;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 2px dashed #E8E8E8;
}

.td_savings_holdings_item:last-of-type { border-bottom: none; }

.td_savings_holdings_rank {
  font-size: 11px;
  font-weight: 800;
  color: #ccc;
  text-align: center;
}

.td_savings_holdings_name {
  font-size: 13px;
  font-weight: 700;
  color: var(--sv-ink);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

/* 값 열: "X주" or "₩X원" or "$X" */
.td_savings_holdings_val {
  font-size: 12px;
  font-weight: 800;
  color: var(--sv-ink);
  white-space: nowrap;
  text-align: right;
}

.td_savings_holdings_pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--sv-muted);
  min-width: 36px;
  text-align: right;
}

.td_savings_holdings_del {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sv-cream);
  border: 2px solid #D0D0D0;
  border-radius: 50%;
  color: #AAAAAA;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: all .15s;
}

.td_savings_holdings_del:hover {
  background: var(--sv-pink);
  border-color: var(--sv-ink);
  color: #fff;
  box-shadow: 1px 1px 0 var(--sv-ink);
}

/* 합계 행 */
.td_savings_holdings_total {
  display: grid;
  grid-template-columns: 20px 1fr auto auto auto 22px 26px;
  align-items: center;
  gap: 8px;
  padding: 9px 0 0;
  border-top: 2px solid var(--sv-ink);
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--sv-ink);
}

.td_savings_holdings_total span:nth-child(4) { text-align: right; white-space: nowrap; }

/* 모바일 */
@media (max-width: 480px) {
  .td_savings_summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .td_savings_summary_item { padding: 10px 6px; }
  .td_savings_summary_val  { font-size: 12px; }
  .td_savings_add_form     { flex-wrap: wrap; }
  .td_savings_add_btn      { width: 100%; }
  .td_savings_plan_items--grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 트레이드 대시보드 (저축 테마 통일) ────────── */

.td_dashboard {
  --td-yellow: #F5C842;
  --td-mint:   #6DC8A0;
  --td-pink:   #F4839A;
  --td-ink:    #2C2C2C;
  --td-muted:  #888888;
  --td-bg:     #FEF9EE;
  --td-card:   #FFFFFF;
  --td-cream:  #F0EDE6;

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: var(--td-bg);
  overflow: hidden;
}

.td_header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--td-yellow);
  border-bottom: 2px solid var(--td-ink);
  border-radius: 20px 20px 0 0;
  flex-shrink: 0;
}

.td_mode_badge {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
  border: none;
}

.td_mode_badge[data-mode="real"] {
  background: var(--td-ink);
  color: var(--td-yellow);
}

.td_mode_badge[data-mode="paper"] {
  background: var(--td-ink);
  color: var(--td-mint);
}

.td_tabs {
  display: flex;
  gap: 4px;
  flex: 1;
}

.td_tab {
  padding: 5px 12px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: transparent;
  color: var(--td-ink);
  opacity: 0.5;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.td_tab:hover {
  opacity: 0.8;
  background: rgba(44, 44, 44, 0.08);
}

.td_tab.is_active {
  background: var(--td-ink);
  color: var(--td-yellow);
  opacity: 1;
  border-color: var(--td-ink);
}

.td_back_btn {
  padding: 5px 12px;
  border: 2px solid var(--td-ink);
  border-radius: 20px;
  background: var(--td-card);
  color: var(--td-ink);
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--td-ink);
  transition: transform 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}

.td_back_btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--td-ink);
}

.td_back_btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--td-ink);
}

/* Balance bar */
.td_balance_bar {
  flex-shrink: 0;
  border-bottom: 2px solid var(--td-ink);
  background: var(--td-cream);
  min-height: 0;
}

.td_balance_bar:empty { display: none; }

.td_balance_inner {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 0;
}

.td_balance_item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.td_balance_label {
  font-size: 10px;
  color: var(--td-muted);
  letter-spacing: 0.04em;
  font-weight: 600;
  text-transform: uppercase;
}

.td_balance_value {
  font-size: 13px;
  font-weight: 700;
  color: var(--td-ink);
  letter-spacing: -0.01em;
}

.td_balance_value--settle {
  color: #2A8C5A;
}

.td_balance_sep {
  width: 1px;
  height: 28px;
  background: rgba(44, 44, 44, 0.15);
  margin: 0 16px;
  flex-shrink: 0;
}

.td_balance_loading {
  padding: 10px 16px;
  font-size: 11px;
  color: var(--td-muted);
}

.td_panels {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.td_panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 16px;
  background: var(--td-bg, #FEF9EE);
}

.td_panel::-webkit-scrollbar { width: 4px; }
.td_panel::-webkit-scrollbar-track { background: transparent; }
.td_panel::-webkit-scrollbar-thumb { background: rgba(44, 44, 44, 0.18); border-radius: 2px; }

/* Loading / error states */
.td_loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: var(--td-muted, #888);
  font-size: 13px;
  gap: 8px;
}

.td_loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid rgba(44, 44, 44, 0.15);
  border-top-color: var(--td-ink, #2C2C2C);
  border-radius: 50%;
  animation: td_spin 0.8s linear infinite;
}

@keyframes td_spin {
  to { transform: rotate(360deg); }
}

.td_error {
  padding: 16px;
  border-radius: 12px;
  background: #FFF0F0;
  border: 2px solid #E03030;
  color: #C02020;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 2px 2px 0 #E03030;
}

/* Holdings tab */
.td_summary_row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.td_summary_card {
  flex: 1;
  min-width: 120px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--td-card, #fff);
  border: 2px solid var(--td-ink, #2C2C2C);
  box-shadow: 3px 3px 0 var(--td-ink, #2C2C2C);
}

.td_summary_card_label {
  font-size: 10px;
  color: var(--td-muted, #888);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 700;
}

.td_summary_card_value {
  font-size: 18px;
  font-weight: 800;
  color: var(--td-ink, #2C2C2C);
  letter-spacing: -0.01em;
}

.td_summary_card_value.is_positive { color: #C02020; }
.td_summary_card_value.is_negative { color: #1A6FD4; }

.td_holdings_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.td_holdings_table th {
  padding: 8px 10px;
  text-align: left;
  color: var(--td-muted, #888);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--td-ink, #2C2C2C);
  background: var(--td-cream, #F0EDE6);
  white-space: nowrap;
}

.td_holdings_table td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(44, 44, 44, 0.1);
  color: var(--td-ink, #2C2C2C);
  white-space: nowrap;
  background: var(--td-card, #fff);
}

.td_holdings_table tr:last-child td { border-bottom: none; }

.td_pnl_positive { color: #C02020; font-weight: 700; }
.td_pnl_negative { color: #1A6FD4; font-weight: 700; }

/* 남은 일수 컬럼 */
.td_days_cell {
  text-align: center;
  min-width: 68px;
}

.td_days_remain {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: var(--td-ink, #2C2C2C);
  background: var(--td-mint, #6DC8A0);
  border: 1.5px solid var(--td-ink, #2C2C2C);
  border-radius: 10px;
  padding: 2px 8px;
  letter-spacing: 0.04em;
}

.td_days_remain.td_days_urgent {
  background: var(--td-yellow, #F5C842);
}

.td_days_dday {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: var(--td-ink, #2C2C2C);
  background: var(--td-yellow, #F5C842);
  border: 1.5px solid var(--td-ink, #2C2C2C);
  border-radius: 10px;
  padding: 2px 8px;
  letter-spacing: 0.04em;
}

.td_days_over {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: #E8504A;
  border: 1.5px solid #C02020;
  border-radius: 10px;
  padding: 2px 8px;
  letter-spacing: 0.04em;
}

.td_days_none {
  color: var(--td-muted, #888);
  font-size: 12px;
}

.td_days_type {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: var(--td-muted, #888);
  letter-spacing: 0.06em;
  margin-top: 3px;
  text-transform: uppercase;
}

.td_empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--td-muted, #888);
  font-size: 13px;
}

/* Strategies tab */
.td_strategy_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.td_strategy_card {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--td-card, #fff);
  border: 2px solid var(--td-ink, #2C2C2C);
  box-shadow: 3px 3px 0 var(--td-ink, #2C2C2C);
}

.td_strategy_head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.td_strategy_name {
  font-size: 14px;
  font-weight: 800;
  color: var(--td-ink, #2C2C2C);
}

.td_strategy_code {
  font-size: 11px;
  color: var(--td-muted, #888);
}

.td_badge {
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: auto;
  border: 2px solid var(--td-ink, #2C2C2C);
}

.td_badge_short {
  background: var(--td-yellow, #F5C842);
  color: var(--td-ink, #2C2C2C);
}

.td_badge_medium {
  background: var(--td-mint, #6DC8A0);
  color: var(--td-ink, #2C2C2C);
}

.td_confidence_bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(44, 44, 44, 0.1);
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid rgba(44, 44, 44, 0.1);
}

.td_confidence_bar_fill {
  height: 100%;
  border-radius: 2px;
  background: var(--td-mint, #6DC8A0);
  transition: width 0.4s ease;
}

.td_strategy_reason {
  font-size: 11px;
  color: var(--td-muted, #888);
  line-height: 1.5;
}

/* ── 추천 종목 표 형식 ────────────────────── */

.td_strat_header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.td_strat_date {
  font-size: 11px;
  color: var(--td-muted, #888);
  font-weight: 600;
}

.td_strat_pipeline {
  font-size: 12px;
  color: var(--td-ink, #2C2C2C);
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 20px;
  background: var(--td-cream, #F0EDE6);
  border: 2px solid var(--td-ink, #2C2C2C);
}

.td_strat_pipeline strong {
  color: #2A8C5A;
}

.td_strat_summary {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--td-card, #fff);
  border: 2px solid var(--td-ink, #2C2C2C);
  box-shadow: 2px 2px 0 var(--td-ink, #2C2C2C);
}

.td_strat_summary_row {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--td-ink, #2C2C2C);
  line-height: 1.5;
  margin-bottom: 4px;
}

.td_strat_summary_row:last-child { margin-bottom: 0; }

.td_strat_summary_label {
  color: var(--td-muted, #888);
  white-space: nowrap;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 1px;
}

.td_strat_section {
  margin-bottom: 20px;
}

.td_strat_section:last-child {
  margin-bottom: 0;
}

.td_strat_section_title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--td-ink, #2C2C2C);
  opacity: 0.55;
  margin-bottom: 8px;
}

.td_strat_section_sub {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--td-muted, #888);
  font-size: 10px;
  opacity: 1;
}

.td_table_wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 2px solid var(--td-ink, #2C2C2C);
  box-shadow: 2px 2px 0 var(--td-ink, #2C2C2C);
}

.td_strat_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 560px;
}

.td_strat_table th {
  padding: 8px 10px;
  text-align: left;
  color: var(--td-muted, #888);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--td-ink, #2C2C2C);
  background: var(--td-cream, #F0EDE6);
  white-space: nowrap;
}

.td_strat_table td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(44, 44, 44, 0.08);
  color: var(--td-ink, #2C2C2C);
  vertical-align: top;
  background: var(--td-card, #fff);
}

.td_strat_table tr:last-child td { border-bottom: none; }

.td_strat_rank {
  color: var(--td-muted, #888);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  width: 28px;
}

.td_sub {
  font-size: 10px;
  color: var(--td-muted, #888);
  display: block;
}

.td_hold_cell {
  text-align: center;
  font-size: 12px;
  color: var(--td-ink, #2C2C2C);
  font-weight: 600;
  white-space: nowrap;
  min-width: 56px;
}

.td_conf_wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 64px;
}

.td_conf_val {
  font-size: 12px;
  font-weight: 700;
  color: #2A8C5A;
}

.td_strat_reason_cell {
  font-size: 11px;
  color: var(--td-ink, #2C2C2C);
  opacity: 0.7;
  line-height: 1.5;
  max-width: 240px;
}

.td_strat_risk_cell {
  max-width: 160px;
}

.td_risk_text {
  font-size: 11px;
  color: #C02020;
  line-height: 1.5;
  font-weight: 600;
}

/* 1차 분석 표 */
.td_fp_table .td_score_cell {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  width: 42px;
  color: var(--td-ink, #2C2C2C);
}

.td_fp_table .td_score_composite {
  color: #2A8C5A;
}

/* Orders tab */
.td_orders_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.td_orders_table th {
  padding: 8px 10px;
  text-align: left;
  color: var(--td-muted, #888);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--td-ink, #2C2C2C);
  background: var(--td-cream, #F0EDE6);
  white-space: nowrap;
}

.td_orders_table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(44, 44, 44, 0.08);
  color: var(--td-ink, #2C2C2C);
  white-space: nowrap;
  background: var(--td-card, #fff);
}

.td_orders_table tr:last-child td { border-bottom: none; }

.td_dir_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 2px solid var(--td-ink, #2C2C2C);
}

.td_dir_buy {
  background: #FFE5E5;
  color: #C02020;
}

.td_dir_sell {
  background: #E5F0FF;
  color: #1A6FD4;
}

.td_status_badge {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  border: 1.5px solid var(--td-ink, #2C2C2C);
}

.td_status_accepted { background: #EBF5FF; color: #1A6FD4; }
.td_status_executed { background: #EDFBF3; color: #2A8C5A; }
.td_status_filled   { background: #EDFBF3; color: #2A8C5A; }
.td_status_pending  { background: #FFFBE6; color: #A07800; }
.td_status_placed   { background: #FFF0F5; color: #C06090; }
.td_status_canceled { background: #F5F5F5; color: #888888; }
.td_status_rejected { background: #FFF0F0; color: #C02020; }
.td_status_expired  { background: #F5F5F5; color: #888888; }
.td_status_failed   { background: #FFF0F0; color: #C02020; }
.td_status_skipped  { background: #F5F5F5; color: #888888; }

/* System status tab */
.td_status_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.td_status_section {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--td-card, #fff);
  border: 2px solid var(--td-ink, #2C2C2C);
  box-shadow: 3px 3px 0 var(--td-ink, #2C2C2C);
}

.td_status_section_title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--td-muted, #888);
  margin-bottom: 10px;
}

.td_status_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--td-ink, #2C2C2C);
  opacity: 0.7;
  gap: 8px;
}

.td_status_row:last-child { margin-bottom: 0; }

.td_status_row_val {
  color: var(--td-ink, #2C2C2C);
  opacity: 1;
  font-weight: 700;
  text-align: right;
  word-break: break-all;
}

.td_dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--td-ink, #2C2C2C);
}

.td_dot_green { background: #6DC8A0; box-shadow: none; }
.td_dot_red   { background: #F4839A; box-shadow: none; }
.td_dot_gray  { background: #C8C8C8; }

.td_jobs_list {
  margin-top: 6px;
}

.td_job_row {
  font-size: 11px;
  color: var(--td-muted, #888);
  margin-bottom: 4px;
  line-height: 1.4;
}

.td_job_name {
  color: var(--td-ink, #2C2C2C);
  font-weight: 700;
}

@media (max-width: 640px) {
  .td_holdings_table th:nth-child(n+4),
  .td_holdings_table td:nth-child(n+4) { display: none; }
  .td_orders_table th:nth-child(n+4),
  .td_orders_table td:nth-child(n+4)   { display: none; }
  .td_status_grid { grid-template-columns: 1fr; }
}

.landing_clock_body {
  padding: 56px 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.landing_clock_city {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin: 0 0 16px;
}

.landing_clock_ampm {
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  align-self: flex-start;
  margin-left: 4px;
  line-height: 1;
}

.landing_clock_display {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 4px 0 20px;
  line-height: 1;
}

.landing_clock_time {
  font-size: 92px;
  font-weight: 100;
  letter-spacing: -0.04em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  font-family: -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  line-height: 1;
}

.landing_clock_seconds {
  font-size: 38px;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.38);
  font-variant-numeric: tabular-nums;
  font-family: -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  line-height: 1;
  padding-bottom: 12px;
}

.landing_clock_date {
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.38);
  margin: 0;
}

@media (max-width: 420px) {
  /* 640px 모바일 3D 원반 캐러셀 설정 유지 - drum은 width/height 0 (3D 좌표 원점) */
  .vision_carousel_row {
    gap: 0;
  }
}

@media (max-width: 440px) {
  .landing_clock_shell {
    width: calc(100vw - 32px);
    border-radius: 20px;
  }

  .landing_clock_time {
    font-size: 72px;
  }

  .landing_clock_seconds {
    font-size: 30px;
    padding-bottom: 8px;
  }
}

/* ===========================
   게시글 상세 독립 페이지 (lbp_)
   =========================== */

.lbp_page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f2f2f3 0%, #dadbdd 44%, #cfd1d4 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px 80px;
  box-sizing: border-box;
}

/* 브라우저 쉘 페이지 모디파이어 */
.landing_browser_shell--page {
  width: 100%;
  max-width: 1100px;
  max-height: none;
  will-change: auto;
  transform: none;
  transition: none;
}

.landing_browser_shell--page .lbp_chrome {
  height: auto;
  min-height: calc(100vh - 120px);
}

.landing_browser_shell--page .lbp_body {
  overflow-y: visible;
  min-height: 0;
}

/* 윈도우 컨트롤 닫기 버튼 링크 스타일 */
.lbp_dot_close {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

/* 헤더 */
.lbp_header {
  padding-bottom: 0;
  border-bottom: none;
}

.lbp_site_title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: #1e293b;
}

.lbp_site_link {
  color: inherit;
  text-decoration: none;
}

.lbp_site_link:hover {
  color: #2563eb;
}

/* 사이드바 링크 스타일 */
.landing_browser_detail_sidebar .landing_browser_sidebar_item {
  text-decoration: none;
  color: inherit;
}

/* 페이지네이션 링크 스타일 */
.landing_browser_detail_pagination_item {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 댓글 로그인 링크 */
.lnr_comment_login_link {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}

.lnr_comment_login_link:hover {
  background: #1d4ed8;
}

@media (max-width: 640px) {
  .lbp_page {
    padding: 16px 12px 60px;
  }

  .landing_browser_shell--page .landing_browser_toolbar {
    padding-left: 16px;
  }
}

/* ── 맞춤법 검사 모달 ── */
.landing_browser_spell_overlay {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  border-radius: 16px;
}

.landing_browser_spell_overlay.is_open {
  visibility: visible;
  opacity: 1;
}

.landing_browser_spell_modal {
  background: #fff;
  border-radius: 16px;
  width: 560px;
  max-width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 14px 28px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.landing_browser_spell_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.landing_browser_spell_title_wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing_browser_spell_icon {
  font-size: 15px;
  line-height: 1;
}

.landing_browser_spell_title {
  font-size: 16px;
  font-weight: 700;
  color: #1a202c;
  letter-spacing: -0.02em;
}

.landing_browser_spell_badge {
  background: #006fee;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
}

.landing_browser_spell_badge.is_zero {
  background: #22c55e;
}

.landing_browser_spell_close {
  background: #f4f4f5;
  border: none;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #71717a;
  font-size: 14px;
  transition: background 0.15s;
  flex-shrink: 0;
}

.landing_browser_spell_close:hover {
  background: #e4e4e7;
  color: #18181b;
}

.landing_browser_spell_result {
  overflow-y: auto;
  flex: 1;
  padding: 14px 20px;
}

.landing_browser_spell_loading {
  text-align: center;
  padding: 40px 24px;
  color: #71717a;
}

.landing_browser_spell_spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e4e4e7;
  border-top-color: #006fee;
  border-radius: 50%;
  animation: spell_spin 0.7s linear infinite;
  margin: 0 auto 12px;
}

@keyframes spell_spin {
  to { transform: rotate(360deg); }
}

.landing_browser_spell_no_error {
  text-align: center;
  padding: 40px 24px;
}

.landing_browser_spell_no_error_icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.landing_browser_spell_no_error_text {
  color: #15803d;
  font-weight: 700;
  font-size: 15px;
}

.landing_browser_spell_no_error_sub {
  color: #71717a;
  font-size: 13px;
  margin-top: 4px;
}

.landing_browser_spell_item {
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}

.landing_browser_spell_item:last-child {
  margin-bottom: 0;
}

.landing_browser_spell_item:hover {
  border-color: #a1a1aa;
}

.landing_browser_spell_diff {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.landing_browser_spell_original {
  background: #fff1f2;
  color: #be123c;
  font-weight: 600;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #fecdd3;
  text-decoration: line-through;
  text-decoration-color: #fb7185;
}

.landing_browser_spell_arrow {
  color: #a1a1aa;
  font-size: 13px;
  flex-shrink: 0;
}

.landing_browser_spell_suggestion {
  background: #f0fdf4;
  color: #15803d;
  font-weight: 700;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #bbf7d0;
}

.landing_browser_spell_help {
  color: #71717a;
  font-size: 12px;
  margin-bottom: 8px;
  line-height: 1.5;
}

.landing_browser_spell_apply_btn {
  background: #006fee;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.landing_browser_spell_apply_btn:hover {
  background: #005bc4;
}

.landing_browser_spell_footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}

/* ─── Settings Modal ─────────────────────────────────────── */
.landing_settings_modal {
  z-index: 40;
}

.landing_settings_panel {
  width: min(320px, calc(100vw - 32px));
  padding: 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 34px 90px rgba(42, 48, 58, 0.28);
  color: #1d2330;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  text-align: center;
}

.landing_settings_name {
  margin: 0 0 1.6rem;
  font-size: 1.6rem;
  line-height: 1.1;
  word-break: break-all;
}

.landing_settings_logout {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #ff5a5a, #ff3366);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(255, 60, 80, 0.26);
  transition: opacity 0.15s;
}

.landing_settings_logout:hover {
  opacity: 0.88;
}