/* ============ 토큰 (Design Tokens) ============ */
  :root{
    --ink:#1C1815;
    --ink-soft:#2C2620;
    --paper:#F1ECE0;
    --paper-deep:#E7DFCC;
    --paper-deeper:#DCD2B9;
    --accent:#F28F1B;
    --accent-deep:#9C5A0F;
    --line: rgba(28,24,21,0.16);
    --line-soft: rgba(28,24,21,0.09);
    --line-dark: rgba(241,236,224,0.22);
    --line-dark-soft: rgba(241,236,224,0.12);
    --radius: 4px;
    --font-body: 'IBM Plex Sans KR','IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    --font-mono: 'IBM Plex Mono',ui-monospace,monospace;
    --container: 1160px;
    --nav-h: 76px;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  h1,h2,h3,p,ul{ margin:0; }
  ul{ padding:0; list-style:none; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
  input{ font:inherit; color:inherit; }
  ::selection{ background:var(--accent); color:var(--paper); }
  section[id], footer[id]{ scroll-margin-top: calc(var(--nav-h) + 8px); }

  :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  }

  .container{ max-width:var(--container); margin:0 auto; padding:0 clamp(20px,5vw,48px); }
  .container-narrow{ max-width:760px; }
  .section{ padding-block:clamp(4.5rem,10vw,7.5rem); position:relative; }
  .section-head{ margin-bottom:clamp(2.25rem,5vw,3.25rem); }
  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.8rem;
    font-weight:600;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--accent-deep);
    margin-bottom:0.9rem;
  }
  .section-title{
    font-size:clamp(1.7rem,4vw,2.6rem);
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.3;
    max-width:18ch;
  }

  /* ============ 편집 모드 (Edit mode) ============ */
  /* edit-only는 상태 유틸리티 클래스이므로 다른 컴포넌트의 display 선언과 충돌하지 않도록 !important로 항상 우선합니다 */
  .edit-only{ display:none !important; }
  body.edit-mode .edit-only{ display:flex !important; }
  body.edit-mode .edit-only.is-inline{ display:inline-flex !important; }

  body.edit-mode [contenteditable="true"]{
    outline:1px dashed rgba(242,143,27,0.55);
    outline-offset:4px;
    border-radius:2px;
    cursor:text;
    transition:background-color .15s;
  }
  body.edit-mode [contenteditable="true"]:hover{ background:rgba(242,143,27,0.08); }
  body.edit-mode [contenteditable="true"]:focus{ outline:2px solid var(--accent); background:rgba(242,143,27,0.1); }
  [contenteditable]:empty:before{
    content:attr(data-placeholder);
    opacity:0.4;
  }

  .admin-bar{
    position:fixed; top:0; left:0; right:0; z-index:500;
    background:var(--ink); color:var(--paper);
    align-items:center; justify-content:center; gap:1.25rem;
    padding:0.7rem 1.25rem;
    flex-wrap:wrap;
    font-family:var(--font-mono);
    box-shadow:0 2px 14px rgba(0,0,0,.25);
  }
  .admin-label{ font-size:0.78rem; opacity:0.85; letter-spacing:0.01em; }
  .admin-btn{
    font-family:var(--font-mono);
    font-size:0.78rem; font-weight:600; letter-spacing:0.04em;
    padding:0.5rem 0.9rem; border-radius:var(--radius);
    background:var(--accent); color:var(--ink);
  }
  .admin-btn:hover{ background:#F4A03D; }
  .admin-btn-ghost{ background:transparent; color:var(--paper); border:1px solid var(--line-dark); }
  .admin-btn-ghost:hover{ border-color:var(--paper); }

  .edit-fab{
    position:fixed; bottom:22px; right:22px; z-index:499;
    width:50px; height:50px; border-radius:50%;
    background:var(--ink); color:var(--paper);
    display:flex; align-items:center; justify-content:center;
    font-size:1.15rem;
    box-shadow:0 4px 18px rgba(0,0,0,.3);
  }
  .edit-fab:hover{ background:var(--ink-soft); }
  body.edit-mode .edit-fab{ background:var(--accent); color:var(--ink); }

  /* ============ 내비게이션 (Nav) ============ */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:200;
    height:var(--nav-h);
    display:flex; align-items:center;
    background:transparent;
    border-bottom:1px solid transparent;
    transition:background-color .3s ease, border-color .3s ease;
  }
  body.edit-mode .nav{ top:42px; }
  .nav.solid{
    background:rgba(241,236,224,0.94);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-bottom-color:var(--line);
  }
  .nav-inner{
    width:100%; max-width:var(--container); margin:0 auto;
    padding:0 clamp(20px,5vw,48px);
    display:flex; align-items:center; justify-content:space-between;
    position:relative;
  }
  .nav-logo{
    position:relative; display:inline-flex; align-items:center;
    height:clamp(15px,2.4vw,19px);
  }
  .nav-logo-img{
    display:block; height:100%; width:auto;
    transition:opacity .3s ease;
  }
  .nav-logo-dark{ position:absolute; top:0; left:0; opacity:0; }
  .nav.solid .nav-logo-light{ opacity:0; }
  .nav.solid .nav-logo-dark{ opacity:1; }
  .nav-links{ display:flex; align-items:center; gap:clamp(0.9rem,2.4vw,2.4rem); }
  .nav-links a{
    font-family:var(--font-mono); font-size:clamp(0.68rem,1.1vw,0.8rem); font-weight:500;
    letter-spacing:0.07em; color:var(--paper); opacity:0.88;
    transition:color .3s, opacity .2s;
    padding:0.4rem 0; white-space:nowrap;
  }
  .nav-links a:hover{ opacity:1; color:var(--accent); }
  .nav.solid .nav-links a{ color:var(--ink); }
  .nav-toggle{ display:none; font-size:1.3rem; color:var(--paper); transition:color .3s; }
  .nav.solid .nav-toggle{ color:var(--ink); }

  @media (max-width:860px){
    .nav-toggle{ display:block; }
    .nav-links{
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column; align-items:flex-start; gap:0;
      background:var(--ink);
      max-height:0; overflow:hidden;
      transition:max-height .3s ease;
      border-bottom:1px solid var(--line-dark);
    }
    .nav-links.open{ max-height:280px; }
    .nav-links a{ color:var(--paper) !important; width:100%; padding:0.9rem clamp(20px,5vw,48px); border-top:1px solid var(--line-dark-soft); }
  }

  /* ============ 히어로 / 표지 (Hero / Cover) ============ */
  .hero{
    position:relative;
    min-height:100vh; min-height:100svh;
    background-color:var(--ink); color:var(--paper);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    overflow:hidden; text-align:center;
    padding:calc(var(--nav-h) + 2rem) 1.5rem 5rem;
  }
  .hero::before{
    content:''; position:absolute; inset:0;
    background-image:
      linear-gradient(var(--line-dark-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-dark-soft) 1px, transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:linear-gradient(to bottom, black, transparent 85%);
    mask-image:linear-gradient(to bottom, black, transparent 85%);
  }
  .hero::after{
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 55% 45% at 50% 42%, rgba(242,143,27,0.16), transparent 70%);
  }
  .hero-frame{
    position:relative; z-index:2;
    max-width:780px; width:100%;
    padding:clamp(2.2rem,6vw,3.6rem) clamp(1.2rem,5vw,3rem);
  }
  .reg-mark{ position:absolute; width:26px; height:26px; border:2px solid var(--accent); opacity:0.85; }
  .reg-tl{ top:0; left:0; border-right:none; border-bottom:none; }
  .reg-tr{ top:0; right:0; border-left:none; border-bottom:none; }
  .reg-bl{ bottom:0; left:0; border-right:none; border-top:none; }
  .reg-br{ bottom:0; right:0; border-left:none; border-top:none; }

  .hero-kicker{
    font-family:var(--font-mono); font-size:0.78rem; font-weight:500;
    letter-spacing:0.2em; text-transform:uppercase; color:var(--accent);
    margin-bottom:1.6rem;
  }
  .hero-title{
    margin-bottom:1.6rem; line-height:0;
  }
  .hero-title img{
    width:clamp(230px,44vw,600px); height:auto; display:inline-block;
  }
  .hero-tagline{
    font-size:clamp(1.2rem,3vw,1.65rem); font-weight:600;
    color:var(--paper); margin-bottom:1.1rem; line-height:1.5;
  }
  .hero-sub{
    font-size:clamp(0.95rem,1.6vw,1.05rem); color:rgba(241,236,224,0.72);
    max-width:46ch; margin:0 auto; line-height:1.75;
  }
  .scroll-cue{
    position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:0.6rem;
    font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.22em;
    color:rgba(241,236,224,0.55); z-index:2;
  }
  .scroll-cue span{
    width:1px; height:34px;
    background:linear-gradient(to bottom, var(--accent), transparent);
    animation:scrollpulse 1.8s ease-in-out infinite;
  }
  @keyframes scrollpulse{ 0%,100%{ opacity:0.35; } 50%{ opacity:1; } }

  /* ============ 스크롤 리빌 (Scroll reveal) ============ */
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.visible{ opacity:1; transform:translateY(0); }

  /* ============ MAIN 섹션 ============ */
  .main-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
  @media (min-width:700px){ .main-grid{ grid-template-columns:1fr 1fr; } }
  .main-card{
    position:relative; background:var(--paper); padding:2.2rem 2rem;
    transition:background-color .25s;
  }
  .main-card:hover{ background:var(--paper-deep); }
  .main-card-mark{
    display:block; width:10px; height:10px; background:var(--accent);
    margin-bottom:1.2rem;
  }
  .main-card h3{ font-size:1.2rem; font-weight:700; margin-bottom:0.7rem; }
  .main-card p{ font-size:0.96rem; color:var(--ink-soft); line-height:1.75; }
  .item-delete{
    position:absolute; top:0.9rem; right:0.9rem;
    width:26px; height:26px; align-items:center; justify-content:center;
    background:var(--paper-deeper); border-radius:50%;
    font-size:1rem; line-height:1; color:var(--ink);
    opacity:0.7;
  }
  .item-delete:hover{ opacity:1; background:#c8332f; color:#fff; }

  .add-btn{
    margin-top:2rem; display:inline-flex; align-items:center; gap:0.5rem;
    font-family:var(--font-mono); font-size:0.82rem; font-weight:600; letter-spacing:0.04em;
    padding:0.75rem 1.3rem; border:1px dashed var(--accent-deep); border-radius:var(--radius);
    color:var(--accent-deep);
  }
  .add-btn:hover{ background:rgba(242,143,27,0.1); }

  /* ============ ABOUT 섹션 ============ */
  .about-section{ background:var(--paper-deep); }
  .about-lead{
    font-size:clamp(1.4rem,3.2vw,2rem); font-weight:600; line-height:1.5;
    margin-bottom:2.2rem; padding-bottom:2.2rem; border-bottom:1px solid var(--line);
  }
  .about-body{ display:flex; flex-direction:column; gap:1.3rem; }
  .about-body p{ font-size:1.03rem; color:var(--ink-soft); line-height:1.85; }

  /* ============ TECHNOLOGY 섹션 ============ */
  .diagram-card{
    background:var(--paper-deep); border:1px solid var(--line);
    border-radius:var(--radius); padding:clamp(1.5rem,4vw,2.5rem);
    margin-bottom:clamp(3rem,6vw,4rem);
  }
  .diagram-wrap{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; }
  @media (min-width:860px){ .diagram-wrap{ grid-template-columns:1.4fr 1fr; gap:2.5rem; } }
  .diagram-wrap svg{ width:100%; height:auto; display:block; }
  .diagram-legend li{
    display:flex; gap:0.9rem; padding:0.75rem 0;
    border-top:1px solid var(--line);
    font-size:0.9rem; line-height:1.6;
  }
  .diagram-legend li:last-child{ border-bottom:1px solid var(--line); }
  .diagram-legend .num{
    font-family:var(--font-mono); font-weight:700; color:var(--accent-deep);
    flex-shrink:0; width:1.6rem;
  }
  .diagram-legend b{ font-weight:700; }
  .diagram-legend .editable{ color:var(--ink-soft); }

  .tech-list{ display:flex; flex-direction:column; }
  .tech-item{
    position:relative; display:grid; grid-template-columns:1fr; gap:0.4rem;
    padding:1.6rem 3rem 1.6rem 0; border-top:1px solid var(--line);
  }
  .tech-item:last-child{ border-bottom:1px solid var(--line); }
  @media (min-width:700px){ .tech-item{ grid-template-columns:minmax(200px,320px) 1fr; gap:2rem; align-items:baseline; } }
  .tech-item h3{ font-size:1.08rem; font-weight:700; }
  .tech-item p{ font-size:0.95rem; color:var(--ink-soft); line-height:1.75; }
  .tech-item .item-delete{ top:1.5rem; right:0; }

  /* ============ PRODUCT 섹션 ============ */
  .product-grid{ display:grid; grid-template-columns:1fr; gap:2.4rem; }
  @media (min-width:700px){ .product-grid{ grid-template-columns:1fr 1fr; } }
  .product-card{ position:relative; }
  .product-card .item-delete{ top:-0.5rem; right:-0.5rem; z-index:3; background:var(--paper); border:1px solid var(--line); }
  .product-fig{
    font-family:var(--font-mono); font-size:0.75rem; font-weight:600;
    letter-spacing:0.12em; color:var(--accent-deep); margin-bottom:0.7rem;
  }
  .product-image{
    position:relative; aspect-ratio:4/3; background:var(--paper-deep);
    border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
    display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem;
  }
  .product-img{ width:100%; height:100%; object-fit:cover; display:none; }
  .product-image[data-has-image="true"] .product-img{ display:block; }
  .product-image[data-has-image="true"] .image-placeholder{ display:none; }
  .image-placeholder{ display:flex; flex-direction:column; align-items:center; gap:0.6rem; color:var(--ink); opacity:0.4; }
  .image-placeholder svg{ width:74px; height:auto; }
  .image-placeholder span{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; }
  .change-image-btn{
    position:absolute; bottom:0.7rem; right:0.7rem;
    font-family:var(--font-mono); font-size:0.72rem; font-weight:600;
    padding:0.45rem 0.75rem; background:var(--ink); color:var(--paper); border-radius:var(--radius);
    opacity:0.9;
  }
  .change-image-btn:hover{ opacity:1; }
  .product-card h3{ font-size:1.25rem; font-weight:700; margin-bottom:0.9rem; }
  .tag-list{ display:flex; flex-wrap:wrap; gap:0.55rem; margin-bottom:1.4rem; }
  .tag{
    display:inline-flex; align-items:center; gap:0.4rem;
    background:var(--paper-deep); border:1px solid var(--line); border-radius:20px;
    padding:0.4rem 0.5rem 0.4rem 0.85rem; font-size:0.82rem;
  }
  .tag .tag-delete{ width:16px; height:16px; align-items:center; justify-content:center; opacity:0.55; font-size:0.85rem; }
  .tag .tag-delete:hover{ opacity:1; color:#c8332f; }
  .tag-add{
    font-family:var(--font-mono); font-size:0.78rem; font-weight:600;
    border:1px dashed var(--accent-deep); border-radius:20px; color:var(--accent-deep);
    padding:0.4rem 0.9rem;
  }
  .tag-add:hover{ background:rgba(242,143,27,0.1); }
  .product-cta{ display:flex; flex-direction:column; gap:0.6rem; align-items:flex-start; }
  .coupang-btn{
    display:inline-flex; align-items:center; gap:0.5rem;
    background:var(--ink); color:var(--paper);
    font-weight:600; font-size:0.92rem; padding:0.85rem 1.4rem; border-radius:var(--radius);
  }
  .coupang-btn:hover{ background:var(--ink-soft); }
  .coupang-btn::after{ content:'→'; transition:transform .2s; }
  .coupang-btn:hover::after{ transform:translateX(3px); }
  .cta-link-edit{ display:flex; flex-direction:column; gap:0.3rem; width:100%; }
  .cta-link-edit label{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.06em; color:var(--ink-soft); }
  .cta-link-edit input{
    width:100%; padding:0.55rem 0.7rem; background:var(--paper);
    border:1px solid var(--line); border-radius:var(--radius); font-size:0.82rem;
  }
  .cta-link-edit input:focus{ border-color:var(--accent); }

  /* ============ FOOTER ============ */
  .footer{
    position:relative; background:var(--ink); color:var(--paper);
    padding:clamp(3.5rem,8vw,5.5rem) 0 2.5rem; text-align:center; overflow:hidden;
  }
  .footer .container{ position:relative; z-index:2; }
  .footer-lockup{
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:clamp(1.3rem,3.4vw,1.9rem); font-weight:700;
    letter-spacing:0.02em; margin-bottom:1.3rem;
  }
  .footer-logo-img{ height:clamp(0.95em,3.1vw,1.05em); width:auto; display:block; }
  .footer-by{ color:var(--accent); font-weight:400; margin:0 0.15em; }
  .footer-line{
    max-width:52ch; margin:0 auto 2.6rem; color:rgba(241,236,224,0.68);
    font-size:0.96rem; line-height:1.75;
  }
  .footer-fine{
    font-family:var(--font-mono); font-size:0.72rem; color:rgba(241,236,224,0.4);
    padding-top:2rem; border-top:1px solid var(--line-dark-soft); letter-spacing:0.02em;
  }

  /* ============ 토스트 (Toast) ============ */
  .toast{
    position:fixed; bottom:28px; left:50%; z-index:600;
    transform:translateX(-50%) translateY(16px);
    background:var(--ink); color:var(--paper); font-family:var(--font-mono); font-size:0.85rem;
    padding:0.85rem 1.4rem; border-radius:var(--radius);
    opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
    box-shadow:0 6px 24px rgba(0,0,0,.3);
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }


  /* ============ 내비게이션 — 활성 링크 (Nav active state) ============ */
  .nav-links a{ position:relative; }
  .nav-links a.active{ color:var(--accent); opacity:1; }
  .nav-links a.active::after{
    content:''; position:absolute; left:0; right:0; bottom:-4px;
    height:2px; background:var(--accent);
  }
  .nav.solid .nav-links a.active{ color:var(--accent-deep); }
  .nav.solid .nav-links a.active::after{ background:var(--accent-deep); }
  @media (max-width:860px){
    .nav-links a.active{ color:var(--accent) !important; }
    .nav-links a.active::after{ display:none; }
    .nav-links a.active{ background:rgba(242,143,27,0.08); }
  }

  /* ============ 페이지 헤더 (Page header — sub-pages) ============ */
  .page-header{
    position:relative; background-color:var(--ink); color:var(--paper);
    text-align:center; overflow:hidden;
    padding:calc(var(--nav-h) + clamp(2.6rem,7vw,4.2rem)) 1.5rem clamp(2.6rem,7vw,4.2rem);
  }
  .page-header::before{
    content:''; position:absolute; inset:0;
    background-image:
      linear-gradient(var(--line-dark-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-dark-soft) 1px, transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:linear-gradient(to bottom, black, transparent 90%);
    mask-image:linear-gradient(to bottom, black, transparent 90%);
  }
  .page-header-inner{ position:relative; z-index:2; max-width:640px; margin:0 auto; }
  .page-header .eyebrow{ color:var(--accent); margin-bottom:1.1rem; }
  .page-header h1{
    font-size:clamp(1.9rem,5vw,3rem); font-weight:700;
    letter-spacing:-0.01em; line-height:1.25;
  }

  /* ============ 브랜드 필름 (Video / Film section — home) ============ */
  .video-card{
    background:var(--paper-deep); border:1px solid var(--line); border-radius:var(--radius);
    padding:clamp(1.2rem,3.5vw,2rem);
  }
  .video-frame{
    position:relative; width:100%; aspect-ratio:16/9; background:var(--ink);
    border-radius:calc(var(--radius) + 2px); overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .film-video{ width:100%; height:100%; object-fit:cover; display:none; background:#000; }
  .video-frame[data-has-video="true"] .film-video{ display:block; }
  .video-frame[data-has-video="true"] .video-placeholder{ display:none; }
  .video-placeholder{ display:flex; flex-direction:column; align-items:center; gap:0.75rem; color:var(--paper); opacity:0.55; }
  .video-placeholder svg{ width:52px; height:auto; }
  .video-placeholder span{ font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.06em; }
  .change-video-btn{
    position:absolute; bottom:0.9rem; right:0.9rem; z-index:2;
    font-family:var(--font-mono); font-size:0.75rem; font-weight:600;
    padding:0.55rem 0.9rem; background:var(--paper); color:var(--ink); border-radius:var(--radius);
    opacity:0.92;
  }
  .change-video-btn:hover{ opacity:1; }
  .video-caption{
    margin-top:1.4rem; padding:0 clamp(0.2rem,1vw,0.8rem);
    font-size:0.98rem; color:var(--ink-soft); line-height:1.8;
  }