* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #f7f1e6; font-family: 'Zen Kaku Gothic New', sans-serif; -webkit-font-smoothing: antialiased; color: #2c2620; }

.ok-wrapper { background: radial-gradient(120% 80% at 50% -10%, #fbf7ee 0%, #f7f1e6 46%, #f3ecdd 100%); min-height: 100vh; padding-bottom: 120px; }

/* ---- Section heading ---- */
.ok-section-num { font-family: 'Shippori Mincho', serif; font-size: 15px; color: #a8442f; letter-spacing: 0.18em; font-weight: 600; white-space: nowrap; }
.ok-section-head { border-bottom: 1px solid #e6dcc6; padding-bottom: 16px; }
.ok-section-title { font-family: 'Shippori Mincho', serif; font-size: 27px; font-weight: 600; letter-spacing: 0.04em; color: #2a231c; margin: 0; }
.ok-section-sub { font-size: 13px; color: #8a8071; letter-spacing: 0.02em; margin: 0; }

/* ---- Cards ---- */
.ok-card { background: #fffdf8; border: 1px solid #ece3d2; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(60,40,20,.05); transition: transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s ease; height: 100%; display: flex; flex-direction: column; }
.ok-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(90,50,25,.14); }

.ok-card-thumb { position: relative; height: 158px; display: flex; align-items: center; justify-content: center; }
.ok-card-badge { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.ok-tap-hint { position: absolute; top: 12px; right: 12px; font-size: 10.5px; letter-spacing: 0.06em; color: #a8442f; background: #fff8ef; border: 1px solid #ecdcc2; padding: 3px 9px; border-radius: 999px; }
.ok-thumb-label { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; letter-spacing: 0.08em; }

.ok-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.ok-card-name { font-family: 'Shippori Mincho', serif; font-size: 21px; font-weight: 600; color: #2c2620; margin: 0 0 4px; }
.ok-card-timing { font-size: 12.5px; color: #9a7b4a; letter-spacing: 0.02em; margin: 0 0 11px; }
.ok-card-desc { font-size: 13px; line-height: 1.85; color: #5c544a; margin: 0 0 15px; }
.ok-card-items { border-top: 1px dashed #e8dfca; padding-top: 13px; margin-top: auto; display: flex; flex-direction: column; gap: 7px; }
.ok-card-item { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #6b6256; }

/* ---- Diamond bullet ---- */
.ok-diamond { display: inline-block; width: 5px; height: 5px; background: #c9a64e; transform: rotate(45deg); flex-shrink: 0; }
.ok-diamond-md { width: 6px; height: 6px; }
.ok-diamond-lg { width: 7px; height: 7px; }

/* ---- Thumb backgrounds ---- */
.ok-bg-fuyu  { background: repeating-linear-gradient(135deg, #efe6d4 0 11px, #f5edde 11px 22px); }
.ok-bg-natsu { background: repeating-linear-gradient(135deg, #e6edf0 0 11px, #eef3f5 11px 22px); }
.ok-bg-haru  { background: repeating-linear-gradient(135deg, #f3e0e3 0 11px, #f8ebed 11px 22px); }
.ok-bg-aki   { background: repeating-linear-gradient(135deg, #efe2c9 0 11px, #f5ecd7 11px 22px); }
.ok-bg-gray  { background: repeating-linear-gradient(135deg, #ece6da 0 11px, #f3eee3 11px 22px); }

/* ---- Badge colors ---- */
.ok-badge-fuyu  { background: #dde2ee; color: #4a5578; }
.ok-badge-natsu { background: #d9eaf0; color: #3f6a7a; }
.ok-badge-haru  { background: #f6dfe2; color: #9a5560; }
.ok-badge-aki   { background: #f1e0c6; color: #9a6a32; }
.ok-badge-kin   { background: #efe7d2; color: #8a6f3a; }
.ok-badge-gray  { background: #e6e1d4; color: #786e5a; }

/* ---- Thumb label colors ---- */
.ok-lbl-fuyu  { color: #b6a584; }
.ok-lbl-natsu { color: #9fb2b8; }
.ok-lbl-haru  { color: #c4a3a8; }
.ok-lbl-aki   { color: #bda983; }
.ok-lbl-gray  { color: #afa792; }

/* ---- Closing note card ---- */
.ok-closing { background: linear-gradient(160deg, #fbf4e6, #f6ecd6); border: 1px solid #ecddbf; border-radius: 14px; padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; justify-content: center; height: 100%; }
.ok-closing-quote { font-family: 'Shippori Mincho', serif; font-size: 18px; line-height: 1.9; color: #6b4a2a; margin: 0; }
.ok-closing-sub { font-size: 12.5px; line-height: 1.85; color: #8a7a5e; margin: 0; }

/* ---- FAB ---- */
.ok-fab { position: fixed; right: 26px; bottom: 26px; z-index: 40; border: none; border-radius: 999px; background: #a8442f; color: #fff8ef; font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; box-shadow: 0 10px 26px rgba(120,50,30,.32); transition: transform .2s ease, box-shadow .2s ease; padding: 13px 22px; display: inline-flex; align-items: center; gap: 9px; }
.ok-fab:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(120,50,30,.4); color: #fff8ef; }

/* ---- Modal ---- */
.ok-modal .modal-content { background: #fffdf8; border-radius: 18px; border: none; box-shadow: 0 30px 70px rgba(40,20,10,.4); overflow: hidden; }
.ok-modal .modal-dialog { max-width: 560px; }
.ok-modal-header { background: linear-gradient(180deg, #fffaf0, #fffdf8); border-bottom: 1px solid #efe6d2; padding: 26px 28px 22px; }
.ok-modal-header .btn-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e8dcc4; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z' fill='%238a7355'/%3E%3C/svg%3E") center/12px no-repeat; opacity: 1; }
.ok-modal-header .btn-close:hover { background-color: #f3ead8; }
.ok-modal-timing { font-size: 12px; color: #9a7b4a; letter-spacing: 0.02em; }
.ok-modal-title { font-family: 'Shippori Mincho', serif; font-size: 28px; font-weight: 600; color: #2a231c; margin: 0; }
.ok-modal-lead { font-size: 12.5px; color: #8a8071; margin: 8px 0 0; line-height: 1.7; }
.ok-modal-body { padding: 22px 28px 30px; display: flex; flex-direction: column; gap: 22px; }

.ok-set { border: 1px solid #efe6d2; border-radius: 14px; padding: 16px; background: #fffefb; display: flex; flex-direction: column; gap: 12px; }
.ok-set-title { font-family: 'Shippori Mincho', serif; font-size: 18px; font-weight: 600; color: #2c2620; margin: 0; }
.ok-set-thumb { height: 120px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; letter-spacing: 0.08em; }
.ok-set-desc { font-size: 13px; line-height: 1.85; color: #5c544a; margin: 0; }
.ok-warning { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; line-height: 1.7; color: #9a6a32; background: #fbf2dd; border-radius: 8px; padding: 8px 11px; margin: 0; }

.ok-btn-outline { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #a8442f; text-decoration: none; border: 1.5px solid #a8442f; border-radius: 999px; padding: 8px 18px; transition: background .2s ease, color .2s ease; align-self: flex-start; }
.ok-btn-outline:hover { background: #a8442f; color: #fff8ef; }

/* ---- Modal backdrop blur ---- */
.modal-backdrop { backdrop-filter: blur(3px); }

/* ---- Animations ---- */
@keyframes okuri-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.ok-modal.show .modal-dialog { animation: okuri-rise .32s cubic-bezier(.2,.7,.3,1); }