/* ============================================================
   DOBAGAKI STYLE — twumo-portfolio 公開ページ用
   値の正典は リデザイン案.dc.html（実物）。
   食い違ったときは実物を優先する。
   ============================================================ */

:root {
  /* --- color --- */
  --dg-ink:        #3D3A3A;  /* 文字・輪郭。黒 (#000) は使わない */
  --dg-ink-70:     #6D6A68;  /* 本文 */
  --dg-ink-45:     #9A9793;  /* キャプション */
  --dg-ink-25:     #D8DCDC;  /* 無効・罫線 */
  --dg-cyan:       #1FE3E8;  /* 主CTA。「押せるもの」だけ */
  --dg-mint:       #62F0C4;  /* 強調・オフセット影・選択中 */
  --dg-cyan-50:    #EAFCFC;  /* 面 */
  --dg-mint-50:    #E9FDF4;  /* 面 */
  --dg-surface:    #F8FFFD;  /* うっすら色付きの背景 */
  --dg-base:       #FFFFFF;  /* 背景の8割 */
  --dg-danger:     #F25A5A;  /* 白地に 3.29:1。旧 #FF6B6B は 2.78:1 で WCAG 1.4.11 の 3:1 を割っていた */
  --dg-danger-ink: #CC3B3B;  /* 白地に 4.93:1。旧 #D64545 は 4.38:1 で AA を割っていた */

  /* --- type --- */
  --dg-font-jp: "Zen Kaku Gothic New", system-ui, sans-serif;
  /* Outfit は日本語グリフを持たない。JP フォールバックを挟まないと、
     この変数を使う和文（faq/price の見出しや「円」付きの数字）が
     system-ui 経由で訪問者の OS 依存フォントに落ちる。 */
  --dg-font-en: "Outfit", "Zen Kaku Gothic New", system-ui, sans-serif;

  /* --- radius --- */
  --dg-r-sm:   14px;   /* チップ内側・入力欄 */
  --dg-r-md:   18px;
  --dg-r-lg:   22px;   /* カード */
  --dg-r-xl:   26px;   /* モーダル */
  --dg-r-pill: 100px;

  /* --- outline & shadow --- */
  --dg-stroke: 2.5px;             /* 標準の墨線。小要素のみ 2px */
  --dg-shadow-ink:    5px 5px 0 var(--dg-ink);
  --dg-shadow-ink-sm: 4px 4px 0 var(--dg-ink);  /* 実物で最頻出の小要素用 */
  --dg-shadow-mint:   6px 6px 0 var(--dg-mint);
  --dg-shadow-cyan:   6px 6px 0 var(--dg-cyan);
  /* ぼかし影は使わない（唯一の例外：白背景のモーダル外側） */

  /* --- spacing scale (px) --- */
  /* 4 / 8 / 12 / 16 / 20 / 26 / 34 / 44 / 52 */

  /* --- motion --- */
  --dg-ease: cubic-bezier(.2,.8,.2,1);
  --dg-dur-fast:  120ms;
  --dg-dur-base:  300ms;
  --dg-dur-enter: 600ms;
}

/* ============ TYPE ============ */
.dg-display-stroke {
  color: transparent;
  -webkit-text-stroke: 2.5px var(--dg-ink);
}

/* ============ BUTTON ============ */
.dg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 34px;
  font: 900 14px var(--dg-font-jp);
  color: var(--dg-ink);
  background: var(--dg-cyan);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  box-shadow: var(--dg-shadow-ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dg-dur-fast) ease-out,
              box-shadow var(--dg-dur-fast) ease-out;
}
.dg-btn:hover  { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--dg-ink); }
.dg-btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--dg-ink); }
.dg-btn--ghost { background: var(--dg-base); box-shadow: none; }
.dg-btn--ghost:hover { transform: none; background: var(--dg-cyan-50); }
.dg-btn--ghost:active { transform: translate(2px, 2px); background: var(--dg-cyan-50); }

/* ヘッダー CTA。実物（リデザイン案.dc.html）準拠で cyan + 墨線 + 3px 影。
   ink 塗りの --sm とは別物なので新設した。仕様 A §3 の裁定を参照。 */
.dg-btn--compact {
  padding: 11px 22px; font-size: 12.5px;
  box-shadow: 3px 3px 0 var(--dg-ink);
}
.dg-btn--compact:hover  { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--dg-ink); }
.dg-btn--compact:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--dg-ink); }

