/* =============================================================
   v2 ADDITIONS — nature palette, fonts, apps split, admin
   Loaded after styles.css; overrides where needed.
   ============================================================= */

/* ----- Accent color presets ----- */
body[data-accent="ocean"]    { --accent: #3D8BD0; --accent-2: #6FB088; --accent-3: #B8D4E8; --accent-4: #F0B987; }
body[data-accent="sky"]      { --accent: #5CA8E8; --accent-2: #B8D4E8; --accent-3: #E5EEF7; --accent-4: #FFD9B5; }
body[data-accent="forest"]   { --accent: #4F8F66; --accent-2: #C0D8B0; --accent-3: #E2EED3; --accent-4: #D8B98C; }
body[data-accent="sunset"]   { --accent: #E08A5C; --accent-2: #F0B987; --accent-3: #F5D0B8; --accent-4: #B8A0D8; }
body[data-accent="lavender"] { --accent: #8B7AC4; --accent-2: #C9B8EA; --accent-3: #E5DEF5; --accent-4: #F0B987; }

/* ----- Hero gradient presets ----- */
body[data-hero="sunrise"] { --g-hero: linear-gradient(180deg, #FFE3C2 0%, #FBD2A6 12%, #E8D4E2 28%, #C2DCEF 50%, #9EC7DE 72%, #B6D2C0 100%); }
body[data-hero="ocean"]   { --g-hero: linear-gradient(180deg, #DCEBF6 0%, #B6D7EE 35%, #87B9DC 70%, #4F8FBF 100%); }
body[data-hero="forest"]  { --g-hero: linear-gradient(180deg, #F2F0E0 0%, #DCE8C8 35%, #A8C49C 70%, #6F9374 100%); }
body[data-hero="dawn"]    { --g-hero: linear-gradient(180deg, #2B3A56 0%, #5C5F8A 30%, #C58E8A 65%, #F0C098 100%); }

/* ----- Font presets ----- */
body[data-font-ko="gungseo"]    { --ff-ko: "Nanum Myeongjo", "Batang", "GungSeo", serif; }
body[data-font-ko="pretendard"] { --ff-ko: "Pretendard", "Noto Sans KR", -apple-system, sans-serif; }
body[data-font-ko="inter"]      { --ff-ko: "Inter", -apple-system, sans-serif; }

body[data-font-en="times"]      { --ff-en: "Times New Roman", Times, serif; }
body[data-font-en="inter"]      { --ff-en: "Inter", -apple-system, sans-serif; }
body[data-font-en="fraunces"]   { --ff-en: "Fraunces", serif; }

body { font-family: var(--ff-ko, "Pretendard"), var(--ff-en, "Inter"), -apple-system, sans-serif; }
em { font-family: var(--ff-en, "Fraunces"), serif; }

/* ----- Density ----- */
body[data-density="tight"] .sec { padding-top: 60px !important; padding-bottom: 60px !important; }

/* ----- Reduced motion ----- */
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* ----- Toggle features ----- */
body.no-cursor .cursor-glow,
body.no-cursor .cursor-plane,
body.no-cursor .cursor-trail { display: none !important; }
body.no-cursor, body.no-cursor * { cursor: auto !important; }

body.no-hero3d .hero__scene,
body.no-hero3d canvas[data-hero3d] { display: none !important; }

/* =============================================================
   APPS — split layout (left list / right preview)
   ============================================================= */
.sec--apps .apps__grid { display: none !important; }

.apps__split {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 28px;
  margin-top: 60px;
  align-items: stretch;
  min-height: 560px;
  position: relative;
  z-index: 2;
}

.apps__list {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 8px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.7);
  align-self: start;
  /* When the list grows past the preview height, scroll inside the list
     instead of pushing the page layout. */
  max-height: 560px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.apps__list::-webkit-scrollbar { width: 6px; }
.apps__list::-webkit-scrollbar-thumb {
  background: rgba(26,35,51,0.18); border-radius: 3px;
}

.app-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  color: var(--ink);
  position: relative;
  border: 0;
  font-family: inherit;
}
.app-row:hover { background: rgba(255,255,255,0.7); transform: translateX(2px); }
.app-row.is-active {
  background: #fff;
  box-shadow: 0 6px 20px rgba(26,35,51,0.08);
}
.app-row.is-active::before {
  content: "";
  position: absolute; left: -1px; top: 14px; bottom: 14px;
  width: 3px; border-radius: 3px;
  background: var(--app-accent, var(--accent));
}
.app-row__chip {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(26,35,51,0.12);
}
.app-row__chip--fav {
  background: #fff;
  border: 1px solid rgba(26,35,51,0.08);
  box-shadow: 0 2px 6px rgba(26,35,51,0.08);
}
.app-row__fav {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: block;
  object-fit: contain;
}
.app-row__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.app-row__name { font-weight: 600; font-size: 14.5px; }
.app-row__tag { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px;
  text-transform: uppercase; letter-spacing: 0.06em; }
.app-row__status {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-mute);
}
.app-row__status--shipping { background: #6FB088; }
.app-row__status--building { background: #5CA8E8; animation: pulse 1.8s ease-in-out infinite; }
.app-row__status--idea     { background: #C9B8EA; }

/* Preview pane */
.preview {
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(26,35,51,0.06);
  min-height: 480px;
}
.preview--empty {
  align-items: center; justify-content: center;
  background: var(--g-soft);
  color: var(--ink-mute);
  font-size: 14px;
}
.preview__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.preview__dots { display: flex; gap: 6px; }
.preview__dots i {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(0,0,0,0.12);
}
.preview__dots i:nth-child(1) { background: rgba(255,107,107,.55); }
.preview__dots i:nth-child(2) { background: rgba(255,204,74,.55); }
.preview__dots i:nth-child(3) { background: rgba(111,176,136,.55); }
.preview__url {
  flex: 1; font-size: 12px; color: var(--ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.preview__open {
  font-size: 12px; padding: 5px 10px;
  border-radius: 999px;
  background: var(--app-accent, var(--accent));
  color: #fff; display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none;
  transition: transform .15s;
}
.preview__open:hover { transform: translateY(-1px); }
.preview__open--disabled { opacity: 0.5; pointer-events: none; }
.preview__body {
  flex: 1; position: relative; background: #f6f8fb;
  min-height: 380px;
}
.preview__frame, .preview__media {
  width: 100%; height: 100%; min-height: 380px;
  border: 0; display: block;
  object-fit: cover;
}
.preview__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; color: var(--ink-mute);
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
}
.preview__placeholder svg { color: var(--app-accent, var(--accent)); opacity: 0.7; }
.preview__caption {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}
.preview__caption h3 {
  margin: 0 0 4px;
  font-family: var(--ff-en, "Fraunces"), serif;
  font-weight: 500; font-size: 18px;
}
.preview__caption p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

@media (max-width: 880px) {
  .apps__split { grid-template-columns: 1fr; min-height: auto; }
  .preview { min-height: 420px; }
  .apps__list { max-height: none; }
}

/* =============================================================
   ADMIN PANEL — extras: hobby photo, app reorder/add
   ============================================================= */
.admin__photo {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(26,35,51,0.08);
}
.admin__app-list {
  display: flex; flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
}
.admin__app--add {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  margin-bottom: 6px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(26,35,51,0.1);
}
.admin__app-add {
  background: #DCEED6; color: #3E6E4F;
  border: 0; border-radius: 10px;
  padding: 0 14px; font-weight: 600; cursor: pointer;
  font-size: 13px;
}
.admin__app-add:disabled { opacity: 0.4; cursor: not-allowed; }
.admin__app-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.admin__app-reorder {
  display: flex; gap: 2px;
}
.admin__app-reorder button {
  width: 22px; height: 22px;
  border: 1px solid rgba(26,35,51,0.15);
  background: #fff; border-radius: 6px;
  cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  padding: 0;
}
.admin__app-reorder button:hover:not(:disabled) {
  background: var(--paper-2); color: var(--ink);
}
.admin__app-reorder button:disabled { opacity: 0.3; cursor: not-allowed; }
.admin__app-del {
  margin-left: auto;
  width: 22px; height: 22px;
  border: 0; background: transparent;
  color: #c66; cursor: pointer; font-size: 18px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.admin__app-del:hover { background: rgba(204,102,102,0.1); }

/* =============================================================
   HOBBY PHOTO (when admin sets one)
   ============================================================= */
.hob__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
}

/* =============================================================
   CONTACT FORM — two-column rows for compact fields
   ============================================================= */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}
.topic-row--compact { gap: 6px; }
.topic-row--compact .topic-chip { padding: 6px 12px; font-size: 12.5px; }

/* =============================================================
   PASTEL BUTTONS + topic chips
   ============================================================= */
.btn--pastel-white {
  background: #ffffff; color: var(--ink);
  border: 1px solid rgba(26,35,51,0.12);
  padding: 10px 18px; border-radius: 999px;
  font-weight: 500;
}
.btn--pastel-white:hover { background: #f4f7fb; }
.btn--pastel-green {
  background: #DCEED6; color: #3E6E4F;
  padding: 10px 18px; border-radius: 999px;
  font-weight: 500;
}
.btn--pastel-green:hover { background: #C9E5C0; }
.btn--pastel-blue {
  background: #D6E6F5; color: #2E6BA8;
  padding: 10px 18px; border-radius: 999px;
  font-weight: 500;
}
.btn--pastel-blue:hover { background: #C2D8EE; }

.topic-row { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-chip {
  padding: 9px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  background: #fff;
  border: 1px solid rgba(26,35,51,0.12);
  color: var(--ink-soft);
  cursor: pointer;
  transition: transform .15s, background .2s, color .2s, box-shadow .2s;
}
.topic-chip:hover { transform: translateY(-1px); }
.topic-chip:nth-child(1) { background: #fff; color: var(--ink); }
.topic-chip:nth-child(1).on { box-shadow: 0 4px 12px rgba(0,0,0,.08); border-color: var(--ink); }
.topic-chip:nth-child(2) { background: #DCEED6; color: #3E6E4F; border-color: rgba(62,110,79,.18); }
.topic-chip:nth-child(2).on { background: #C9E5C0; box-shadow: 0 4px 12px rgba(62,110,79,.18); }
.topic-chip:nth-child(3) { background: #D6E6F5; color: #2E6BA8; border-color: rgba(46,107,168,.18); }
.topic-chip:nth-child(3).on { background: #C2D8EE; box-shadow: 0 4px 12px rgba(46,107,168,.18); }

/* =============================================================
   ADMIN PANEL
   ============================================================= */
.admin-fab {
  position: fixed; right: 22px; bottom: 22px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(26,35,51,0.18);
  border: 1px solid var(--line);
  cursor: pointer;
  z-index: 998;
  transition: transform .2s, background .2s;
}
.admin-fab:hover { transform: rotate(35deg); background: var(--accent-3); }

.admin-backdrop {
  position: fixed; inset: 0;
  background: rgba(26,35,51,0.18);
  backdrop-filter: blur(2px);
  z-index: 999;
  animation: fadeIn .2s ease;
}
.admin {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 360px; max-width: 90vw;
  background: #fff;
  z-index: 1000;
  display: flex; flex-direction: column;
  box-shadow: -10px 0 40px rgba(26,35,51,0.18);
  animation: slideInRight .25s ease;
}
@keyframes slideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.admin__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.admin__head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.admin__close {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2); cursor: pointer; color: var(--ink-soft);
  border: 0;
}
.admin__close:hover { background: rgba(26,35,51,0.08); }

.admin__body {
  flex: 1; overflow-y: auto;
  padding: 16px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.admin__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.admin__row label {
  font-size: 13px; color: var(--ink-soft);
  font-weight: 500;
}
.admin__row select {
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line-2);
  background: #fff; font-size: 13px;
  color: var(--ink);
  font-family: inherit;
}
.admin__row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

.admin__apps {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin__apps-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 2px 4px;
}
.admin__apps-head > span:first-child {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.admin__apps-sub {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.35;
}
.admin__app {
  padding: 10px 10px;
  background: var(--paper-2);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin__app-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.admin__app-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: #fff;
  font-size: 12.5px;
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.admin__swatches { display: flex; gap: 6px; }
.admin__sw {
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  outline: 1px solid var(--line);
  transition: transform .15s;
}
.admin__sw:hover { transform: scale(1.1); }
.admin__sw.on { border-color: var(--ink); outline-offset: 2px; }
.admin__sw--ocean    { background: #3D8BD0; }
.admin__sw--sky      { background: #5CA8E8; }
.admin__sw--forest   { background: #4F8F66; }
.admin__sw--sunset   { background: #E08A5C; }
.admin__sw--lavender { background: #8B7AC4; }

.admin__foot {
  display: flex; gap: 8px;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
}
.admin__foot .btn { flex: 1; }

@media (max-width: 600px) {
  .admin { width: 100%; }
}

/* ----- Server picker ----- */
.admin__server {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-2);
  display: flex; flex-direction: column; gap: 8px;
}
.admin__server-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 0 2px 4px;
}
.admin__server-refresh {
  background: var(--paper-2); border: 0;
  width: 24px; height: 24px; border-radius: 50%;
  cursor: pointer; color: var(--ink-soft); font-size: 13px;
}
.admin__server-refresh:hover { background: rgba(26,35,51,0.08); }
.admin__server-list { display: flex; flex-direction: column; gap: 6px; }
.admin__server-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--paper-2);
  border-radius: 10px;
  font-size: 13px;
}
.admin__server-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #c8d0dd; flex-shrink: 0;
}
.admin__server-dot.is-up   { background: #6FB088; box-shadow: 0 0 6px #6FB088; }
.admin__server-dot.is-down { background: #d97a7a; }
.admin__server-dot.is-check { background: #f0c040; animation: pulse 1s ease-in-out infinite; }
.admin__server-main { flex: 1; min-width: 0; }
.admin__server-name { font-weight: 600; color: var(--ink); }
.admin__server-ip {
  font-size: 11px; color: var(--ink-mute);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.admin__server-ms {
  font-size: 11px; color: var(--ink-mute);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.admin__server-go {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: var(--accent); border: 1px solid var(--line);
  cursor: pointer; font-weight: 700;
}
.admin__server-go:hover { background: var(--accent); color: #fff; }
.admin__server-auto { margin-top: 4px; }