/* --- Reset and Base --- */
html {
    box-sizing: border-box;
    font-family: sans-serif;
}

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

body {
    margin: 0;
    background-color: #f0f2f5;
    color: #333;
}

/* --- Typography --- */
h2 { /* h1はcommon.cssでスタイル付けされます */
    font-family: 'Zen Dots', sans-serif;
    color: #1c1e21;
    text-align: center;
}

/* --- Layout: The new, simplified structure --- */
.view {
    width: 100%;
    max-width: 540px; /* A bit wider for modern phones */
    margin: 20px auto; /* Centering and vertical space */
    padding: 20px;     /* All inner padding is handled here */
    display: none; /* Hide all views by default */
}

.view.active {
    display: block; /* Show only the active view */
}

/* Reset redundant styles from inner containers, as .view now handles them */
.upload-area,
.controls,
.preview-container {
    padding: 0;
    margin: 0;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* ボタンなどを中央に配置します */
    gap: 15px; /* 要素間のスペースを統一します */
}
.main-container {
    padding: 0;
    margin: 0;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Add back vertical spacing between components inside a view */
.main-container, .controls, .preview-container {
    margin-top: 15px;
}


/* --- Components --- */
.canvas-container {
    position: relative;
    width: 100%;
    background-color: #e9ebee;
    overflow: hidden;
    border-radius: 4px;
}

#image-canvas {
    display: block;
    width: 100%;
    height: auto;
}

#crop-area {
    position: absolute;
    border: 2px dashed #007bff;
    cursor: move;
}

#crop-area.circle {
    border-radius: 50%;
    border-style: solid;
}

#resize-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #007bff;
    border: 2px solid #fff;
    border-radius: 50%;
    right: -9px;
    bottom: -9px;
    cursor: nwse-resize;
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.shape-select {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.shape-select label {
    font-weight: bold;
}

.shape-select select {
    padding: 4px 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 0.9em;
}
.button-group {
    display: flex;
    flex-direction: row; /* 要素を横並びにします */
    justify-content: space-between; /* 両端に配置します */
    width: 100%; /* コンテナの全幅を使います */
    align-self: stretch; /* 親の align-items: center を上書きして、全幅を確保します */
    align-items: center; /* 矢印ボタンなどを垂直方向に中央揃えします */
}

/* A utility class to hide elements visually but keep them accessible */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

input[type="number"] { /* Keep original input styles, but separate from buttons */
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 1em;
    width: 100%;
}

button {
    display: block; /* To apply width and padding correctly to label */
    padding: 7px 12px; /* ボタンの縦幅をさらに小さくします */
    font-size: 0.9em;  /* 文字サイズをさらに小さくします */
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, color 0.2s; /* Smooth hover effect */
    -webkit-tap-highlight-color: transparent; /* スマホでのタップ時のハイライトを無効化 */

    /* New style from request */
    border: 2px solid #000;
    border-radius: 0;
    background: #fff;
    color: #000;
}

button:hover, button:active {
    color: #fff;
    background: #000;
}

.arrow-btn {
    /* Override general button styles for a circular shape */
    width: 44px;
    height: 44px;
    padding: 0;
    border-width: 3px; /* この値を変更すると線の太さが変わります */
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: bold;

    /* To center the arrow perfectly */
    display: flex;
    justify-content: center;
    align-items: center;
}

#preview-image-container {
    margin-top: 10px;
    min-height: 50px;
    text-align: center;
}

#preview-image-container img {
    max-width: 100%;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.download-options {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    align-items: baseline; /* テキストのベースラインを揃えるために center から変更 */
    gap: 10px;
}

.download-options input[type="number"] {
    width: 120px; /* Keep this specific width */
}

.input-with-unit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.download-action-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.download-action-group span {
    font-weight: bold;
    font-size: 0.9em;
}

footer {
    text-align: center; /* テキストを中央に配置します */
    margin-top: 40px;   /* フッターの上の余白を調整します */
    padding-bottom: 20px; /* フッターの下の余白を追加します */
    color: #888;         /* 文字色を少し薄くします */
    font-size: 0.8em;     /* 文字サイズを少し小さくします */
}