.dg-btn--sm {
  padding: 12px 22px; font-size: 12.5px;
  background: var(--dg-ink); color: #fff; border: none; box-shadow: none;
}
.dg-btn--sm:hover { transform: none; box-shadow: none; }
.dg-btn--sm:active { transform: none; box-shadow: none; }
.dg-btn:disabled {
  background: #F0F2F2; border: var(--dg-stroke) solid var(--dg-ink-25); color: #B5B2AE;
  box-shadow: none; transform: none; cursor: not-allowed;
}

/* ============ CHIP (Works フィルタ) ============
   main.js は .active を付け外しする。aria-pressed は Task なしで
   計画2 にて同期させるため、両方のセレクタを拾っておく。 */
.dg-chip {
  padding: 9px 18px;
  font: 700 12px var(--dg-font-jp);
  color: var(--dg-ink);
  background: transparent;
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  cursor: pointer;
  transition: background var(--dg-dur-fast) ease-out;
}
.dg-chip:hover { background: var(--dg-cyan-50); }
/* cyan / mint の面には必ず color を宣言する。宣言しないと下地の CSS の
   白文字が残り、コントラスト約1.6:1 で読めなくなる（仕様A §11）。
   ink 塗りの --all だけは白文字でよい（約7.5:1）。 */
.dg-chip.active,
.dg-chip[aria-pressed="true"] { background: var(--dg-mint); color: var(--dg-ink); font-weight: 900; }
.dg-chip--all.active,
.dg-chip--all[aria-pressed="true"] { background: var(--dg-ink); color: #fff; }

/* ============ CARD ============ */
.dg-card {
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-lg);
  padding: 26px;
  background: var(--dg-base);
}
.dg-card--pop-cyan { box-shadow: var(--dg-shadow-cyan); }
.dg-card--pop-mint { box-shadow: var(--dg-shadow-mint); }
.dg-card--pop-ink  { box-shadow: 6px 6px 0 var(--dg-ink); }

/* ============ MASK LIBRARY ============
   画像は必ずいずれかでマスクする。直角の写真枠は使わない。
   グリッド内では ARCH→BLOB→SKEW→LEAF→PILL を循環させ、
   同じマスクを隣接させない。値は実物の実測（仕様 A §6.3）。 */
.dg-mask { overflow: hidden; border: var(--dg-stroke) solid var(--dg-ink); }
.dg-mask > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dg-mask--arch      { border-radius: 50% 50% 14px 14px / 45% 45% 14px 14px; }
.dg-mask--arch-lg   { border-radius: 50% 50% 18px 18px / 45% 45% 18px 18px; }
.dg-mask--arch-sm   { border-radius: 50% 50% 12px 12px / 45% 45% 12px 12px; }
.dg-mask--arch-flip { border-radius: 14px 14px 50% 50% / 14px 14px 45% 45%; }

.dg-mask--blob      { border-radius: 50% 50% 46% 54% / 48% 52% 48% 52%; }
.dg-mask--blob-2    { border-radius: 52% 48% 46% 54% / 48% 52% 48% 52%; }
.dg-mask--blob-3    { border-radius: 52% 48% 44% 56% / 48% 52% 48% 52%; }

.dg-mask--skew      { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }
.dg-mask--skew-2    { clip-path: polygon(0 8%, 100% 0, 95% 100%, 5% 92%); }

.dg-mask--leaf      { border-radius: 50% 14px 50% 14px; }
.dg-mask--leaf-flip { border-radius: 14px 50% 14px 50%; }

.dg-mask--pill      { border-radius: 999px; }
.dg-mask--circle    { border-radius: 50%; }
.dg-mask--soft      { border-radius: 14px; }

/* ============ WORK GRID (段差 + 傾き) ============ */
.dg-work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* 傾きと段差は7周期。4列グリッドに対して7は互いに素なので、
   行ごとにパターンがずれて同じ列に同じ傾きが揃わない。
   バンドルの dobagaki.css は4周期だったが実物は7周期（仕様A §3 により実物を優先）。 */
.dg-work-grid > *:nth-child(7n+1) { transform: rotate(-2deg);   margin-top: 0; }
.dg-work-grid > *:nth-child(7n+2) { transform: rotate(1.5deg);  margin-top: 16px; }
.dg-work-grid > *:nth-child(7n+3) { transform: rotate(-1deg);   margin-top: 0; }
.dg-work-grid > *:nth-child(7n+4) { transform: rotate(2.5deg);  margin-top: 10px; }
.dg-work-grid > *:nth-child(7n+5) { transform: rotate(1deg);    margin-top: 6px; }
.dg-work-grid > *:nth-child(7n+6) { transform: rotate(-2.5deg); margin-top: 18px; }
.dg-work-grid > *:nth-child(7n+7) { transform: rotate(2deg);    margin-top: 2px; }
.dg-work-grid > * { transition: transform var(--dg-dur-base) var(--dg-ease); }
@media (max-width: 900px) {
  .dg-work-grid { grid-template-columns: repeat(2, 1fr); }
  .dg-work-grid > *:nth-child(7n+1) { transform: rotate(-2deg); }
  .dg-work-grid > *:nth-child(7n+2) { transform: rotate(1.5deg); }
  .dg-work-grid > *:nth-child(7n+3) { transform: rotate(-1deg); }
  .dg-work-grid > *:nth-child(7n+4) { transform: rotate(2deg); }
  .dg-work-grid > *:nth-child(7n+5) { transform: rotate(1deg); }
  .dg-work-grid > *:nth-child(7n+6) { transform: rotate(-2deg); }
  .dg-work-grid > *:nth-child(7n+7) { transform: rotate(1.5deg); }
}

