* { margin:0; padding:0; box-sizing:border-box; }
/* Always reserve the scrollbar so viewport width (100vw → --s scale) is
   identical on every page → layout never shifts when navigating. */
html { overflow-y:scroll; scrollbar-gutter:stable; }
body {
  background: var(--bg,#000000); color:var(--text,#ededed);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

/* ===== Animations ===== */
@keyframes fadeUp { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:translateY(0);} }
@keyframes fadeIn { from { opacity:0;} to { opacity:1;} }
/* custom(artboard) mode: secondary texts also scale with --s so the
   live site matches the editor uniformly (no fixed-rem outliers) */
body.custom .cat-head h1 { font-size:calc(30 * var(--s)); letter-spacing:calc(3 * var(--s)); margin-bottom:calc(26 * var(--s)); }
body.custom .cell-title { font-size:calc(14 * var(--s)); letter-spacing:calc(3.4 * var(--s)); }
body.custom .portfolio-title { font-size:calc(15 * var(--s)); letter-spacing:calc(4 * var(--s)); }
body.custom .empty { font-size:calc(16 * var(--s)); }
body.custom .masonry { columns:2; column-gap:calc(22 * var(--s)); }
/* text-type menus — position/size/orient/font come from the editor (tm_<id>) */
body.custom .text-menu:hover { color:var(--accent,#e50051); }

/* Sticky footer: content short → footer at viewport bottom;
   content tall → footer pushed below all content (scroll). */
body.custom { min-height:100vh; display:flex; flex-direction:column; }
body.custom .stage { flex:1 0 auto; }
body.custom .site-footer { flex-shrink:0; }
body.custom .m-item { margin-bottom:calc(22 * var(--s)); }

/* Entrance animations only on the HOME page. Category/other pages keep the
   chrome static (no re-animation when clicking a grid/menu to go deeper). */
body.custom:not(.home) .side-label,
body.custom:not(.home) .main-menu a,
body.custom:not(.home) .side-text,
body.custom:not(.home) .cell { animation:none !important; opacity:1 !important; transform:none !important; }

/* ===== Stage (desktop 3-zone grid) ===== */
.stage {
  max-width:var(--content-maxwidth,1180px); margin:0 auto; min-height:100vh;
  display:grid;
  grid-template-columns:var(--side-col-width,230px) minmax(0,1fr) 46px;
  grid-template-rows:auto auto auto 1fr;
  grid-template-areas:
    "logo  grid side"
    "label grid side"
    "menu  grid side"
    ".     grid side";
  column-gap:44px; align-items:start;
  padding:66px 30px 70px;
}

/* Logo */
.brand { grid-area:logo; display:inline-block; }
.logo { width:var(--logo-size,177px); max-width:100%; height:auto; display:block; }

/* EPISODIC MEMORY label (separate element) */
.side-label {
  grid-area:label; align-self:end; text-align:var(--menu-align,right);
  font-size:var(--menu-label-size,1.4rem); font-weight:300; letter-spacing:.02em; line-height:1.25;
  color:var(--menu-label-color,#8a8a8a); margin-bottom:16px; text-transform:uppercase;
  animation:fadeIn .7s ease both .1s;
}

/* Menu (categories) */
.side { grid-area:menu; align-self:start; text-align:var(--menu-align,right); }
.main-menu { display:flex; flex-direction:column; gap:12px; }
/* current menu highlight (works on both default + custom artboard layout) */
.main-menu a.active { color:var(--accent,#e50051) !important; font-weight:800 !important; }
.main-menu a {
  font-size:var(--menu-font-size,.92rem); letter-spacing:.16em; text-transform:uppercase; color:#dcdcdc;
  opacity:0; animation:fadeUp .5s ease both; animation-delay:calc(var(--i) * .12s + .25s);
  transition:color .2s;
}
.main-menu a:hover { color:var(--accent,#e50051); }

/* Center content */
.content { grid-area:grid; align-self:center; width:100%; }

/* Right vertical text */
.side-text {
  grid-area:side; align-self:var(--side-text-valign,center);
  writing-mode:vertical-rl; text-orientation:upright;
  letter-spacing:var(--side-text-spacing,.5em); font-size:var(--side-text-size,.86rem);
  color:var(--side-text-color,#7d7d7d); white-space:nowrap;
  animation:fadeIn 1.2s ease both .5s;
}

/* Hamburger — hidden on desktop */
.toggle {
  display:none; width:30px; height:16px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between; padding:0; z-index:60;
}
.toggle span { display:block; height:2px; width:100%; background:#ededed; transition:.3s; }
body.menu-open .toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .toggle span:nth-child(2){ opacity:0; }
body.menu-open .toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Footer */
.site-footer {
  position:fixed; bottom:0; left:0; right:0; text-align:center;
  font-size:var(--footer-size,.72rem); letter-spacing:.05em; color:#6f6f6f; padding:16px; pointer-events:none;
}

/* ===== Portfolio category grid (home) ===== */
.grid {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--grid-gap,22px);
  max-width:var(--grid-maxwidth,600px); margin:0 auto; grid-auto-flow:row dense;
}
.cell {
  position:relative; overflow:hidden; border-radius:var(--grid-radius,0);
  background:#161616; border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  opacity:0; animation:fadeUp .6s ease both;
}
/* cell shapes */
.cell.shape-square { aspect-ratio:1/1; }
.cell.shape-tall   { aspect-ratio:1/2; grid-row:span 2; }
.cell.shape-wide   { grid-column:1 / -1; aspect-ratio:12/5; }
/* slideshow */
.cell.slideshow .slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; z-index:0; }
.cell.slideshow .slide.on { opacity:1; z-index:1; }
.cell.slideshow.fx-fade .slide { transition:opacity 1s ease; }
.cell.slideshow.fx-slide .slide { transition:opacity .7s ease, transform .7s ease; transform:translateX(35%); }
.cell.slideshow.fx-slide .slide.on { transform:translateX(0); }
.cell.slideshow.fx-zoom .slide { transition:opacity 1s ease, transform 1.4s ease; transform:scale(1.18); }
.cell.slideshow.fx-zoom .slide.on { transform:scale(1); }
.cell:nth-child(1){ animation-delay:.30s; }
.cell:nth-child(2){ animation-delay:.42s; }
.cell:nth-child(3){ animation-delay:.54s; }
.cell:nth-child(4){ animation-delay:.66s; }
.cell:nth-child(5){ animation-delay:.78s; }
.cell img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .5s ease; }
.cell:hover img { transform:scale(1.05); filter:brightness(.45); }
.cell-body { position:relative; z-index:2; }
.cell-title {
  font-size:.86rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:#e8e8e8;
}
.cell img ~ .cell-body { opacity:0; transition:opacity .35s; }
.cell:hover img ~ .cell-body { opacity:1; }

/* ===== Category page masonry ===== */
.cat-head h1 { font-weight:800; font-size:1.8rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:26px; }
.group-head { font-weight:600; font-size:1.1rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent,#e50051); margin:30px 0 14px; }
body.custom .group-head { font-size:calc(18 * var(--s)); letter-spacing:calc(2 * var(--s)); margin:calc(30 * var(--s)) 0 calc(16 * var(--s)); }
.masonry { columns:2; column-gap:22px; list-style:none; }
@media (max-width:720px){ .masonry { columns:1; } }
.m-item { break-inside:avoid; margin-bottom:22px; }
.item-link { position:relative; display:block; overflow:hidden; background:#0d0d0d; }
.item-link img { width:100%; height:auto; transition:transform .5s ease, filter .5s ease; }
.item-link:hover img { transform:scale(1.04); filter:brightness(.4); }
.portfolio-text-holder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:.35s; }
.item-link:hover .portfolio-text-holder { opacity:1; }
.portfolio-title { font-size:.9rem; letter-spacing:.28em; text-transform:uppercase; font-weight:600; }

/* ===== Lightbox ===== */
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.96); display:none; align-items:center; justify-content:center; padding:6vh 5vw; }
.lightbox.open { display:flex; }
.lb-inner { display:flex; gap:40px; align-items:center; max-width:92vw; max-height:88vh; }
.lb-imgwrap { flex:0 1 auto; display:flex; }
.lb-imgwrap img { max-width:62vw; max-height:82vh; width:auto; height:auto; }
.lb-text { flex:0 0 300px; max-width:300px; color:#ededed; align-self:center; }
.lb-date { font-size:.75rem; color:#7d7d7d; letter-spacing:.06em; margin-bottom:10px; }
.lb-title { font-size:1.3rem; font-weight:600; margin-bottom:16px; letter-spacing:.02em; }
.lb-body { font-size:.92rem; line-height:1.7; opacity:.85; white-space:pre-wrap; max-height:60vh; overflow-y:auto; }
.lb-close { position:fixed; top:22px; right:34px; font-size:2rem; color:#fff; cursor:pointer; line-height:1; z-index:2; }
@media (max-width:720px){ .lb-inner { flex-direction:column; gap:18px; } .lb-imgwrap img { max-width:88vw; max-height:55vh; } .lb-text { flex:none; max-width:88vw; } }

/* 2-line content preview on hover (masonry items) */
.portfolio-excerpt { font-size:.78rem; line-height:1.5; opacity:.8; margin-top:8px; max-width:80%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.portfolio-text-holder { flex-direction:column; padding:14px; text-align:center; }

/* ===== Text pages ===== */
.page { max-width:680px; }
.page h1 { font-weight:800; font-size:2.1rem; letter-spacing:.02em; margin-bottom:28px; text-transform:uppercase; }
.prose { opacity:.85; font-size:1.02rem; }
.post-img { width:100%; margin:24px 0; }

/* About page: rich HTML intro (floated images) + contact list */
.about-page { max-width:820px; }
.about-body { line-height:1.85; }
.about-body::after { content:''; display:block; clear:both; }
.about-body img { max-width:100%; height:auto; border-radius:2px; }
.about-body h2 { font-size:1.5rem; font-weight:600; margin:1em 0 .5em; text-transform:none; }
.about-body h3 { font-size:1.2rem; font-weight:600; margin:1em 0 .4em; }
.about-body a { color:var(--accent,#e50051); text-decoration:underline; }
.about-body p { margin:0 0 1em; }
.about-contact { margin-top:44px; border-top:1px solid rgba(255,255,255,.14); padding-top:26px; }
.ac-row { display:flex; gap:18px; align-items:baseline; padding:9px 0; font-size:.98rem; }
.ac-k { min-width:104px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.5; }
.ac-row a:hover { color:var(--accent,#e50051); }
@media (max-width:720px){ .ac-row { flex-direction:column; gap:3px; } .ac-k { min-width:0; } }

.post-list { list-style:none; }
.post-list li { border-bottom:1px solid rgba(255,255,255,.09); }
.post-list a { display:flex; gap:20px; align-items:baseline; padding:22px 4px; transition:.2s; }
.post-list a:hover { padding-left:12px; color:var(--accent,#e50051); }
.post-date { font-size:.76rem; opacity:.45; letter-spacing:.1em; min-width:92px; }
.post-title { font-size:1.1rem; font-weight:400; }
.back { display:inline-block; margin-top:44px; opacity:.6; font-size:.85rem; }
.contact p { margin:14px 0; opacity:.85; }
.social { margin-top:26px; display:flex; gap:22px; }
.social a { border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:2px; }
.empty { opacity:.5; padding:20px 0; }
.flash { background:var(--accent,#e50051); color:#fff; padding:11px; font-size:.85rem; margin-bottom:24px; }

/* ===== Admin ===== */
.admin { max-width:880px; }
.admin h1 { font-weight:800; margin-bottom:24px; text-transform:uppercase; }
.admin h2 { font-weight:600; margin:34px 0 14px; font-size:1.05rem; opacity:.9; }
.admin table { width:100%; border-collapse:collapse; }
.admin td, .admin th { padding:11px; border-bottom:1px solid rgba(255,255,255,.1); text-align:left; font-size:.9rem; vertical-align:middle; }
.btn { display:inline-block; background:var(--accent,#e50051); color:#fff; padding:10px 18px; font-size:.82rem; border:0; cursor:pointer; letter-spacing:.05em; }
.btn.ghost { background:transparent; color:#ededed; border:1px solid rgba(255,255,255,.25); }
.btn.danger { background:#e0483d; color:#fff; }
form.admin-form { display:flex; flex-direction:column; gap:16px; max-width:560px; }
.admin-form label { font-size:.74rem; opacity:.7; letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:6px; }
.admin-form input, .admin-form textarea, .admin-form select {
  width:100%; background:#111111; border:1px solid rgba(255,255,255,.15); color:#ededed; padding:12px; font-family:inherit; font-size:.95rem;
}
.admin-form input[type=color] { height:44px; padding:4px; }
.admin-form textarea { min-height:220px; resize:vertical; }
.row-actions { display:flex; gap:8px; align-items:center; }
.toolbar { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }

/* ===================================================
   MOBILE (iOS 반응형) — 햄버거 + 오버레이 메뉴
   =================================================== */
@media (max-width:900px) {
  .stage {
    display:block; max-width:520px; min-height:100vh;
    padding:96px 22px 70px;
  }
  /* Top bar: logo left, hamburger right (fixed) */
  .brand { position:fixed; top:24px; left:22px; z-index:60; }
  .logo { width:132px; }
  .toggle { display:flex; position:fixed; top:34px; right:24px; }

  /* Left menu → full-screen overlay (hidden until menu-open) */
  .side {
    position:fixed; inset:0; z-index:50; background:var(--bg,#000000);
    display:flex; flex-direction:column; justify-content:center; align-items:flex-end;
    text-align:right; padding:0 34px; gap:0;
    opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease;
  }
  body.menu-open { overflow:hidden; }
  body.menu-open .side { opacity:1; visibility:visible; }
  .side-label { display:none; }
  /* menu text slides DOWN when opened */
  .main-menu a {
    font-size:1.05rem; animation:none;
    opacity:0; transform:translateY(-18px);
    transition:opacity .5s ease, transform .5s ease;
    transition-delay:calc(var(--i) * .07s);
  }
  body.menu-open .main-menu a { opacity:1; transform:translateY(0); }

  /* Content grid stacks 1 column */
  .content { margin-top:8px; }
  .grid { grid-template-columns:1fr; max-width:100%; gap:20px; }
  .cell, .cell.wide { aspect-ratio:1/1; grid-column:auto; }

  /* Vertical text stays pinned right */
  .side-text { position:fixed; top:50%; right:14px; transform:translateY(-50%); font-size:.78rem; }
  body.menu-open .side-text { opacity:0; }

  .masonry { columns:1; }
}