/* ==========================================
0. CSS Variables（色の変数管理）
========================================== */
:root {
    /* ベースカラー */
    --bg-main: #FFFDE7;          /* 全体の背景（薄いクリーム） */
    --text-main: #5D4037;        /* 基本の文字色（濃い茶色） */
    --text-sub: #8d6e63;         /* 補足の文字色（薄い茶色） */
    
    /* アクセント・ブランドカラー */
    --brand-gold: #FFD05c;       /* タイトル等の金茶色 */
    --brand-border: #b0977b;     /* タイトルの縁取り */
    --accent-teal: #5DC9C4;      /* アクティブ時の青緑 */
    --accent-teal-dark: #00afa6; /* アクティブ時の枠線 */
    
    /* キャンバス・アップロードエリア */
    --canvas-bg: #F6ECC3;        /* キャンバス背景 */
    --canvas-stripe: #F3E6B5;    /* キャンバスの縞模様 */
    --canvas-border: #edd376;    /* キャンバス・入力欄の枠線 */
    --upload-bg: #F8E8C1;        /* アップロード箱の背景 */
    --upload-stripe-1: #f3e0c3;
    --upload-stripe-2: #f3dd7a;
    --upload-text: #AC7D5D;
    --upload-text-hover: #8a634a;

    /* ボタン・パネル */
    --panel-bg: #CEAB94;         /* パネルやボタンの背景色 */
    --panel-border: #BA8D6E;     /* パネルやボタンの枠線 */
    --btn-text: #ffffff;         /* ボタンの文字色 */
    --btn-send: #b2955c;         /* 送信ボタン */
    --btn-send-active: #8d6e63;  /* 送信ボタン（押した時） */
    
    /* その他 */
    --placeholder: #a3907e;      /* 入力欄のヒント色 */
}

/* ==========================================
1. Global Settings（全体の共通設定）
========================================== */
* {
    /* 全ての要素で、サイズ計算に枠線や余白を含める（レイアウト崩れを防ぐおまじない） */
    box-sizing: border-box;
}

body {
    /* レイアウト：配置（中身をどう並べるか） */
    display: flex;
    /* 要素を整列させるモードをオン */
    flex-direction: column;
    /* 中身を上から下に縦に並べる */
    /* レイアウト：サイズ（画面の広さ） */
    width: 100%;
    /* 横幅を画面いっぱい（100%）にする */
    height: 100vh;
    /* 高さを画面の表示領域いっぱい（100%）にする */
    margin: 0;
    /* 画面外側の余白をゼロにする */
    padding: 10px 15px;
    /* 上下を10px、左右を15pxの余白にする */
    /* 見た目（色や文字） */
    background: var(--bg-main);
    /* 画面全体の背景色（薄いクリーム色） */
    color: var(--text-main);
    /* 全体の文字色（濃い茶色） */
    font-family: sans-serif;
    /* 文字の形（飾りがないゴシック体） */
    /* 動作・制御（スクロールなど） */
    overflow: hidden;
    /* 画面からはみ出た部分を隠す（スクロールさせない） */
    overscroll-behavior: none;
    /* スマホ等で引っ張った時のバウンス効果をオフ */
    touch-action: none;
    /* 指での拡大縮小などの操作を無効化 */
}

/* ==========================================
2. Layout Structure（画面の骨組み・レイアウト）
========================================== */
.header {
    display: flex;
    /* 中身を横に並べる */
    align-items: flex-end;
    /* 中身を下揃えにする */
    gap: 15px;
    /* 隙間を微調整 */
    margin-bottom: 10px;
    /* 下側の隙間を少し詰める */
}

.header-controls {
    display: flex;
    gap: 8px;
    margin-left: auto; /* 右端に寄せる */
    padding-bottom: 5px;
}