/* :hover はメディアクエリの「後ろ」に置く。@media はカスケード順を変えないため、
   同じ詳細度 (0,2,0) では後に書かれた方が勝つ。前に置くと、狭幅で
   nth-child の傾き上書きに負けてホバー効果が一切効かなくなる。 */
.dg-work-grid > *:hover { transform: rotate(0deg) scale(1.03); z-index: 2; }

/* ============ FORM FIELD ============ */
.dg-field {
  width: 100%; padding: 15px 16px;
  font: 500 13px var(--dg-font-jp); color: var(--dg-ink);
  background: var(--dg-base);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-sm);
  outline: none;
}
.dg-field::placeholder { color: #B5B2AE; }
.dg-field:focus { border-color: var(--dg-cyan); box-shadow: 0 0 0 4px var(--dg-cyan-50); }
.dg-field[aria-invalid="true"] { border-color: var(--dg-danger); }
.dg-field-error { margin-top: 6px; font: 500 11.5px var(--dg-font-jp); color: var(--dg-danger-ink); }

/* ============ MARQUEE ============
   同一テキストの <span> を2つ並べ、-50% まで移動させる */
.dg-marquee {
  overflow: hidden; padding: 10px 0;
  background: var(--dg-mint);
  border-block: var(--dg-stroke) solid var(--dg-ink);
}
.dg-marquee__track {
  display: flex; gap: 30px; width: max-content; white-space: nowrap;
  font: 900 12.5px var(--dg-font-en); letter-spacing: .1em; color: var(--dg-ink);
  animation: dg-mq 18s linear infinite;
}
@keyframes dg-mq { to { transform: translateX(-50%); } }
@media (max-width: 767px) { .dg-marquee__track { animation-duration: 14s; } }

/* ============ STICKER / PRICE TAG ============ */
.dg-sticker {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  background: var(--dg-cyan);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: 50%;
  width: 76px; height: 76px;
  font: 900 11px/1.35 var(--dg-font-jp); color: var(--dg-ink);
  animation: dg-float 5s ease-in-out infinite;
}
.dg-price-tag {
  display: inline-block; padding: 11px 16px;
  background: var(--dg-mint);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-sm);
  box-shadow: var(--dg-shadow-ink-sm);
  font: 900 13px var(--dg-font-en); color: var(--dg-ink);
  transform: rotate(5deg);
}
@keyframes dg-float {
  0%, 100% { transform: translateY(0)     rotate(-4deg); }
  50%      { transform: translateY(-12px) rotate(3deg); }
}

/* ============ MOBILE STICKY CTA ============ */
.dg-sticky-cta {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
  display: none; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--dg-cyan);
  /* cyan の面には必ず color を宣言する。宣言しないと中に .dg-btn--sm 以外の
     要素を置いたとき下地の白文字が残る（仕様A §11）。 */
  color: var(--dg-ink);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  box-shadow: var(--dg-shadow-ink-sm);
  animation: dg-pulse 2.6s ease-in-out infinite;
}
.dg-sticky-cta.is-visible { display: flex; }

/* 仕様A §7.10 は「画面08 モバイル」の項目。メディアガードが無いと
   デスクトップでも左右 12px の全幅バーとして出てしまう。 */
@media (min-width: 768px) {
  .dg-sticky-cta,
  .dg-sticky-cta.is-visible { display: none; }
}
@keyframes dg-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }

/* ============ SCROLL REVEAL ============
   IntersectionObserver で .is-in を付与する */
.dg-reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--dg-dur-enter) var(--dg-ease),
              transform var(--dg-dur-enter) var(--dg-ease);
}
.dg-reveal.is-in { opacity: 1; transform: none; }
.dg-reveal--stagger > * { transition-delay: calc(var(--i, 0) * 60ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .dg-reveal { opacity: 1; transform: none; }
}