/*
 * コーポレートサイト（goocom.co.jp）から採った配色。
 * ライム #D8FF3D は白背景では読めないため、黒地の上でのみ使う。
 * 本文中のリンクには濃い方の #5C7A0F を使い、白地でも読める濃さを確保する。
 */
:root {
    --brand: #d8ff3d;
    --brand-deep: #5c7a0f;
    --ink: #0a0a0b;
    --page: #fafaf7;
    --card: #fff;
    --fg: #1c1c1c;
    --muted: #666;
    --line: #e4e4dd;
    --error: #c53030;
    /* 入力欄と、その横に並ぶボタンの共通の高さ。
       別々に決めると数pxずれ、横に並べたときに中心が合わない。 */
    --control-h: 37px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page);
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    color: var(--fg);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ヘッダー */
.site-header { background: var(--ink); }
.site-header-inner {
    max-width: 880px;
    margin: 0 auto;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
/*
 * align-items は center。baseline にすると画像の下端が文字のベースラインに
 * 揃うため、ロゴとサービス名の見た目の中心が数px ずれる。
 * line-height を 1 にしているのは、行の高さの差が中心のずれとして残らないようにするため。
 */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/*
 * ロゴは箱の中心ではなく「文字として見える塊」の中心で揃える。
 * goocom の g にディセンダがあるため、画像の箱は文字本体より下に 24px ぶん
 * 長い（600x88 の画像で、文字本体は 0-63 行、64行目以降は g の尻尾だけ）。
 * 箱の中心で揃えると文字の塊が上に寄って見える。
 *   画像の箱の中心 43.5 / 視覚的重心 33.7 / 文字帯の中心 31.5
 * 表示幅 110px では 1.8〜2.2px ぶん下げる計算になる。実際に見て 2px を採用。
 * 表示サイズを変えたらこの値も計算し直すこと。
 */
.brand img { display: block; height: auto; transform: translateY(2px); }
.brand-service { color: #9a9a9f; font-size: 12px; letter-spacing: 0.08em; line-height: 1; }
.site-nav { display: flex; align-items: center; gap: 18px; }
.site-nav a, .link-button {
    color: #f2f2ee;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}
.site-nav a:hover, .link-button:hover { color: var(--brand); }
/* ボタンを包む form。inline のままだとボタンが行の基準線に乗り、
   隣のリンクより 1px 弱下がる。flex にして中心を揃える。 */
.site-nav form { display: flex; align-items: center; }

/* フッター */
.site-footer {
    background: var(--ink);
    color: #5f5f65;
    font-size: 11px;
    text-align: center;
    padding: 14px 16px;
    letter-spacing: 0.02em;
}

.container { flex: 1; width: 100%; max-width: 880px; margin: 0 auto; padding: 32px 16px 48px; }

h1 { font-size: 21px; margin: 0 0 20px; font-weight: 600; }
/* 見出しのすぐ下の説明文は見出しに属するので、間隔を詰めて一組に見せる */
h1 + .muted { margin-top: -14px; margin-bottom: 24px; }
h2 { font-size: 16px; margin: 32px 0 12px; font-weight: 600; }

a { color: var(--brand-deep); }

/* カード。本文の主要なかたまりを白地で浮かせる */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

label { display: block; margin-bottom: 16px; font-size: 14px; }
input[type=email], input[type=password], input[type=text], select {
    height: var(--control-h);
}
input[type=email], input[type=password], input[type=text], textarea, select {
    display: block;
    width: 100%;
    padding: 9px 11px;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    color: var(--fg);
}
/* 選択肢は「7日」のように短い。全幅にすると箱だけが大きく残って不格好になる。
   直前の width:100% より後ろに置くこと（同じ強さなので後勝ちになる）。 */
select { width: auto; min-width: 180px; }

input:focus, textarea:focus, select:focus { outline: 2px solid var(--brand-deep); outline-offset: 1px; }

button {
    padding: 10px 22px;
    border: 0;
    border-radius: 4px;
    background: var(--ink);
    color: var(--brand);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
}
button:hover { background: #24242a; }
button:disabled { background: #e6e6de; color: #8f8f86; cursor: default; }
button:disabled:hover { background: #e6e6de; }

/* 文中に小さく置く補助ボタン（パスワードの表示切替など） */
button.subtle {
    padding: 6px 12px;
    font-size: 13px;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--line);
}
button.subtle:hover { background: #f0f0ea; color: var(--fg); }

.error { color: var(--error); font-size: 14px; }
.notice { color: #2f5d15; background: #f2f8e4; border: 1px solid #d5e6b0; border-radius: 4px; padding: 10px 12px; font-size: 14px; }
.muted { color: var(--muted); font-size: 13px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* 既定の vertical-align は baseline。行に入力欄が入ると、隣のセルの文字が
   入力欄の中の文字の高さに合わされ、欄の中心からずれて見える。 */
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-weight: 600; color: var(--muted); font-size: 13px; }

/*
 * 中の3行（説明・または・ボタン）は文字サイズが違うため、段落の margin に
 * 任せると行間が不揃いになり「または」が上の行に貼り付いて見える。
 * flex の gap で等間隔にし、余白を1か所で決める。
 */
.dropzone {
    border: 2px dashed #cfcfc6;
    border-radius: 8px;
    padding: 36px 16px;
    margin-bottom: 24px;
    background: var(--card);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}
.dropzone.over { border-color: var(--brand-deep); background: #f6f9ec; }
.dropzone p { margin: 0; }
.dropzone p:last-child { display: flex; gap: 12px; }
/* ダウンロードリンクは行の右端に置く。左に寄せると列の右側が大きく空き、
   行の重心が左に偏って落ち着かない。 */
.file-table th:last-child, .file-table td:last-child { text-align: right; }

/* 一覧カードの中では、最後の行の下線と合計行の余白が二重になるので整える。 */
#file-panel table { margin-bottom: 4px; }
#file-panel tbody tr:last-child td { border-bottom: 0; }
#file-panel #summary { margin: 0; }

/* 操作列は右端に寄せる。左に寄せると列の右側が大きく空き、行が締まらない。 */
.sent-table th:last-child, .sent-table td:last-child { text-align: right; }

/* 行末の操作ボタン。横に並べ、行が縦に伸びないようにする。 */
.row-actions { white-space: nowrap; }
.row-actions form { display: inline-flex; }
.row-actions form + form { margin-left: 6px; }
.row-actions button { height: var(--control-h); }
button.subtle.danger { color: var(--error); border-color: #e8c9c9; }
button.subtle.danger:hover { background: #fbf0f0; color: var(--error); }

td.state { white-space: nowrap; }
#share-url { width: 100%; font-family: monospace; }
textarea#mail-template { width: 100%; font-family: inherit; }

/* ラベル文字の下に入力欄がある形。下端で揃える。 */
.password-row { display: flex; align-items: flex-end; gap: 8px; }
.password-row label { flex: 1; margin-bottom: 0; }
.password-row button { height: var(--control-h); }

/*
 * 表の中で値を直に書き換える行。ラベルに文字が無いので、入力欄の
 * margin-top:4px（ラベル文字との隙間用）がそのまま上の余白として残り、
 * 入力欄が行の中心より2px下がる。ここでは打ち消す。
 * 入力欄の幅を抑えているのは、中身が数文字なのに箱だけ広いと
 * 一覧が「表」ではなく「フォーム」に見えるため。
 */
.inline-edit { display: flex; align-items: center; gap: 8px; }
.inline-edit label { flex: 1; max-width: 240px; margin: 0; }
.inline-edit input[type=text] { margin-top: 0; }
.inline-edit button { height: var(--control-h); }

@media (max-width: 560px) {
    .site-header-inner { flex-wrap: wrap; }
    .site-nav { gap: 14px; }
    .container { padding: 24px 16px 40px; }
}