.action-btn {
    padding: 6px 12px;
    font-size: 0.85em;
    font-weight: bold;
    color: var(--text-main);
    background: var(--upload-bg);
    border: 2px solid var(--canvas-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.1s;
}

.action-btn:active {
    transform: scale(0.95);
    background: var(--canvas-border);
}

.app-title {
    margin: 0;
    /* 文字の上下の余白を消す */
    font-size: 3em;
    /* 文字の大きさ（標準の2.4倍） */
    color: var(--brand-gold);
    /* タイトルの文字色（金茶色） */
    font-family:'Mochiy Pop One', sans-serif;
    /* 全体の縁取り設定 */
    -webkit-text-stroke: 7px var(--brand-border); /* 縁の太さと色 */
    
    /* 縁を外側に付けるように見せる設定（文字が細くなるのを防ぎます） */
    paint-order: stroke fill;
}


.main-container {
    display: flex;
    /* 左のキャンバスと右のパネルを横に並べる */
    flex: 1;
    /* 高さを可能な限り広げる */
    gap: 10px;
    /* キャンバスとパネルの間の隙間 */
    /* 重要：中身の動き（浮き上がり）を外に干渉させない */
    overflow: hidden;
    position: relative;
}

#viewport {
    position: relative;
    /* 子要素（アップロード画面）を配置する際の基準にする */
    flex: 75;
    /* 横幅の比率を75%に設定 */
    /* 下の見切れを防ぐため、余白分を引いた計算にする */
    height: calc(100% - 5px);
    margin-bottom: 5px;
    /* 見た目：背景・枠線 */
    background-color: var(--canvas-bg);
    /* キャンバス内の背景色 */
    background-image: repeating-linear-gradient(45deg,
            transparent,
            transparent 5px,
            var(--canvas-stripe) 5px,
            var(--canvas-stripe) 10px);
    /* 背景に45度の斜め線を引く設定 */
    border: 8px solid var(--canvas-border);
    /* 枠線の太さを統一 */
    border-radius: 16px;
    /* 角丸を大きな要素の基準値に統一 */
    /* 制御 */
    overflow: hidden;
    /* 枠からはみ出た画像を隠す */
    cursor: grab;
    /* マウスを乗せた時に「掴む手」の形にする */
}

.side-panel {
    display: flex;
    flex-direction: column;
    flex: 25;
    /* 横幅の比率を25%に設定 */
    padding: 0 15px;
    /* キャンバスよりほんの少しだけ短くして、収まりを良くする */
    height: calc(100% - 5px);
    /* ボタンの跳ね上がりをパネル内で完結させる */
    padding-top: 10px;
    align-self: flex-start;
    /* 浮き出たボタンや影を見せる */
    overflow: visible;
    margin-bottom: 5px;
    /* 各ブロック（パレットとの間など）の隙間を適度に設定 */
    gap: 6px;
}

/* ==========================================
3. Common UI Components（共通のパーツ：ボタンなど）
========================================== */
.control-panel {
    display: flex;
    /* 中身を横に並べる */
    align-items: center;
    /* 上下中央に揃える */
    /* シャドウが上下に見切れないように上下4pxの余白を確保 */
    padding: 1px 0;
    background: none;
    /* 背景なし */
    border: none;
    /* 枠線なし */
    /* 浮き出たボタンや影が見切れないようにする */
    overflow: visible;
}

.control-panel:first-child {
    margin-top: 0px;
}

.controls {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 4px;
    overflow: visible;
}

/* 比率と精度ボタンの高さ比率 */
#ratioButtons, 
#accuracyButtons {
    flex: 20;
}

/* パレットとモードボタンを横に並べるための親枠 */
.palette-and-modes {
    display: flex;
    flex: 80;
    gap: 10px;
    width: 100%;
    overflow: visible;
}

.button-grid {
    display: flex;
    flex-wrap: nowrap;
    /* ボタンを折り返さずに1列にする */
    gap: 4px;
    /* ボタン同士の隙間を4pxにする */
    width: 100%;
    /* 子要素（ボタン）の浮き上がりや影を隠さない */
    overflow: visible;
}

