.account-link { width: 100%; margin-top: 25px; padding: 14px; display: block; border: 1px solid var(--ink); text-align: center; }
.login-main { max-width: 1080px; min-height: calc(100vh - 120px); margin: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; padding: 50px 20px; }
.login-card { width: min(460px, 100%); padding: 34px; border: 1px solid var(--line); background: white; }
.login-card h1, .login-card h2 { margin: 4px 0 8px; font-size: 38px; }
.login-card form, .login-card label { display: grid; gap: 10px; }
.login-card form { margin-top: 28px; gap: 18px; }
.login-card input { width: 100%; padding: 13px; border: 1px solid var(--line); font: inherit; }
.login-actions { display: flex; gap: 10px; margin-top: 18px; }
.login-actions button { padding: 9px 12px; border: 1px solid var(--line); background: white; }
@media (max-width: 900px) { .login-main { grid-template-columns: 1fr; }.login-card { margin: auto; } }
.admin-body, .mypage-body, .plans-body { background: #f4f6f4; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #e56c55; outline-offset: 3px; }
.demo-guide-trigger { min-height: 46px; padding: 7px 13px 7px 8px; position: fixed; right: 18px; bottom: 18px; z-index: 70; display: flex; align-items: center; gap: 8px; border: 1px solid #60776c; border-radius: 999px; color: white; background: #17352f; box-shadow: 0 12px 35px rgba(23,53,47,.28); cursor: pointer; }.demo-guide-trigger span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #17352f; background: #e56c55; font-weight: 800; }.demo-guide-trigger b { font-size: 11px; letter-spacing: .04em; }
.demo-guide-dialog { width: min(720px, calc(100vw - 32px)); max-height: min(820px, calc(100vh - 32px)); padding: 0; border: 0; color: #16221e; background: #f7f9f7; box-shadow: 0 30px 90px rgba(11,24,19,.32); overflow: auto; }.demo-guide-dialog::backdrop { background: rgba(10,22,17,.68); backdrop-filter: blur(5px); }.demo-guide-head { padding: 28px 30px 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; color: white; background: #17352f; }.demo-guide-head small { color: #b9cec3; font-size: 9px; letter-spacing: .18em; }.demo-guide-head h2 { margin: 5px 0 6px; font-size: clamp(24px, 4vw, 34px); }.demo-guide-head p { max-width: 530px; margin: 0; color: #d5dfda; font-size: 12px; line-height: 1.7; }.demo-guide-head button { width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid #60776c; border-radius: 50%; color: white; background: transparent; font-size: 22px; cursor: pointer; }
.demo-guide-route { padding: 10px 30px; margin: 0; list-style: none; }.demo-guide-route li + li { border-top: 1px solid #dce3df; }.demo-guide-route a { min-height: 74px; display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; color: inherit; text-decoration: none; }.demo-guide-route a:hover { color: #17352f; background: #eef4f1; }.demo-guide-route span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #9ab0a5; border-radius: 50%; color: #52776a; font-size: 10px; }.demo-guide-route b, .demo-guide-route small { display: block; }.demo-guide-route b { font-size: 14px; }.demo-guide-route small { margin-top: 3px; color: #65736d; font-size: 10px; }.demo-guide-route em { padding: 5px 8px; color: #52776a; background: #e8f0ec; font-size: 9px; font-style: normal; letter-spacing: .06em; }
.demo-guide-safety { margin: 4px 30px 28px; padding: 15px 17px; border-left: 4px solid #e56c55; background: white; }.demo-guide-safety b { font-size: 11px; }.demo-guide-safety p { margin: 5px 0 0; color: #65736d; font-size: 10px; line-height: 1.7; }
.plan-demo-rail { min-height: 58px; padding: 8px 24px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; color: white; background: #17352f; border-bottom: 1px solid #52776a; }
.plan-demo-switch { display: flex; align-items: center; gap: 5px; }.plan-demo-switch small { margin-right: 7px; color: #b9cec3; letter-spacing: .13em; }.plan-demo-switch button { padding: 7px 10px; color: #d5dfda; border: 1px solid #52776a; background: transparent; font-size: 11px; }.plan-demo-switch button.active { color: #17352f; border-color: #e56c55; background: #e56c55; font-weight: 700; }
.plan-demo-current { display: flex; align-items: baseline; gap: 12px; }.plan-demo-current b { letter-spacing: .12em; }.plan-demo-current span, .plan-demo-current small { color: #d5dfda; font-size: 11px; }.plan-demo-rail > a { color: white; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.plan-demo-summary { max-width: 1180px; margin: 22px auto; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-left: 5px solid #e56c55; background: white; box-shadow: 0 8px 24px rgba(23,53,47,.06); }.plan-demo-summary small { color: #52776a; letter-spacing: .12em; }.plan-demo-summary h2 { margin: 2px 0 0; font-size: 20px; }.plan-feature-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }.plan-feature-chips span { padding: 6px 9px; color: #17352f; background: #e9f0ec; font-size: 11px; }
.plan-cards article.selected-plan { outline: 4px solid #e56c55; outline-offset: -4px; }.admin-nav button.plan-locked { color: #718079; text-decoration: line-through; cursor: not-allowed; }.admin-nav button.plan-locked::after { content: " 上位"; color: #d9a19d; font-size: 9px; }
.plan-locked-panel { max-width: 760px; margin: 70px auto; padding: 45px; background: white; border-left: 6px solid #e56c55; box-shadow: 0 18px 55px rgba(23,53,47,.12); }.plan-locked-panel small { color: #52776a; letter-spacing: .14em; }.plan-locked-panel h1 { margin: 8px 0; font: 500 46px/1.1 "Bodoni 72", serif; }.plan-locked-panel p { color: #5f6d67; line-height: 1.8; }.plan-locked-panel button { padding: 12px 18px; color: white; border: 0; background: #17352f; }.plan-page-locked main { display: none; }
.admin-shell { min-height: calc(100vh - 31px); display: grid; grid-template-columns: 240px 1fr; }
.admin-sidebar { padding: 30px 22px; display: flex; flex-direction: column; color: white; background: #17201d; }
.admin-brand { margin: 0 8px 34px; }
.admin-brand .brand-mark { border-color: #9dafaa; }
.admin-brand small { color: #9dafaa; }
.admin-nav { display: grid; gap: 4px; }
.admin-nav-group { margin: 15px 12px 4px; color: #74847c; font-size: 9px; font-weight: 700; letter-spacing: .16em; }.admin-nav button { padding: 9px 10px; border: 0; border-radius: 3px; color: #bdc7c2; background: transparent; display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: center; text-align: left; cursor: pointer; }.admin-nav button i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #44514c; border-radius: 50%; font-size: 9px; font-style: normal; }.admin-nav button span, .admin-nav button small { display: block; }.admin-nav button small { margin-top: 1px; color: #7f8c86; font-size: 9px; font-weight: 400; }
.admin-nav button:hover, .admin-nav button.active { color: white; background: #2d3b36; }
.plan-badge { margin-top: auto; padding: 18px; display: grid; gap: 3px; border: 1px solid #3b4a44; }
.plan-badge small { color: #9dafaa; }
.plan-badge b { letter-spacing: .12em; }
.plan-badge a { margin-top: 7px; color: #d9a19d; font-size: 11px; }
.back-site { margin: 18px 8px 0; color: #9dafaa; font-size: 12px; }
.admin-main { min-width: 0; padding: 38px clamp(22px, 4vw, 58px) 80px; }
.admin-header { margin-bottom: 28px; display: flex; align-items: center; gap: 18px; }
.admin-header > div { margin-right: auto; }
.admin-header p { margin: 0; color: var(--muted); font-size: 12px; }
.admin-header h1 { margin: 2px 0 0; font-size: clamp(24px, 3vw, 36px); }
.admin-primary { padding: 11px 17px; border: 1px solid var(--ink); color: white; background: var(--ink); cursor: pointer; }
.admin-menu-button { display: none; padding: 10px 14px; border: 1px solid var(--line); background: white; }
.today-strip { padding: 18px 22px; display: flex; gap: clamp(14px, 3vw, 42px); align-items: center; color: white; background: var(--jade-dark); }
.today-strip span { color: #b9cec3; font-size: 11px; letter-spacing: .1em; }
.today-strip b { font-size: 14px; }
.today-strip em { margin-left: auto; color: #b9cec3; font-size: 11px; font-style: normal; }
.task-launcher { margin: 18px 0; padding: 22px; display: grid; grid-template-columns: minmax(180px, .72fr) 2fr; gap: 24px; border: 1px solid #dbe1dd; background: white; }.task-launcher-copy small { color: var(--jade); font-size: 9px; font-weight: 700; letter-spacing: .18em; }.task-launcher-copy h2 { margin: 5px 0; font-size: 22px; }.task-launcher-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }.task-launcher-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }.task-launcher-grid button { min-height: 108px; padding: 13px; position: relative; display: grid; align-content: start; gap: 4px; border: 1px solid var(--line); background: #fbfcfb; text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }.task-launcher-grid button:hover, .task-launcher-grid button:focus-visible { border-color: var(--jade); background: #f1f7f4; transform: translateY(-3px); }.task-launcher-grid b { margin-top: 4px; font-size: 12px; }.task-launcher-grid small { color: var(--muted); font-size: 9px; }.task-launcher-grid em { position: absolute; right: 11px; bottom: 9px; color: var(--jade); font-style: normal; }.task-icon { width: 28px; height: 28px; display: grid; place-items: center; color: white; border-radius: 50%; background: var(--jade); font-size: 9px; font-weight: 700; }.task-icon.ai { color: var(--ink); background: var(--petal); }
.admin-grid { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 18px; }
.admin-card { padding: 24px; border: 1px solid #dbe1dd; background: white; }
.card-heading, .view-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.card-heading small, .view-title small, .admin-card > small, .mypage-card small { color: var(--jade); font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.card-heading h2, .view-title h2, .admin-card h2 { margin: 2px 0 0; font: 600 22px/1.2 "Avenir Next", "Hiragino Sans", sans-serif; letter-spacing: 0; }
.card-heading button { border: 0; color: var(--jade); background: none; cursor: pointer; }
.appointment { min-height: 76px; display: grid; grid-template-columns: 52px 10px 1fr auto; gap: 12px; align-items: center; border-bottom: 1px solid #e6ebe8; }
.appointment:last-child { border: 0; }
.appointment time { font-weight: 700; }
.service-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--jade); }
.service-dot.eye { background: var(--petal); }.service-dot.nail { background: #8d99a4; }.service-dot.skin { background: #a8bda8; }
.appointment b, .appointment small { display: block; }
.appointment small { color: var(--muted); font-size: 11px; }
.appointment mark { padding: 4px 8px; color: var(--muted); border-radius: 999px; background: #eef2ef; font-size: 10px; }
.appointment.current { margin: 0 -12px; padding: 0 12px; background: #f8f1f0; }
.appointment.current mark { color: #854f4b; background: #ecd2cf; }
.admin-stack { display: grid; gap: 18px; }
.count { width: 30px; height: 30px; display: grid; place-items: center; color: white; border-radius: 50%; background: var(--petal); }
.action-card > button { width: 100%; padding: 15px 0; display: block; border: 0; border-bottom: 1px solid #e6ebe8; background: none; text-align: left; cursor: pointer; }
.action-card > button:last-child { border: 0; }
.action-card button b, .action-card button small { display: block; }
.action-card button small { color: var(--muted); }
.points-card > div { padding: 12px 0; display: flex; justify-content: space-between; border-bottom: 1px solid #e6ebe8; }
.week-card { margin-top: 18px; }
.bars { height: 180px; margin-top: 24px; display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(8px, 2vw, 28px); align-items: end; }
.bars > div { height: 100%; display: grid; grid-template-rows: 1fr auto auto; gap: 6px; text-align: center; }
.bars i { width: min(36px, 75%); height: var(--v); min-height: 2px; margin: auto auto 0; display: block; background: var(--jade); }
.bars span, .bars b { color: var(--muted); font-size: 10px; }
.bars .closed i { background: var(--line); }
.admin-view { display: none; }.admin-view.active { display: block; }
.view-title { margin-bottom: 24px; }
.view-actions { display: flex; gap: 5px; }
.filter { padding: 8px 14px; border: 1px solid var(--line); background: white; cursor: pointer; }.filter.active { color: white; border-color: var(--jade); background: var(--jade); }
.table-card { padding: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: 16px 18px; border-bottom: 1px solid #e6ebe8; text-align: left; font-size: 12px; }
th { color: var(--muted); background: #f8faf8; font-size: 10px; }
.table-empty { padding: 42px 18px; color: var(--muted); text-align: center; }
.table-action { padding: 7px 10px; border: 1px solid var(--jade); color: var(--jade); background: white; cursor: pointer; }
.table-action:hover { color: white; background: var(--jade); }
.table-action:disabled { opacity: .55; cursor: wait; }
.status { padding: 5px 8px; border-radius: 999px; background: #eef2ef; }.status.live { color: #854f4b; background: #ecd2cf; }
.admin-search { width: min(320px, 50vw); padding: 11px 14px; border: 1px solid var(--line); background: white; }
.customer-list { padding: 0 24px; }
.customer-row { min-height: 78px; display: grid; grid-template-columns: 44px 1fr auto 100px; gap: 15px; align-items: center; border-bottom: 1px solid #e6ebe8; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--jade); }
.customer-row small { display: block; color: var(--muted); }.customer-row > span:not(.avatar) { color: var(--muted); font-size: 10px; }.customer-row strong { text-align: right; }
.premium-note { padding: 5px 9px; color: #854f4b; background: #f3dfdc; font-size: 10px; }
.audit-note { padding: 5px 9px; color: var(--jade); background: #e8f0ec; font-size: 10px; }
.audit-list { padding: 0 24px; }
.audit-event { min-height: 82px; display: grid; grid-template-columns: 150px 1.2fr .8fr 1fr; gap: 18px; align-items: center; border-bottom: 1px solid #e6ebe8; }
.audit-event time, .audit-event small, .audit-event p { color: var(--muted); font-size: 11px; }
.audit-event b, .audit-event small { display: block; }
.audit-event span { text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }
.notification-list { display: grid; gap: 10px; }.notification-item { display: grid; grid-template-columns: 100px 1fr auto; gap: 14px; padding: 14px; border-bottom: 1px solid var(--line); align-items: start; }.notification-item:last-child { border-bottom: 0; }.notification-item mark { justify-self: start; padding: 4px 8px; border-radius: 99px; background: #edf4f1; color: var(--jade); }.notification-item small, .notification-item p { color: var(--muted); }.notification-item p { grid-column: 2 / -1; margin: 0; white-space: pre-line; font-size: 12px; }.notification-item button { padding: 7px 10px; border: 1px solid var(--line); background: white; }@media (max-width: 720px) { .notification-item { grid-template-columns: 1fr; }.notification-item p { grid-column: auto; } }
.message-empty { min-height: 430px; display: grid; place-items: center; align-content: center; text-align: center; }
.message-empty p { max-width: 430px; color: var(--muted); }.message-icon { width: 58px; height: 58px; display: grid; place-items: center; color: white; border-radius: 50%; background: var(--jade); font-size: 24px; }
[data-plan-min][hidden], .ai-empty-state[hidden], .ai-diff-content[hidden] { display: none !important; }
.ai-storyboard { margin-bottom: 18px; padding: 24px; color: white; background: var(--jade-dark); overflow: hidden; }.ai-story-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; }.ai-story-head small { color: #9eb5aa; font-size: 9px; letter-spacing: .16em; }.ai-story-head h3 { margin: 4px 0 0; font-size: 22px; }.ai-story-head button { padding: 7px 11px; border: 1px solid #63786e; color: white; background: transparent; cursor: pointer; }.ai-story-stage { margin-top: 20px; position: relative; }.ai-story-screen { min-height: 118px; padding: 18px 21px; position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; align-items: center; color: var(--ink); background: #f6f8f6; }.ai-story-label { position: absolute; top: 10px; left: 21px; color: var(--muted); font-size: 8px; letter-spacing: .12em; }.ai-story-screen > p { margin: 18px 0 0; font-size: 16px; font-weight: 700; line-height: 1.6; }.ai-story-preview { margin-top: 5px; padding: 13px; border-left: 3px solid var(--petal); background: white; }.ai-story-preview small, .ai-story-preview b { display: block; }.ai-story-preview small { color: var(--muted); font-size: 9px; }.ai-story-preview b { margin-top: 5px; font-size: 11px; }.ai-story-cursor { width: 15px; height: 21px; position: absolute; left: 44%; bottom: 15px; background: var(--jade); clip-path: polygon(0 0, 0 100%, 30% 72%, 49% 100%, 64% 91%, 46% 64%, 100% 64%); animation: ai-cursor 1.8s ease-in-out infinite; }.ai-story-progress { height: 3px; background: #42574e; }.ai-story-progress i { width: 25%; height: 100%; display: block; background: var(--petal); transition: width .35s ease; }.ai-story-steps { padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; }.ai-story-steps button { width: 100%; padding: 10px; display: grid; grid-template-columns: 25px 1fr; gap: 2px 8px; align-items: center; border: 1px solid #41544b; color: #b9c9c1; background: transparent; text-align: left; cursor: pointer; }.ai-story-steps button > span { width: 23px; height: 23px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 50%; background: #35483f; font-size: 9px; }.ai-story-steps b { font-size: 11px; }.ai-story-steps small { font-size: 8px; }.ai-story-steps button.active { color: white; border-color: var(--petal); background: #263a32; }.ai-story-steps button.active > span { color: var(--ink); background: var(--petal); }.ai-story-caption { margin: 12px 0 0; color: #9eb5aa; font-size: 9px; }.story-pulse .ai-story-preview { animation: ai-result-in .35s ease both; }
@keyframes ai-cursor { 0%, 100% { transform: translate(-12px, 5px); } 50% { transform: translate(18px, -8px); } } @keyframes ai-result-in { from { opacity: .25; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ai-workbench { display: grid; grid-template-columns: .92fr 1.08fr; gap: 18px; }.ai-request-card, .ai-diff-card { min-height: 430px; }.ai-request-card label { display: block; margin: 24px 0 8px; font-size: 12px; font-weight: 700; }.ai-request-card textarea { width: 100%; box-sizing: border-box; padding: 15px; border: 1px solid var(--line); background: #fbfcfb; font: 14px/1.7 inherit; resize: vertical; }.ai-safety-chip { padding: 5px 9px; color: var(--jade); background: #e8f0ec; font-size: 10px; }.ai-examples { margin: 12px 0 18px; display: flex; gap: 7px; flex-wrap: wrap; }.ai-examples button { padding: 7px 10px; border: 1px solid var(--line); background: white; cursor: pointer; }.ai-privacy-note { margin: 14px 0 0; color: var(--muted); font-size: 10px; }.ai-draft-status { padding: 5px 9px; color: var(--muted); background: #f1f3f2; font-size: 10px; }.ai-draft-status.ready { color: #854f4b; background: #f3dfdc; }.ai-draft-status.applied { color: var(--jade); background: #e8f0ec; }.ai-empty-state { min-height: 280px; display: grid; place-items: center; align-content: center; color: var(--muted); text-align: center; }.ai-empty-state p { margin: 8px 0; }.ai-scope { margin: 22px 0; display: grid; grid-template-columns: repeat(3, 1fr); border: solid var(--line); border-width: 1px 0; }.ai-scope div { padding: 12px; }.ai-scope div + div { border-left: 1px solid var(--line); }.ai-scope dt { color: var(--muted); font-size: 9px; }.ai-scope dd { margin: 4px 0 0; font-size: 12px; font-weight: 700; }.ai-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.ai-diff > div { min-height: 130px; padding: 15px; border: 1px solid var(--line); }.ai-diff p { white-space: pre-line; font-size: 12px; line-height: 1.7; }.ai-before { background: #f7f7f6; }.ai-after { border-color: #91b4a4 !important; background: #f1f7f4; }.ai-approval { margin: 18px 0; display: flex; align-items: center; gap: 9px; font-size: 12px; }.ai-approval input { width: 18px; height: 18px; accent-color: var(--jade); }.ai-history-card { margin-top: 18px; }.ai-history-card ol { padding: 0; margin: 18px 0 0; list-style: none; }.ai-history-card li { padding: 14px 0; display: grid; grid-template-columns: 90px 1fr auto; gap: 18px; align-items: center; border-top: 1px solid var(--line); }.ai-history-card time, .ai-history-card small { color: var(--muted); font-size: 11px; }.ai-history-card small { display: block; }.ai-history-card mark { padding: 5px 8px; color: var(--jade); background: #e8f0ec; font-size: 10px; }
.settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.settings-form label { display: grid; gap: 7px; font-size: 12px; }.settings-form input:not([type=checkbox]), .settings-form select { padding: 12px; border: 1px solid var(--line); background: white; }
.toggle-row { grid-column: 1 / -1; padding: 16px 0; display: flex !important; align-items: center; justify-content: space-between; border-top: 1px solid #e6ebe8; }.toggle-row small { display: block; color: var(--muted); }.toggle-row input { width: 22px; height: 22px; accent-color: var(--jade); }
.settings-status { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; }
.settings-wide { grid-column: 1 / -1; display: grid; gap: 8px; }.settings-wide h3, .settings-wide p { margin: 0; }.settings-wide p { color: var(--muted); font-size: 12px; }.settings-wide textarea { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--line); background: white; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.shift-editor { display: grid; gap: 16px; }.shift-card { border: 1px solid var(--line); background: #fff; padding: 16px; }.shift-card h4 { margin: 0 0 12px; }.shift-grid { display: grid; gap: 8px; }.shift-row { display: grid; grid-template-columns: 72px repeat(4, minmax(90px, 1fr)); gap: 8px; align-items: center; }.shift-row label { display: flex; align-items: center; gap: 6px; }.shift-row input[type="time"] { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid var(--line); }.shift-blocks { margin-top: 12px; }.shift-blocks textarea { margin-top: 6px; }@media (max-width: 720px) { .shift-row { grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); padding-top: 8px; }.shift-row > label { grid-column: 1 / -1; } }
.demo-toast { max-width: calc(100vw - 32px); padding: 12px 18px; position: fixed; left: 50%; bottom: 24px; z-index: 100; opacity: 0; transform: translate(-50%, 20px); color: white; background: var(--ink); pointer-events: none; transition: .2s; font-size: 12px; }.demo-toast.show { opacity: 1; transform: translate(-50%, 0); }

.mypage-main { max-width: 1120px; margin: auto; padding: 70px 24px 110px; }
.member-hello { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.member-hello h1 { margin: 0; font: 500 clamp(42px, 6vw, 72px)/1.1 "Bodoni 72", serif; }.member-hello > div > p:last-child { color: var(--muted); }
.member-rank { min-width: 240px; padding: 20px; color: white; background: var(--jade-dark); }.member-rank small, .member-rank b, .member-rank span { display: block; }.member-rank small { color: #b9cec3; letter-spacing: .14em; }.member-rank b { margin: 7px 0; font-size: 24px; letter-spacing: .1em; }.member-rank span { color: #d5dfda; font-size: 11px; }
.next-booking-card { margin-top: 46px; padding: 30px; display: grid; grid-template-columns: 130px 1fr auto; gap: 30px; align-items: center; color: white; background: var(--jade-dark); }
.date-block { border-right: 1px solid #60776c; }.date-block small, .date-block b, .date-block span { display: block; }.date-block small { color: #b9cec3; font-size: 9px; letter-spacing: .15em; }.date-block b { font: 500 48px/1 "Bodoni 72", serif; }.date-block span { color: #b9cec3; }
.booking-detail p { margin: 0; color: #b9cec3; }.booking-detail h2 { margin: 4px 0; font: 600 24px/1.3 "Avenir Next", sans-serif; }.booking-detail span { color: #d5dfda; font-size: 12px; }
.booking-actions { display: grid; gap: 8px; }.booking-actions button { padding: 10px 16px; border: 1px solid #8fa398; color: white; background: transparent; }
.mypage-grid { margin-top: 18px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }.mypage-card { padding: 26px; border: 1px solid var(--line); background: white; }
.point-wallet { display: grid; grid-template-columns: 1fr 1fr; }.point-wallet h2 { margin: 6px 0; font: 500 52px/1 "Bodoni 72", serif; }.point-wallet h2 span { font-size: 18px; }.point-wallet p { color: var(--muted); }.point-meter { height: 5px; grid-column: 1 / -1; background: #e4eae6; }.point-meter i { height: 100%; display: block; background: var(--petal); }
.care-note > div { padding: 12px 0; display: flex; justify-content: space-between; border-bottom: 1px solid #e6ebe8; }
.history-section { margin-top: 60px; }.history-row { min-height: 82px; display: grid; grid-template-columns: 120px 12px 1fr auto; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); }.history-row time { color: var(--muted); }.history-row b, .history-row small { display: block; }.history-row small { color: var(--muted); }.history-row > span:last-child { color: var(--jade); font-weight: 700; }

.plans-main { max-width: 1250px; margin: auto; padding: 90px 28px 120px; }.plans-hero { max-width: 850px; }.plans-hero h1 { margin: 0; font: 500 clamp(48px, 7vw, 88px)/1.02 "Bodoni 72", serif; }.plans-hero > p:last-child { max-width: 720px; color: var(--muted); }
.partnership-section { margin-top: 80px; border-top: 1px solid var(--ink); }.partnership-lead { padding: 54px 0 44px; display: grid; grid-template-columns: minmax(300px, .85fr) minmax(360px, 1.15fr); gap: clamp(40px, 8vw, 110px); align-items: end; }.partnership-lead h2 { margin: 4px 0 0; font: 500 clamp(42px, 5vw, 66px)/1.05 "Bodoni 72", serif; }.partnership-lead > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 2; }.partnership-points { display: grid; grid-template-columns: repeat(3, 1fr); border: solid var(--line); border-width: 1px 0; }.partnership-points article { min-height: 180px; padding: 28px; display: grid; grid-template-columns: 34px 1fr; gap: 16px; }.partnership-points article + article { border-left: 1px solid var(--line); }.partnership-points span { color: var(--jade); font-size: 10px; letter-spacing: .12em; }.partnership-points h3 { margin: 0 0 9px; font-size: 17px; }.partnership-points p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }.limited-intake { margin-top: 28px; padding: 30px 34px; display: grid; grid-template-columns: 120px 1fr auto; gap: 28px; align-items: center; color: white; background: var(--jade-dark); }.limited-intake small { color: var(--petal); font-size: 9px; font-weight: 700; letter-spacing: .16em; }.limited-intake h3 { margin: 0 0 7px; font-size: 19px; }.limited-intake p { max-width: 720px; margin: 0; color: #d5dfda; font-size: 12px; line-height: 1.8; }.limited-intake strong { color: #8fa398; font-size: 9px; letter-spacing: .14em; white-space: nowrap; }
.plans-nav { display: flex; gap: 20px; font-size: 12px; }
.plan-cards { margin-top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; }.plan-cards article { padding: 34px; position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); background: white; }.plan-cards article + article { border-left: 0; }.plan-cards article.recommended { color: white; border: 0; background: var(--jade-dark); transform: translateY(-16px); box-shadow: var(--shadow); }.recommend-label { padding: 5px 14px; position: absolute; top: -27px; left: 0; color: var(--ink); background: var(--petal); font-size: 9px; letter-spacing: .15em; }
.plan-name small { color: var(--jade); letter-spacing: .16em; }.recommended .plan-name small { color: #b9cec3; }.plan-name h2 { margin: 4px 0; font: 500 40px/1.1 "Bodoni 72", serif; }.plan-name p { min-height: 52px; color: var(--muted); font-size: 13px; }.recommended .plan-name p { color: #d5dfda; }
.price { margin: 22px 0; padding: 22px 0; border: solid var(--line); border-width: 1px 0; }.recommended .price { border-color: #60776c; }.price small, .price b { display: block; }.price b { margin: 5px 0; font-size: 27px; }.plan-cards ul { padding: 0; margin: 0 0 30px; list-style: none; }.plan-cards li { padding: 8px 0 8px 22px; position: relative; font-size: 13px; }.plan-cards li::before { content: "✓"; position: absolute; left: 0; color: var(--jade); }.recommended li::before { color: var(--petal); }.plan-cards article > button { width: 100%; margin-top: auto; padding: 13px; border: 1px solid var(--ink); background: transparent; }.recommended > button { color: var(--ink); border-color: white; background: white; }
.upgrade-band { margin-top: 70px; padding: 40px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; color: white; background: var(--jade-dark); }.upgrade-band small { color: #b9cec3; letter-spacing: .16em; }.upgrade-band h2 { margin-top: 6px; font-size: 36px; }.upgrade-band p { color: #d5dfda; font-size: 13px; }
.options-section { margin-top: 100px; }.options-section .view-title > p { max-width: 380px; color: var(--muted); }.option-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }.option-grid > div { padding: 22px 18px; display: grid; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.option-grid span { color: var(--muted); font-size: 11px; }

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }.admin-sidebar { display: none; }.admin-sidebar.mobile-open { width: min(300px, 86vw); min-height: calc(100vh - 31px); display: flex; position: fixed; left: 0; top: 31px; z-index: 80; box-shadow: var(--shadow); }.admin-main { padding-top: 24px; }.admin-menu-button { display: block; }.admin-grid, .mypage-grid { grid-template-columns: 1fr; }.plan-cards { grid-template-columns: 1fr; gap: 18px; }.plan-cards article + article { border-left: 1px solid var(--line); }.plan-cards article.recommended { transform: none; }.recommend-label { top: 0; right: 0; left: auto; }.upgrade-band { grid-template-columns: 1fr; }.option-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .demo-guide-trigger { right: 12px; bottom: 12px; }.demo-guide-trigger b { display: none; }.demo-guide-trigger { padding: 7px; }.demo-guide-head { padding: 22px 20px 18px; }.demo-guide-route { padding: 8px 20px; }.demo-guide-route a { grid-template-columns: 40px 1fr; }.demo-guide-route em { grid-column: 2; justify-self: start; margin-top: -12px; }.demo-guide-safety { margin: 4px 20px 22px; }
  .plan-demo-rail { padding: 9px 12px; grid-template-columns: 1fr; gap: 7px; }.plan-demo-switch { overflow-x: auto; }.plan-demo-current { justify-content: space-between; }.plan-demo-current small { display: none; }.plan-demo-rail > a { justify-self: start; }.plan-demo-summary { margin: 14px 12px; align-items: flex-start; flex-direction: column; }.plan-feature-chips { justify-content: flex-start; }.plan-locked-panel { margin: 30px 14px; padding: 28px; }.plan-locked-panel h1 { font-size: 36px; }
  .audit-event { padding: 16px 0; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  .audit-event p { margin: 0; }
  .admin-header { align-items: flex-start; flex-wrap: wrap; }.admin-header > div { width: 100%; }.today-strip { align-items: flex-start; flex-wrap: wrap; }.today-strip em { margin-left: 0; }.appointment { grid-template-columns: 44px 8px 1fr; padding: 10px 0; }.appointment mark { grid-column: 3; justify-self: start; }.settings-form { grid-template-columns: 1fr; }.toggle-row { grid-column: auto; }.customer-row { grid-template-columns: 42px 1fr auto; }.customer-row strong { grid-column: 2; text-align: left; }.customer-row > span:not(.avatar) { grid-column: 3; grid-row: 1 / 3; }.member-hello { align-items: stretch; flex-direction: column; }.next-booking-card { grid-template-columns: 1fr; }.date-block { border-right: 0; border-bottom: 1px solid #60776c; padding-bottom: 18px; }.point-wallet { grid-template-columns: 1fr; }.point-meter { grid-column: auto; }.history-row { grid-template-columns: 90px 10px 1fr; padding: 14px 0; }.history-row > span:last-child { grid-column: 3; }.plans-main { padding-top: 60px; }.plans-hero h1 { font-size: 49px; }.plans-nav { display: none; }.option-grid { grid-template-columns: 1fr; }.upgrade-band { padding: 28px; }.plans-body footer { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) { .task-launcher { grid-template-columns: 1fr; }.task-launcher-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .ai-workbench { grid-template-columns: 1fr; }.admin-sidebar { overflow-y: auto; }.ai-story-screen { grid-template-columns: 1fr; }.ai-story-preview { margin-top: 0; }.ai-story-cursor { display: none; } }
@media (max-width: 620px) { .task-launcher { margin: 14px 0; padding: 17px; }.task-launcher-grid { grid-template-columns: 1fr 1fr; }.task-launcher-grid button { min-height: 118px; }.ai-storyboard { padding: 18px; }.ai-story-head { align-items: flex-start; flex-direction: column; }.ai-story-screen { min-height: 160px; }.ai-story-steps { grid-template-columns: 1fr 1fr; }.ai-request-card, .ai-diff-card { min-height: 0; }.ai-scope, .ai-diff { grid-template-columns: 1fr; }.ai-scope div + div { border-left: 0; border-top: 1px solid var(--line); }.ai-history-card li { grid-template-columns: 1fr auto; }.ai-history-card time { grid-column: 1 / -1; } }
@media (max-width: 900px) { .partnership-lead { grid-template-columns: 1fr; }.partnership-points { grid-template-columns: 1fr; }.partnership-points article + article { border-left: 0; border-top: 1px solid var(--line); }.limited-intake { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .partnership-section { margin-top: 55px; }.partnership-lead { padding: 38px 0 30px; }.partnership-lead h2 { font-size: 42px; }.partnership-points article { min-height: 0; padding: 22px 6px; }.limited-intake { padding: 24px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }