/* ============================================================
   Atelier — White-based, Dior-inspired minimal design
   ============================================================ */

html, body { background: #ffffff; color: #0a0a0a; }
::selection { background: #0a0a0a; color: #ffffff; }

/* ==== カスタムカーソル ==== */
/* システムカーソルを常に表示（装飾カーソルは非表示） */
#cursor, #cursor-dot { display: none !important; }
a, button, .nav-link, .copy-btn, .btn-primary, .btn-ghost, .btn-danger, .file-drop, [role="button"] { cursor: pointer; }
input, textarea, select { cursor: text; }

.cursor {
  position: fixed; top: 0; left: 0; width: 32px; height: 32px;
  border: 1px solid #0a0a0a; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background-color .2s, width .25s, height .25s, border-color .2s;
  display: flex; align-items: center; justify-content: center;
}
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 4px; height: 4px;
  background: #0a0a0a; border-radius: 50%; pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
}
.cursor.is-link { width: 56px; height: 56px; background: rgba(10,10,10,0.06); }
.cursor.is-view { width: 96px; height: 96px; background: rgba(10,10,10,0.85); border-color: #0a0a0a; }
.cursor-label { font: 400 9px/1 'Inter', sans-serif; letter-spacing: 0.4em; color: #fff; opacity: 0; transition: opacity .2s; text-transform: uppercase; }
.cursor.is-view .cursor-label { opacity: 1; }

/* ==== ヘッダー ==== */
.site-header { background: rgba(255,255,255,0.0); }
.site-header.shrunk { background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); border-bottom: 1px solid #e7e3da; }
.header-line { display: none; }

.nav-link { position: relative; padding-bottom: 4px; transition: color .3s; font-weight: 400; }
.nav-link::after {
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#0a0a0a;
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.nav-link:hover::after { transform: scaleX(1); }

/* ==== ヒーロー ==== */
.hero { min-height: 88vh; display: flex; align-items: center; }
.hero-title { color: #0a0a0a; font-weight: 400; }
.hero-eyebrow { opacity: 0; transform: translateY(20px); }
.split-line { display: inline-block; overflow: hidden; }
.split-line > span { display: inline-block; }

/* ==== Masonry ==== */
.masonry { column-count: 1; column-gap: 36px; }
@media (min-width: 640px) { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }
@media (min-width: 1400px) { .masonry { column-count: 4; } }

.card {
  display: block; break-inside: avoid; margin-bottom: 60px; position: relative;
  text-decoration: none; color: inherit; background: transparent;
}

.card-image-wrap {
  position: relative; width: 100%; min-height: var(--card-h, 400px);
  overflow: hidden; background: #f3efe7;
}
.card-image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter .8s;
  opacity: 0;
}
.card-image.loaded { opacity: 1; }
.card:hover .card-image { transform: scale(1.04); }

.card-meta {
  padding: 22px 4px 0;
}
.card-meta > * { transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.card:hover .card-meta .font-display { opacity: 0.6; }

.card-tags { display: flex; flex-wrap: wrap; gap: 6px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .5s, max-height .6s cubic-bezier(.2,.7,.2,1); }
.card:hover .card-tags { opacity: 1; max-height: 80px; }
.card-tag { font: 300 10px/1.4 'Inter', sans-serif; color: #7a7268; padding: 3px 0; letter-spacing: 0.05em; }
.card-tag::after { content: '·'; margin: 0 4px; color: #c7c0b3; }
.card-tag:last-child::after { display: none; }

.card-status {
  position: absolute; top: 14px; left: 14px;
  font: 400 9px/1 'Inter', sans-serif; letter-spacing: 0.3em; text-transform: uppercase;
  padding: 6px 10px; backdrop-filter: blur(10px);
}
.status-public { background: rgba(255,255,255,0.92); color: #0a0a0a; }
.status-draft { background: rgba(255,255,255,0.7); color: #7a7268; border: 1px solid #e7e3da; }
.status-private { background: rgba(10,10,10,0.85); color: #fff; }

/* スケルトン */
.skeleton { min-height: var(--card-h, 400px); background: linear-gradient(90deg, #f3efe7 0%, #faf8f4 50%, #f3efe7 100%); background-size: 200% 100%; animation: shimmer 1.6s infinite; margin-bottom: 60px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ==== Reveal ==== */
.reveal, .reveal-card { opacity: 0; transform: translateY(30px); }
.is-revealed { opacity: 1 !important; transform: translateY(0) !important; transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }

/* ==== コントロール ==== */
.search-box { position: relative; }
.search-box input {
  background: transparent; border: none; border-bottom: 1px solid #0a0a0a;
  color: #0a0a0a; padding: 10px 32px 10px 0;
  font: 300 14px 'Inter', sans-serif; transition: border-color .3s; width: 100%;
}
.search-box input::placeholder { color: #b8afa1; }
.search-box input:focus { outline: none; }
.search-icon { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: #0a0a0a; font-size: 18px; }

.ctrl-select, .ctrl-toggle {
  background: transparent; border: 1px solid #0a0a0a; color: #0a0a0a;
  padding: 8px 16px; font: 400 10px 'Inter', sans-serif; letter-spacing: 0.25em; text-transform: uppercase;
  transition: all .3s;
}
.ctrl-select option { background: #ffffff; color: #0a0a0a; }
.ctrl-toggle:hover, .ctrl-select:hover { background: #0a0a0a; color: #fff; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font: 400 10px 'Inter', sans-serif; letter-spacing: 0.1em;
  padding: 5px 4px 5px 12px;
  background: #0a0a0a; color: #fff;
  animation: chipPop .3s cubic-bezier(.2,.7,.2,1);
}
@keyframes chipPop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.chip-x { background: transparent; border: none; color: #fff; padding: 0 8px; font-size: 14px; }
.chip-x:hover { opacity: 0.6; }

.tag-picker { background: #faf8f4; border: 1px solid #e7e3da; padding: 18px; }
.tag-picker input { background: transparent; border: none; border-bottom: 1px solid #0a0a0a; color: #0a0a0a; padding: 6px 0; width: 100%; font-size: 13px; font-family: 'Inter', sans-serif; }
.tag-picker input::placeholder { color: #b8afa1; }
.tag-picker input:focus { outline: none; }
.tag-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; max-height: 200px; overflow-y: auto; }
.tag-suggestion {
  font: 400 11px 'Inter', sans-serif; color: #0a0a0a;
  background: #ffffff; border: 1px solid #e7e3da;
  padding: 5px 12px; transition: all .2s; letter-spacing: 0.05em;
}
.tag-suggestion:hover { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }

.inline-suggestions { padding: 10px; background: #faf8f4; border: 1px solid #e7e3da; margin-top: 10px; }

/* ==== Detail ==== */
.detail-image-wrap { background: #f3efe7; overflow: hidden; }
.detail-image { width: 100%; height: auto; display: block; }

.status-pill { font: 400 9px 'Inter', sans-serif; letter-spacing: 0.3em; text-transform: uppercase; padding: 5px 12px; background: #0a0a0a; color: #fff; }
.status-pill.status-draft { background: #fff; color: #7a7268; border: 1px solid #e7e3da; }
.status-pill.status-private { background: #faf8f4; color: #0a0a0a; border: 1px solid #0a0a0a; }

.post-block { border-top: 1px solid #e7e3da; padding-top: 28px; }
.post-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.post-label { font: 400 11px 'Inter', sans-serif; letter-spacing: 0.5em; text-transform: uppercase; color: #0a0a0a; }
.post-desc { font-size: 14px; color: #1a1a1a; line-height: 1.95; white-space: pre-wrap; font-weight: 300; }
.post-tags { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 18px; }
.post-tag { font: 300 11px 'Inter', sans-serif; color: #7a7268; letter-spacing: 0.05em; }

.copy-btn {
  font: 400 10px 'Inter', sans-serif; letter-spacing: 0.3em; text-transform: uppercase;
  padding: 10px 18px; color: #fff; background: #0a0a0a; border: 1px solid #0a0a0a;
  transition: all .4s cubic-bezier(.2,.7,.2,1); position: relative; overflow: hidden;
}
.copy-btn:hover { background: #fff; color: #0a0a0a; }
.copy-btn[data-state="done"] { background: #fff; color: #0a0a0a; }

.btn-primary {
  display: inline-block; padding: 14px 32px; background: #0a0a0a; color: #fff;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: 0.35em; text-transform: uppercase;
  transition: all .3s; border: 1px solid #0a0a0a; cursor: pointer;
}
.btn-primary, .btn-primary * { color: #fff; }
.btn-primary:hover, .btn-primary:hover * { background: #fff; color: #0a0a0a; }
.btn-primary:disabled { opacity: 0.4; }

.btn-ghost {
  display: inline-block; padding: 14px 32px; border: 1px solid #0a0a0a; color: #0a0a0a;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: 0.35em; text-transform: uppercase;
  transition: all .3s; background: transparent; cursor: pointer;
}
.btn-ghost, .btn-ghost * { color: #0a0a0a; }
.btn-ghost:hover, .btn-ghost:hover * { background: #0a0a0a; color: #fff; }

.btn-danger {
  display: inline-block; padding: 14px 32px; border: 1px solid #b8afa1; color: #7a7268;
  font: 400 10px 'Inter', sans-serif; letter-spacing: 0.35em; text-transform: uppercase;
  transition: all .3s; background: transparent;
}
.btn-danger:hover { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }

/* ==== Form ==== */
.form-block { padding: 32px; background: #faf8f4; border: 1px solid #e7e3da; }
.form-block-title {
  font: 400 11px 'Inter', sans-serif; letter-spacing: 0.5em; text-transform: uppercase;
  color: #0a0a0a; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid #0a0a0a;
}

.float-field { position: relative; }
.float-field input, .float-field textarea, .float-field select {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid #b8afa1;
  padding: 22px 0 10px; color: #0a0a0a;
  font: 300 15px 'Noto Serif JP', serif;
  transition: border-color .3s;
}
.float-field textarea { font-family: 'Noto Serif JP', serif; resize: vertical; }
.float-field input:focus, .float-field textarea:focus, .float-field select:focus { outline: none; border-color: #0a0a0a; }
.float-field label {
  position: absolute; left: 0; top: 22px;
  font: 300 14px 'Inter', sans-serif; color: #b8afa1;
  pointer-events: none; transition: all .3s cubic-bezier(.2,.7,.2,1);
}
.float-field input:not(:placeholder-shown) + label,
.float-field textarea:not(:placeholder-shown) + label,
.float-field input:focus + label,
.float-field textarea:focus + label,
.float-field select + label {
  top: 0; font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: #0a0a0a;
}
.float-field select { padding-top: 24px; appearance: none; background: transparent; }
.float-field select option { background: #fff; color: #0a0a0a; }

/* ==== Image drop ==== */
.image-drop {
  position: relative; min-height: 460px; background: #faf8f4;
  border: 1px dashed #b8afa1;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s; overflow: hidden;
}
.image-drop.dragging { border-color: #0a0a0a; background: #fff; }
.image-drop-placeholder { text-align: center; padding: 40px; }
.image-drop-placeholder .font-serif, .image-drop-placeholder > div:first-child {
  font-family: 'Italiana', 'Cormorant Garamond', serif !important;
  color: #b8afa1 !important;
  font-style: normal !important;
}
.image-pick-btn {
  position: absolute; bottom: 18px; right: 18px;
  padding: 9px 16px; background: #0a0a0a; color: #fff;
  border: none; font: 400 10px 'Inter', sans-serif; letter-spacing: 0.25em; text-transform: uppercase;
  transition: all .3s;
}
.image-pick-btn:hover { background: #fff; color: #0a0a0a; outline: 1px solid #0a0a0a; outline-offset: -1px; }

/* ==== Tag editor ==== */
.tag-editor {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 14px; background: #fff; border: 1px solid #e7e3da; min-height: 56px;
}
.tag-input {
  flex: 1; min-width: 140px; background: transparent; border: none; color: #0a0a0a;
  padding: 6px; font: 400 13px 'Inter', sans-serif;
}
.tag-input:focus { outline: none; }
.tag-input::placeholder { color: #b8afa1; }

/* ==== Tag analytics ==== */
.section-heading {
  font: 400 11px 'Inter', sans-serif; letter-spacing: 0.5em; text-transform: uppercase;
  color: #0a0a0a; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid #e7e3da;
  position: relative; overflow: hidden;
}
.section-heading::after {
  content:''; position: absolute; bottom: -1px; left: 0; width: 80px; height: 1px; background: #0a0a0a;
  animation: lineGrow 1.1s cubic-bezier(.2,.7,.2,1);
}
@keyframes lineGrow { from { width: 0; } to { width: 80px; } }

.cat-tile {
  padding: 32px 22px; background: #faf8f4; border: 1px solid #e7e3da; transition: all .3s;
}
.cat-tile:hover { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
.cat-tile:hover .text-ash, .cat-tile:hover * { color: #fff !important; }

.bar-row { display: grid; grid-template-columns: 1fr 100px 40px; gap: 14px; align-items: center; padding: 8px 0; font-size: 12px; }
.bar-label { color: #0a0a0a; font-family: 'Inter', sans-serif; font-weight: 400; letter-spacing: 0.05em; }
.bar-bg { height: 1px; background: #e7e3da; }
.bar-fill { height: 100%; background: #0a0a0a; transition: width 1s cubic-bezier(.2,.7,.2,1); }
.bar-cnt { text-align: right; color: #7a7268; font-family: 'Inter', sans-serif; font-weight: 300; }

.tag-cloud {
  display: flex; flex-wrap: wrap; gap: 16px 22px; line-height: 1.4;
  padding: 32px; background: #faf8f4; border: 1px solid #e7e3da;
}
.cloud-tag { color: #0a0a0a; font-family: 'Italiana', 'Cormorant Garamond', serif; transition: all .3s; font-weight: 400; }
.cloud-tag:hover { opacity: 0.5; transform: translateY(-2px); }
.cloud-cnt { font-size: 0.5em; color: #b8afa1; margin-left: 4px; vertical-align: super; font-family: 'Inter', sans-serif; }

.similar-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: #faf8f4; border: 1px solid #e7e3da;
}

/* ==== File drop ==== */
.file-drop {
  position: relative;
  min-height: 220px;
  background: #ffffff;
  border: 1px dashed #b8afa1;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 36px 24px;
  transition: all .35s cubic-bezier(.2,.7,.2,1);
}
.file-drop:hover { border-color: #0a0a0a; background: #faf8f4; }
.file-drop.dragging {
  border-color: #0a0a0a; background: #faf8f4;
  border-style: solid; transform: scale(1.005);
}
.file-drop.has-file { border-style: solid; border-color: #0a0a0a; background: #faf8f4; }

.file-drop-empty { pointer-events: none; }
.file-drop-icon {
  font-family: 'Inter', sans-serif;
  font-size: 32px; font-weight: 300; line-height: 1;
  color: #0a0a0a; margin-bottom: 18px;
  display: inline-block;
  width: 56px; height: 56px;
  border: 1px solid #0a0a0a; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.file-drop:hover .file-drop-icon, .file-drop.dragging .file-drop-icon {
  transform: translateY(4px);
}
.file-drop-filled { width: 100%; pointer-events: auto; }

.cli-block {
  background: #0a0a0a; color: #fff; padding: 16px;
  font: 400 12px 'Menlo', monospace; overflow-x: auto;
}

/* ==== Toast ==== */
.toast {
  position: fixed; bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(40px);
  background: #0a0a0a; color: #fff;
  padding: 16px 32px; font: 400 10px 'Inter', sans-serif;
  letter-spacing: 0.35em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
  transition: all .5s cubic-bezier(.2,.7,.2,1); z-index: 9000;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==== Data Table ==== */
.ctrl-text {
  background: #ffffff; border: 1px solid #e7e3da; color: #0a0a0a;
  padding: 10px 14px; font: 300 12px 'Inter', sans-serif;
  letter-spacing: 0.05em; outline: none; transition: border-color .2s;
}
.ctrl-text:focus { border-color: #0a0a0a; }
.ctrl-text::placeholder { color: #b5ac9f; letter-spacing: 0.1em; }

.data-table-wrap {
  border: 1px solid #e7e3da; background: #ffffff;
  overflow-x: auto; max-width: 100%;
}
.data-table {
  width: 100%; border-collapse: collapse;
  font: 300 12px 'Inter', 'Noto Serif JP', sans-serif; color: #1a1a1a;
}
.data-table thead th {
  background: #faf8f4; color: #0a0a0a;
  font: 500 9px 'Inter', sans-serif; letter-spacing: 0.3em;
  text-transform: uppercase; text-align: left;
  padding: 14px 12px; border-bottom: 1px solid #e7e3da; white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.data-table tbody tr { border-bottom: 1px solid #f3efe7; transition: background .15s; }
.data-table tbody tr:hover { background: #faf8f4; }
.data-table td {
  padding: 14px 12px; vertical-align: top; line-height: 1.55;
}
.dt-id { font-family: 'Menlo', monospace; font-size: 11px; color: #7a7268; letter-spacing: 0.05em; white-space: nowrap; }
.dt-title { font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; font-size: 14px; color: #0a0a0a; font-weight: 400; }
.dt-title-en { font-family: 'Cormorant Garamond', serif; font-style: italic; color: #7a7268; font-size: 12px; }
.dt-body-cell { color: #1a1a1a; max-width: 360px; }
.dt-tags-cell { max-width: 220px; }
.dt-tag {
  display: inline-block; background: #faf8f4; color: #1a1a1a;
  padding: 2px 8px; margin: 2px 3px 2px 0; font-size: 10px;
  border: 1px solid #f3efe7; letter-spacing: 0.02em;
}
.dt-link {
  display: inline-block; margin-left: 8px;
  font: 500 9px 'Inter', sans-serif; letter-spacing: 0.25em;
  text-transform: uppercase; color: #0a0a0a;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: border-color .15s;
}
.dt-link:hover { border-bottom-color: #0a0a0a; }