.toggle-btn {
    /* 配置 */
    display: flex;
    flex-direction: column;
    /* アイコンと文字を縦に並べる */
    align-items: center;
    /* 左右中央揃え */
    justify-content: center;
    /* 上下中央揃え */
    flex: 1;
    /* 横幅をボタン同士で均等に分ける */
    gap: 4px;
    /* アイコンと文字の間の隙間 */
    /* サイズ */
    min-width: 0;
    /* 横幅が狭くなっても潰れないようにする設定 */
     height: 60px;
    /* ボタンの高さを60pxにする */
    padding: 2px;
    /* ボタン内の余白 */
    /* 見た目 */
    background: var(--panel-bg);
    /* 通常時の背景色 */
    color: var(--btn-text);
    /* 通常時の文字・アイコンの色 */
    border: 4px solid var(--panel-border);
    /* 枠線の太さを4pxに微調整 */
    border-radius: 8px;
    /* 中サイズの角丸に統一 */
    /* 動作 */
    cursor: pointer;
    /* マウスを乗せた時に指先アイコンにする */
    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toggle-btn:active {
    /* クリックした瞬間：控えめに沈む */
    transform: scale(0.95);
}

.toggle-btn.active {
    /* ボタンが選択（アクティブ）されている時の設定 */
    background: var(--accent-teal);
    /* 背景色を明るい青緑にする */
    color: var(--btn-text);
    /* 文字・アイコンの色を白にする */
    border: 4px solid var(--accent-teal-dark);
    /* 枠線の色を変更 */
    /* 位置は動かさず、少しだけ大きくして選択中を強調 */
    transform: scale(1.05);
    /* 重なり順を最前面に */
    z-index: 10;
    font-weight: bold;
    /* 文字を太くする */
    /* 選択された瞬間の控えめなぷるん */
    animation: jelly 0.25s ease-out;
}

@keyframes jelly {
    0% { transform: scale(1.05); }
    40% { transform: scale(1.08, 0.96); }
    70% { transform: scale(1.04, 1.06); }
    100% { transform: scale(1.05, 1.05); }
}
/* ==========================================
4. Feature Specifics（特定の機能：比率やパレット）
========================================== */

/* --- 比率選択 (Ratio) --- */
.ratio-box {
    display: block;
    /* 図形の枠を表示する */
    box-sizing: border-box;
    /* サイズ計算を枠線込みにする */
    background: rgba(195, 145, 145, 0.1);
    /* 枠の中をうっすら塗る */
    border: 1.5px solid currentColor;
    /* 1.5pxの枠線を引く */
}

/* 各比率に応じた形の設定 */
.r-16-9 { width: 28px; aspect-ratio: 16 / 9; }
.r-4-3  { width: 24px; aspect-ratio: 4 / 3; }
.r-1-1  { width: 18px; aspect-ratio: 1 / 1; }
.r-3-4  { width: 15px; aspect-ratio: 3 / 4; }
.r-9-16 { width: 13px; aspect-ratio: 9 / 16; }

.ratio-text {
    font-size: 1.2em;
    /* 文字の大きさ */
    font-weight: bold;
    /* 文字を太くする */
}

.mode-text {
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1.2;
}
/* モード切り替えボタン専用の高さ調整 */
#modeButtons .toggle-btn {
    height: 32px;
    flex: none;
    gap: 0;
}

/* --- カラーパレット (Palette) --- */
.palette-group {
    display: flex;
    flex-direction: column;
    width: 50%; /* 横幅を元通りサイドパネルの半分に固定 */
    background: var(--panel-bg);
    border: 8px solid var(--panel-border);
    border-radius: 16px;
    overflow: hidden;
    min-height: 0;
}

