/* 会社サイト（dotpict.com）の共通スタイル。index.html / 404.html の両方から読む。
   デザイン値は Flutter アプリ側の実装から移植している（core 側を変えたらここも追従させること）。 */

/* デザイントークン（packages/core/lib/theme/dp_colors.dart と対応） */
:root {
    --brand: #F06292;
    --brand80: #D24474;
    --mono00: #FFFFFF;
    --mono20: #EEEEF4;
    --mono30: #DFDFE8;
    --mono70: #5A5F69;
    --mono80: #313235;

    --header-height: 64px;
    --content-width: 840px;
}

*, *::before, *::after { box-sizing: border-box; }

/* ヘッダーが sticky なので、アンカーで飛んだ見出しがその下に潜らないようにする */
html { scroll-padding-top: calc(var(--header-height) + 16px); }

body {
    margin: 0;
    background: var(--mono20);
    color: var(--mono80);
    font-family: 'Murecho', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-size: 15px;
    line-height: 1.9;
}

a { color: var(--brand); }
a:hover { color: var(--brand80); }

/* DPPixelShape(pixelSize: 2, cornerSteps: 2) の階段状の角を CSS で再現。
   座標は packages/core/lib/widgets/shape/dp_pixel_shape.dart の _createPath と同一 */
.pixel {
    clip-path: polygon(
        0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
        calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
        100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
        4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
    );
}

/* ヘッダー（DPToolbar 相当。白背景・ロゴ左・ナビ右） */
.header {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--header-height);
    background: var(--mono00);
    border-bottom: 1px solid var(--mono30);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 24px;
}

.header-logo { display: flex; margin-right: auto; }
.header-logo img { display: block; width: auto; height: 28px; }

.header-nav { display: flex; gap: 24px; }

.header-nav a {
    color: var(--mono80);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.header-nav a:hover { color: var(--brand); }

/* レイアウト。要素セレクタ（main）にすると 404 の <main class="card"> にも効いてしまうため、
   クラスで限定する */
/* 下パディングは 0。カード下端からフッターまでの間隔は footer の上パディング 24px だけにして、
   カード同士の間隔（.card + .card の margin-top）と揃える */
.content {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 32px 24px 0;
}

.card {
    background: var(--mono00);
    padding: 32px;
}

.card + .card { margin-top: 24px; }

h1, h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
}

.lead {
    margin: 0;
    color: var(--mono70);
}

.stack { display: flex; flex-direction: column; gap: 16px; }

.hero-image {
    display: block;
    width: 100%;
    height: auto;
}

/* 特徴リスト。Font Awesome を使わずピクセル調の四角ブレットで表現する */
.features { margin: 0; padding: 0; list-style: none; }

.features li {
    position: relative;
    padding-left: 20px;
    color: var(--mono70);
}

.features li::before {
    content: '';
    position: absolute;
    top: calc((1.9em - 8px) / 2);
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--brand);
}

/* ストア導線。アプリ本体の PremiumPurchaseDialog と同じ構成
   （packages/main/lib/pages/premium/premium_purchase_dialog/premium_purchase_dialog_page.dart）。
   アプリアイコン48px + ストアバッジ高さ40・間隔8。
   カード内の他要素は左寄せだが、ここは CTA なので移植元に合わせて中央寄せにしている。

   2つのバッジは縦横比が違う（App Store 2.73:1 / Google Play 3.37:1）ため、高さを揃えると横幅は
   必ずずれる（歪ませずに両方を揃えることはできない）。そこで grid の2列にバッジを置き、
   アプリアイコンを「列1の右端 + gap の半分」＝2つのバッジの境目に合わせる。
   位置計算に使うのはアイコン幅(48)と gap(8) だけなので、バッジ画像を差し替えても崩れない */
.stores {
    display: inline-grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 8px;
}

/* アイコンとバッジはドット絵素材ではないので、.pixel（clip-path）も image-rendering も付けない */
.app-icon {
    grid-row: 1;
    grid-column: 1;
    justify-self: end;
    /* アイコン幅の半分だけはみ出させて中心を列1の右端に置き、さらに gap の半分だけ右へずらす */
    margin-right: -24px;
    position: relative;
    left: 4px;
    width: 48px;
    height: 48px;
}

/* 2列固定の前提。ストアリンクを3つ以上に増やすなら、列指定とアイコンの位置合わせも作り直すこと */
.stores a { grid-row: 2; }
.stores a:first-of-type { grid-column: 1; }
.stores a:last-of-type { grid-column: 2; }

.stores a img { display: block; width: auto; height: 40px; }

/* grid の2列は折り返さないので、狭幅ではバッジを縮めて収める（iPhone SE 幅 320px で実測して決定）。
   アイコンの位置合わせはアイコン幅と gap にしか依存しないため、高さを変えてもズレない */
@media (max-width: 360px) {
    .stores a img { height: 36px; }
}

/* DPPrimaryButton 相当（塗り・mono80背景・mono00文字・高さ48・fontSize16） */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    background: var(--mono80);
    color: var(--mono00);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.button:hover { color: var(--mono00); opacity: .8; }

/* clip-path は outline ごと切り落とすため、既定のフォーカスリングが見えなくなる。
   クリップ領域の内側に描かれる inset の box-shadow で代替する */
.button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--mono00);
}

/* 会社情報テーブル */
.info { width: 100%; border-collapse: collapse; }

.info th, .info td {
    padding: 12px 0;
    border-bottom: 1px solid var(--mono30);
    text-align: left;
    vertical-align: top;
}

.info tr:last-child th, .info tr:last-child td { border-bottom: none; }

.info th {
    width: 140px;
    font-weight: 700;
}

.info td { color: var(--mono70); }

footer {
    padding: 24px;
    color: var(--mono70);
    font-size: 13px;
    text-align: center;
}

/* --- 404 ページ（body.page-error）--- */

.page-error {
    min-height: 100vh;
    /* iOS Safari ではアドレスバー込みの高さになるため dvh を優先する */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    text-align: center;
}

.page-error .card {
    /* justify-content: center だと内容がビューポートより高いとき上端がはみ出して
       スクロールしても届かなくなるため、margin: auto で中央寄せする */
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 48px 40px;
}

.page-error .logo { display: block; width: auto; height: 28px; }

.page-error .code {
    margin: 0;
    color: var(--brand);
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
}

.page-error .message { margin: 0; color: var(--mono70); }

/* 印刷時はブラウザ既定で背景が出ないため、塗りのボタンが白地に白文字になって消える */
@media print {
    .button { background: none; color: var(--mono80); border: 2px solid var(--mono80); }
}

@media (max-width: 640px) {
    .card { padding: 24px 20px; }
    /* メディアクエリは詳細度を上げないため、.page-error .card (0,2,0) は上の .card (0,1,0) に
       負ける。404 側も狭幅で縮めるには同じ詳細度で明示的に上書きする必要がある */
    .page-error .card { padding: 32px 24px; }
    /* th/td を display:block にすると支援技術から表の行・見出しの対応が失われるため、
       縦積みにはせずラベル列を詰めるだけにする */
    .info th { width: 88px; }
    /* メールアドレスは @ も . も改行機会にならず分割不能な1語になるため、
       狭幅で td の min-content がテーブルを押し広げるのを防ぐ */
    .info td { overflow-wrap: anywhere; }
}