body {
margin: 0;
background-image: url("../images/background/bg-page.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}


.app {padding:0!important;}
:root {
--bg: #0b0f19;
--panel: #111827;
--text: #e5e7eb;
--muted: #9ca3af;
--border: #2b3446;
--accent: #60a5fa;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
/* テキスト選択禁止（入力欄だけ後で解除） */
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
/* background: var(--bg);
color: var(--text);*/
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: pan-y;
}
/* 入力欄は選択できるようにする */
input,
textarea {
-webkit-user-select: text;
user-select: text;
}
.app {
max-width: 920px;
margin: 0 auto;
padding: 12px 10px 22px;
}
.topbar {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
margin-bottom: 10px;
}
.nameLabel {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 6px;
color: #fff;
/* font-size: 12px;
color: var(--muted);*/
flex: 1 1 auto;
min-width: 0;
}
#nameInput {
width: min(420px, 60vw);
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: #0f1626;
color: var(--text);
font-size: 14px;
outline: none;
}
#nameInput:focus {
border-color: var(--accent);
}
.actions {
display: flex;
gap: 8px;
flex-wrap: nowrap;
justify-content: flex-end;
width: auto;
flex: 0 0 auto;
}
.actions button {
padding: 8px 10px;
border-radius: 10px;
border: 0;
background: #c5a203;
color: #000;
font-weight: bold;
cursor: pointer;
font-size: 14px;
box-shadow:
-2px -2px 0 0 #ffe02f,
2px 2px 0 0 #8a6f00;
}
.actions button:active {
transform: translateY(1px);
}
.actions button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (max-width: 640px) {
.topbar {
flex-wrap: wrap;
justify-content: center;
}
.nameLabel {
align-items: center;
text-align: center;
width: 100%;
}
#nameInput {
width: min(360px, 92vw);
}
.actions {
width: 100%;
justify-content: center;
}
}
.contentWrap {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.stageWrap {
flex: 1 1 600px;
display: flex;
justify-content: center;
}
.modList {
flex: 1 1 280px;
min-width: 250px;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(17, 24, 39, 0.8);
backdrop-filter: blur(6px);
padding: 16px;
color: var(--text);
}
.modList h2 {
margin-top: 0;
margin-bottom: 12px;
font-size: 18px;
color: #fff;
}
.modList ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.modList li {
padding: 8px 12px;
border-radius: 8px;
background: rgba(15, 22, 38, 0.6);
font-size: 14px;
transition: background 0.2s ease;
}
.modList li:hover {
background: rgba(15, 22, 38, 0.9);
}
.stage {
position: relative;
/* width: min(860px, 98vw);*/
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
/* 背景はクリップしたい */
background: #060912;
user-select: none;
touch-action: pan-y;
/* ← manipulation から変更 */
}
.baseImg {
display: block;
width: 100%;
height: auto;
}
.stampLayer {
position: absolute;
inset: 0;
}
.stamp {
position: absolute;
transform-origin: center center;
pointer-events: auto;
transition: filter 120ms linear, opacity 120ms linear;
}
/* フォーカス中だけ：選択スタンプ明るく、他は暗く */
.stampLayer.hasSelection .stamp {
filter: brightness(0.55);
}
.stampLayer.hasSelection .stamp.selected {
filter: brightness(1.05);
}
/* 選択中を縁取り */
.stamp.selected {
outline: 2px solid rgba(96, 165, 250, 0.7);
outline-offset: 2px;
border-radius: 6px;
}
/* ===== カレンダーUI（★最前面 / stage外） ===== */
.datePopover {
position: fixed;
/* ★viewport基準で配置 */
z-index: 9999;
/* ★最前面 */
padding: 10px 10px 10px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(17, 24, 39, 0.95);
backdrop-filter: blur(6px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
width: min(560px, calc(100vw - 16px));
/* スマホはほぼ全幅 */
}
/* 右上の閉じる× */
.calCloseBtn {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(0, 0, 0, 0.4);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1;
}
.calHeader {
display: grid;
grid-template-columns: 44px 1fr 44px;
gap: 8px;
align-items: center;
margin-bottom: 8px;
padding-right: 34px;
/* 右上×分の余白 */
}
.calNavBtn {
height: 40px;
border-radius: 12px;
border: 1px solid var(--border);
background: #0f1626;
color: var(--text);
cursor: pointer;
font-size: 16px;
}
.calTitle {
text-align: center;
font-weight: 700;
color: var(--text);
}
.calDow {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
margin-bottom: 6px;
color: var(--muted);
font-size: 12px;
text-align: center;
}
.calDow>div {
padding: 4px 0;
}
.calGrid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
.calCell {
height: 44px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: #0f1626;
color: var(--text);
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.calCell:disabled {
opacity: 0.35;
cursor: default;
}
.calCell.isOtherMonth {
opacity: 0.45;
}
.calCell.isSelected {
outline: 2px solid rgba(96, 165, 250, 0.9);
outline-offset: 0;
}
.calCell.isToday {
border-color: rgba(96, 165, 250, 0.45);
}
.calFooter {
margin-top: 10px;
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.calActionBtn {
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--border);
background: #0f1626;
color: var(--text);
cursor: pointer;
font-size: 14px;
}
.calHint {
font-size: 12px;
color: var(--muted);
}
/* ===== グローバル×ボタン（スタンプ削除） ===== */
.deleteBtnGlobal {
position: absolute;
z-index: 30;
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(0, 0, 0, 0.6);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1;
}