/* モード切り替えボタンを右側に縦並び */
#modeButtons.button-grid {
    flex-direction: column; 
    flex: 1;                /* パレットの残りの幅をすべて使う */
    height: auto;           
    gap: 4px;
    flex-wrap: nowrap;      
}

.palette-group {
    display: flex;
    flex-direction: column;
    width: 50%; /* 横幅を元通りサイドパネルの半分に固定 */
    background: var(--panel-bg);
    border: 8px solid var(--panel-border);
    border-radius: 16px;
    overflow: hidden;
    min-height: 0;
}


.palette-header {
    display: flex;
    justify-content: center;
    /* 中身を左右中央に寄せる */
    align-items: center;
    gap: 0;
    padding: 5px 0 0 0;
    /* 上側だけに5pxの余白を作る */
    background: transparent;
    /* 背景は透明 */
}

.current-group-label {
    box-sizing: border-box;
    width: 30px;
    /* 中央の大きな色のプレビュー幅 */
    height: 60px;
    /* 高さを60pxにする */
    border: 3px solid #fff;
    /* 5pxの白い枠線 */
    border-radius: 0;
    /* 角は丸めない */
}

.nav-color-chip {
    box-sizing: border-box;
    width: 25px;
    /* 両端の小さな色のプレビュー幅 */
    height: 50px;
    /* 高さを50pxにする */
    border: 2px solid #fff;
    /* 2pxの白い枠線 */
    border-radius: 0;
    /* 角は丸めない */
    opacity: 1;
    /* 透明度（1は不透明） */
}

.palette-colors {
    display: grid;
    /* ボタンの横幅を固定して並べる */
    grid-template-columns: repeat(2, 65px);
    justify-content: center;
    align-content: start;
    /* ↓ ★ここを変えると横2列の間の隙間が変わります（0pxにすると密着します） */
    column-gap: 0px; 
    row-gap: 2px;    
    padding: 20px 0;
    flex: 1;
    overflow-y: auto;
}

.color-box {
    aspect-ratio: 1 / 1;
    /* ここは上の 65px と同じ数字にしてください */
    height: 65px; 
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* 1層目（最背面）：強調枠。元の画像の色を表示 */
.selection-rim {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('53_20260429110443.svg');
    background-size: contain;
    background-repeat: no-repeat;
    /* 強調のために少し大きくする */
    transform: scale(1.1);
    z-index: 0;
}

/* 選択されたボックス全体をまとめて拡大（太枠も一緒に大きくなる） */
.color-box.selected {
    transform: scale(1.08);
    z-index: 10;
    transition: transform 0.1s ease-out;
    /* 選択時に小さく弾むアニメーション */
    animation: color-pop 0.3s ease-out;
}

@keyframes color-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1.08); }
}

.color-box:active {
    /* 押し心地を優先し、沈み込みを浅く */
    transform: scale(0.9);
    transition: transform 0.05s;
}


/* 選択時に表示をオンにする */
.color-box.selected .selection-rim {
    display: block;
}

/* 2層目（中間）：中身の色。枠線からはみ出さないよう、わずかに小さく配置 */
.color-box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color-code);
    -webkit-mask-image: url('53_20260429110443.svg');
    mask-image: url('53_20260429110443.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    /* 1.0(100%)だとエッジがはみ出すことがあるため、0.98(98%)に絞る */
    transform: scale(0.98);
    z-index: 1;
}

/* 3層目（最前面）：通常の枠線。元の画像の色を表示 */
.color-box::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('53_20260428121313.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

.color-box.selected::after {
    z-index: 2; /* 枠線自体は元の位置・太さで上に重ねる */
}

/* --- グリッドアイコン (Grid Icon) --- */
.res-grid-icon {
    display: grid;
    width: 26px;
    /* アイコンの横幅 */
    height: 26px;
    /* アイコンの高さ */
    border: 1.5px solid currentColor;
    /* アイコンの外枠（文字色と同じ） */
}

.res-grid-icon span {
    border: 0.1px solid currentColor;
    /* アイコンの中の網目線の太さ */
}

/* 分割数ごとの設定（1x1から4x4まで） */
.grid-1x1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.grid-2x2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.grid-3x3 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.grid-4x4 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

/* --- アップロードエリア (Upload) --- */
.viewport-overlay {
    position: absolute;
    /* キャンバスの真上に重ねる */
    inset: 0;
    /* 上下左右いっぱいに広げる */
    display: flex;
    align-items: center;
    /* 上下中央揃え */
    justify-content: center;
    /* 左右中央揃え */
    pointer-events: none;
    /* このレイヤー自体はクリックを無視する（下のボタンには反応させる） */
}

.upload-container {
    pointer-events: auto;
    /* ここだけはクリックできるようにする */
    text-align: center;
    /* 中の文字を中央にする */
    background-color: var(--upload-bg);
    /* 背景色 */
    background-image: repeating-linear-gradient(45deg,
            transparent,
            transparent 5px,
            var(--upload-stripe-1) 5px,
            var(--upload-stripe-2) 10px);
    /* ストライプ模様の設定 */
    border: 7px solid var(--canvas-border);
    /* 7pxの太い枠線 */
    border-radius: 12px;
    /* 角を12px丸める */
    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.upload-container:active {
    /* クリックした瞬間：大きな面積に合わせて少し深めに、かつ滑らかに沈む */
    transform: scale(0.97);
    transition: transform 0.05s ease-out;
}

/* 離した瞬間に、元のサイズに戻りながら微かにぷるんとさせる */
.upload-container {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 300px;
    /* クリック可能なエリアの横幅 */
    height: 150px;
    /* クリック可能なエリアの高さ */
    color: var(--upload-text);
    /* 文字の色 */
    font-weight: bold;
    /* 文字を太くする */
    cursor: pointer;
}
.upload-label:hover {
    color: var(--upload-text-hover);
    /* マウスを乗せた時に文字色を少し濃くする */
}

/* --- メッセージ送信エリア (Message) --- */
.msg-container {
    display: flex;
    align-self: flex-end;
    /* 全体の中で下側に配置する */
    gap: 8px;
    /* 入力欄とボタンの間の隙間 */
    margin-left: auto;
    /* 右端に寄せる */
    padding-bottom: 5px;
    /* 下側の隙間 */
}

.msg-input {
    width: 220px;
    /* 入力欄の横幅 */
    padding: 6px 10px;
    /* 入力欄内の余白（上下 左右） */
    font-size: 0.85em;
    /* 文字の大きさ */
    color: var(--text-main);
    /* 入力する文字の色 */
    background: rgba(255, 255, 255, 0.9);
    /* 入力欄の背景（少し透明な白） */
    border: 2px solid var(--canvas-border);
    /* 2pxの枠線 */
    border-radius: 6px;
    /* 角を6px丸める */
    outline: none;
    /* クリックした時に出る青い線を消す */
}

.msg-input::placeholder {
    color: var(--placeholder);
    /* 入力前のヒント文字の色（薄い茶色） */
}

.msg-send-btn {
    padding: 6px 15px;
    /* ボタン内の余白 */
    font-size: 0.85em;
    font-weight: bold;
    color: var(--btn-text);
    /* ボタンの文字色（白） */
    white-space: nowrap;
    /* ボタン内の文字を改行させない */
    background: var(--btn-send);
    /* 通常時の背景色（金茶色） */
    border: none;
    /* 枠線をなしにする */
    border-radius: 6px;
    /* 角を6px丸める */
    cursor: pointer;
    /* 押した瞬間のアニメーション速度 */
    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.msg-send-btn:active {
    /* クリックした瞬間：色を濃い茶色に変え、ぷにっと縮小させる */
    background: var(--btn-send-active);
    transform: scale(0.9);
}