:root {
  --bg:#f7f8fa;
  --paper:#fff;
  --ink:#243630;
  --muted:#84908b;
  --line:#e8edea;
  --green:#397468;
  --pale:#eaf3ee;
  --radius:16px;
  font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  color:var(--ink);
  font-synthesis:none;
  font-size:14px
}
* {
  box-sizing:border-box
}
html {
  overflow-x:hidden
}
body {
  margin:0;
  background:var(--bg);
  overflow-x:hidden
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.5
}
a {
  color:inherit;
  text-decoration:none
}
button {
  color:inherit
}
button:focus-visible,a:focus-visible {
  outline:3px solid #a5cbbb;
  outline-offset:3px
}
input:focus,textarea:focus,select:focus {
  outline:2px solid #a5cbbb;
  outline-offset:1px
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-size:30px;
  letter-spacing:-1.2px;
  line-height:1.35
}
h2 {
  font-size:18px;
  letter-spacing:-.5px
}
h3 {
  font-size:17px
}
p {
  line-height:1.8
}
small {
  font-size:12px
}
.icon {
  width:20px;
  height:20px;
  vertical-align:middle;
  flex-shrink:0
}
.layout {
  display:flex;
  min-height:100vh
}
.sidebar {
  width:236px;
  position:fixed;
  inset:0 auto 0 0;
  background:white;
  border-right:1px solid var(--line);
  padding:37px 22px 20px;
  display:flex;
  flex-direction:column
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  font-size:24px;
  letter-spacing:-1px
}
.brand>.icon {
  background:var(--green);
  color:white;
  width:42px;
  height:44px;
  padding:9px;
  border-radius:13px
}
.brand small {
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:500;
  letter-spacing:1px;
  margin-top:4px
}
.nav-caption {
  font-size:10px;
  letter-spacing:1.5px;
  color:#a1aaa5;
  margin:52px 14px 17px
}
nav {
  display:grid;
  gap:9px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  padding:12px 18px;
  border:1px solid var(--line);
  border-radius:9px;
  font-size:13px;
  font-weight:600;
  background:#fff;
  transition:background .15s,transform .15s
}
.btn:hover {
  background:#f0f4f1
}
.btn:active {
  transform:translateY(1px)
}
.primary {
  background:var(--green);
  color:#fff;
  border-color:var(--green)
}
.primary:hover {
  background:#2b6257
}
.nav-btn {
  justify-content:flex-start;
  border:0;
  background:transparent;
  padding:15px;
  color:#78867d;
  font-size:14px;
  gap:13px
}
.nav-btn.active {
  background:var(--pale);
  color:var(--green)
}
.sidebar-note {
  position:relative;
  background:#f3f6ef;
  border-radius:14px;
  margin:52px 3px 30px;
  padding:24px 18px;
  overflow:hidden
}
.sidebar-note>.icon {
  color:#91a682;
  margin-bottom:16px
}
.sidebar-note strong {
  display:block;
  line-height:1.7;
  font-size:15px
}
.sidebar-note p {
  color:#8b9682;
  font-size:12px;
  margin-top:11px
}
.note-dots {
  position:absolute;
  right:16px;
  bottom:18px;
  font-size:28px;
  color:#c0cbae
}
.profile {
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:9px;
  padding-top:20px;
  border-top:1px solid var(--line)
}
.profile strong {
  font-size:12px
}
.profile small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:5px
}
.profile .icon-btn {
  margin-left:auto
}
.avatar {
  width:38px;
  height:38px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e9f0f4;
  color:#688c9d;
  flex-shrink:0;
  font-size:12px;
  font-weight:600
}
.avatar.female {
  background:#faefed;
  color:#bb8c83
}
.avatar.small {
  width:29px;
  height:29px;
  font-size:10px
}
.icon-btn,.pin-btn,.close-btn {
  border:0;
  background:transparent;
  color:#9aa49f;
  padding:6px;
  border-radius:6px
}
.icon-btn:hover,.pin-btn:hover {
  background:var(--pale);
  color:var(--green)
}
.icon-btn .icon {
  width:17px;
  height:17px
}
.workspace {
  margin-left:236px;
  min-width:0;
  flex:1
}
.topbar {
  height:78px;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#ffffffb8;
  border-bottom:1px solid var(--line);
  padding:0 44px
}
.breadcrumb {
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:18px;
  align-items:center
}
.breadcrumb strong {
  font-weight:500;
  color:#53655b
}
.breadcrumb>span {
  color:#c5cdc7
}
.top-tag {
  font-size:9px;
  letter-spacing:1.2px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#90a097
}
.top-tag .icon {
  width:15px
}
main {
  max-width:1460px;
  min-width:0;
  margin:0 auto;
  padding:38px 44px 48px;
  min-height:calc(100vh - 133px)
}
footer {
  min-width:0;
  display:flex;
  justify-content:space-between;
  padding:20px 44px;
  border-top:1px solid var(--line);
  font-size:11px;
  color:#adb5af
}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:27px
}
.eyebrow {
  font-size:9px;
  letter-spacing:2px;
  color:#869f90;
  font-weight:700;
  margin-bottom:12px
}
.page-heading p {
  color:var(--muted);
  font-size:12px;
  margin-top:12px
}
.meta {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap
}
.meta .icon {
  width:14px;
  height:14px
}
.meta>span {
  padding:0 6px;
  color:#c7cec9
}
.trip-description {
  font-size:12px;
  color:var(--muted);
  margin-top:-12px;
  margin-bottom:20px
}
.overview {
  display:grid;
  grid-template-columns:1fr .85fr 1.4fr;
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:33px;
  padding:25px 0
}
.overview>div {
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 26px;
  border-right:1px solid var(--line)
}
.overview>div:last-child {
  border-right:0
}
.overview>div>.icon {
  width:39px;
  height:39px;
  border-radius:12px;
  background:#f2f6f2;
  padding:10px;
  color:#83a08c
}
.overview>div>span:not(.soft-check) {
  font-size:11px;
  color:var(--muted)
}
.overview strong {
  font-size:25px;
  display:block;
  margin-top:7px;
  color:var(--ink);
  font-weight:650
}
.overview strong small {
  font-size:12px;
  font-weight:500;
  margin-left:6px;
  color:#77867c
}
.overview strong.text-value {
  font-size:15px;
  margin-top:10px
}
.gender-summary {
  font-size:11px;
  color:var(--muted);
  margin-left:auto;
  align-self:flex-end;
  white-space:nowrap
}
.soft-check {
  margin-left:auto;
  color:#8eac92
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px
}
.section-heading h2 {
  font-size:17px
}
.section-heading .muted {
  font-size:11px
}
.actions {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap
}
.text-btn {
  border:0;
  background:transparent;
  padding:7px;
  color:#6e8374;
  font-size:12px
}
.text-btn:hover {
  background:var(--pale)
}
.stay-tabs {
  display:flex;
  gap:12px;
  margin-bottom:25px;
  overflow:auto;
  padding-bottom:3px
}
.stay-tab {
  border:1px solid var(--line);
  border-radius:11px;
  background:white;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  flex:1;
  min-width:240px;
  color:#87938a
}
.stay-tab.selected {
  border-color:#5e9281;
  background:#f1f7f3;
  box-shadow:0 0 0 1px #5e92810b
}
.stay-tab strong {
  font-size:12px;
  color:#6b7c71;
  font-weight:600
}
.stay-tab.selected strong {
  color:var(--green)
}
.stay-tab small {
  display:block;
  font-size:10px;
  color:#97a299;
  margin-top:7px
}
.day-chip {
  font-size:9px;
  line-height:1.6;
  font-weight:700;
  letter-spacing:.6px;
  max-width:33px;
  color:#9aab9e
}
.stay-tab.selected .day-chip {
  color:#5a8a72
}
.stay-tab>.badge {
  font-size:9px;
  margin-left:auto
}
.workflow {
  display:flex;
  align-items:center;
  padding:1px 0 23px;
  gap:20px
}
.workflow-step {
  background:transparent;
  border:0;
  padding:4px 0;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:#a0aaa4;
  white-space:nowrap
}
.workflow-step.current {
  color:var(--green);
  font-weight:650
}
.step-number {
  display:flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  font-size:9px;
  border-radius:50%;
  background:#ecefeb
}
.step-number.done {
  background:#e1eee5;
  color:#5c9072
}
.step-number .icon {
  width:13px;
  height:13px
}
.workflow-step.current .step-number {
  background:var(--green);
  color:white
}
.workflow-step small {
  font-size:10px;
  color:#9bb19e
}
.step-line {
  height:1px;
  background:var(--line);
  width:54px
}
.split-view {
  display:grid;
  grid-template-columns:minmax(0,1fr) 306px;
  gap:23px;
  align-items:start
}
.panel {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden
}
.panel-heading {
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.panel-heading h2 {
  font-size:15px;
  display:flex;
  align-items:center;
  gap:9px
}
.panel-heading h2 .icon {
  width:17px;
  height:17px;
  color:#87a18c
}
.panel-heading p {
  font-size:11px;
  color:#9aa59d;
  margin-top:8px
}
.small-btn {
  font-size:11px;
  padding:8px 10px
}
.small-btn .icon {
  width:14px;
  height:14px
}
.room-summary {
  margin:0 24px 20px;
  padding:13px 0;
  border-top:1px solid #f1f3f0;
  border-bottom:1px solid #f1f3f0;
  display:flex;
  align-items:center;
  gap:16px;
  font-size:10px;
  color:#95a197
}
.room-summary b {
  color:#63786a;
  margin-left:4px;
  font-weight:500
}
.link {
  background:transparent;
  border:0;
  padding:0;
  color:#839789;
  font-size:11px;
  white-space:nowrap
}
.room-summary .link {
  margin-left:auto
}
.link .icon {
  width:12px;
  height:12px;
  margin-left:3px
}
.room-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
  padding:0 24px 24px
}
.room-card {
  border:1px solid var(--line);
  border-radius:11px;
  padding:15px;
  background:#fff
}
.room-card-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:13px
}
.room-symbol {
  background:#f5f7f3;
  color:#9dab93;
  border-radius:8px;
  padding:7px;
  display:flex
}
.room-symbol .icon {
  width:17px;
  height:17px
}
.room-card h3 {
  font-size:15px
}
.room-card h3 .icon {
  width:12px;
  height:12px
}
.room-card p {
  font-size:10px;
  color:#a0aaa3;
  margin-top:5px
}
.room-card-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:19px;
  gap:4px
}
.room-card-bottom strong {
  font-size:22px;
  font-weight:600
}
.room-card-bottom small {
  font-size:9px;
  color:#8f9a92;
  font-weight:400;
  margin-left:4px
}
.badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f1f3f0;
  color:#8e9b92;
  border-radius:5px;
  padding:5px 7px;
  font-size:9px;
  white-space:nowrap;
  font-weight:500;
  vertical-align:middle
}
.badge.green {
  background:#edf5ed;
  color:#6d9475
}
.badge.blue {
  background:#edf2f7;
  color:#6d8fa6
}
.badge.pink {
  background:#fbefed;
  color:#b18b83
}
.badge.light {
  background:#ffffffd9;
  color:#5d7b68
}
.room-card.unavailable {
  opacity:.58;
  background:#f7f8f6
}
.add-room {
  border:1px dashed #dce4dc;
  border-radius:11px;
  background:#fafcf9;
  color:#93a58e;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:115px;
  font-size:11px
}
.add-room:hover {
  background:#f1f6ee
}
.add-room .icon {
  width:19px
}
.panel-bottom {
  background:#fbfcfa;
  padding:16px 24px;
  border-top:1px solid var(--line);
  font-size:10px;
  color:#93a08f;
  display:flex;
  gap:7px;
  align-items:center
}
.panel-bottom .icon {
  width:12px;
  height:12px
}
.side-panels {
  display:grid;
  gap:19px
}
.settings-panel .panel-heading {
  padding:23px 21px 14px
}
.setting-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 21px;
  font-size:11px
}
.setting-row>span:first-child {
  color:#91a093
}
.setting-row b {
  font-size:10px;
  color:#647b68;
  font-weight:500
}
.tip {
  background:#f7f9f4;
  border-radius:9px;
  margin:13px 19px 19px;
  padding:12px;
  font-size:10px;
  line-height:1.8;
  color:#92a082;
  display:flex;
  gap:7px;
  align-items:flex-start
}
.tip .icon {
  width:14px;
  height:14px;
  margin-top:2px
}
.readiness {
  text-align:center;
  padding:24px 22px;
  background:#fcfdfb
}
.status-circle {
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 13px;
  width:38px;
  height:38px;
  border-radius:50%;
  color:#8aa47e;
  background:#edf3e5
}
.status-circle.warning {
  background:#fbefdb;
  color:#bba16a
}
.readiness h3 {
  font-size:14px;
  color:#57714d
}
.readiness p {
  font-size:10px;
  color:#9aaa8e;
  margin:9px 0 15px;
  line-height:1.8
}
.count-line {
  display:flex;
  justify-content:center;
  gap:15px;
  color:#98a38f;
  font-size:10px;
  margin-bottom:20px
}
.count-line b {
  font-weight:500;
  color:#6b8460;
  margin-left:4px
}
.full {
  width:100%
}
.readiness>small {
  display:block;
  font-size:9px;
  color:#a1ad99;
  margin-top:12px
}
.muted {
  color:var(--muted)
}
.count {
  color:var(--green);
  font-size:14px;
  margin-left:7px
}
.welcome-banner {
  height:250px;
  background:#eaf0e5;
  border:1px solid #e2e9dd;
  border-radius:18px;
  position:relative;
  overflow:hidden;
  padding:43px;
  margin-bottom:34px
}
.welcome-banner>div {
  position:relative;
  z-index:1
}
.welcome-banner h2 {
  font-size:26px;
  color:#3c604d;
  margin-top:13px;
  letter-spacing:-1px
}
.welcome-banner p {
  font-size:12px;
  color:#879b81;
  margin-top:15px
}
.welcome-banner .landscape {
  position:absolute;
  width:55%;
  height:100%;
  right:0;
  bottom:0;
  object-fit:cover;
  opacity:.9
}
.trip-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px
}
.trip-card {
  text-align:left;
  padding:0;
  background:white;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:transform .2s,box-shadow .2s
}
.trip-card:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 24px #273b2910
}
.trip-art {
  height:160px;
  background:#e6ede0;
  position:relative;
  overflow:hidden
}
.trip-art .landscape {
  width:100%;
  position:absolute;
  bottom:0
}
.trip-art .badge {
  position:absolute;
  top:16px;
  left:17px
}
.art-1 {
  background:#efe8df
}
.art-1 svg {
  filter:hue-rotate(325deg)
}
.art-2 {
  background:#e4edf2
}
.art-2 svg {
  filter:hue-rotate(35deg)
}
.trip-card-body {
  padding:22px
}
.trip-card-body>small {
  color:#87998a;
  font-size:10px
}
.trip-card-body h2 {
  margin:9px 0 14px;
  font-size:18px
}
.trip-card-body p {
  font-size:10px;
  color:#9da89f;
  display:flex;
  align-items:center;
  gap:5px
}
.trip-card-body p .icon {
  width:13px;
  height:13px
}
.trip-card-foot {
  border-top:1px solid var(--line);
  padding-top:17px;
  margin-top:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#829b86;
  font-size:11px
}
.trip-card-foot .icon {
  width:16px;
  height:16px
}
.trip-card-foot>span {
  display:flex;
  align-items:center;
  gap:6px
}
.empty {
  text-align:center;
  padding:65px 24px;
  background:#fff;
  border:1px dashed #dbe5db;
  border-radius:16px
}
.empty>.icon {
  width:38px;
  height:38px;
  color:#99b39b;
  margin-bottom:18px
}
.empty h2 {
  margin-bottom:10px
}
.empty p {
  color:#8b9a90;
  font-size:12px;
  margin-bottom:20px
}
.empty .actions {
  justify-content:center
}
.member-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:0 24px 24px;
  gap:14px
}
.friend-card {
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:17px
}
.friend-card strong {
  font-size:13px
}
.friend-card small {
  display:block;
  color:#9aa69d;
  font-size:10px;
  margin-top:7px
}
.friend-card>.icon-btn {
  margin-left:auto
}
.friend-card.inactive {
  opacity:.55
}
.draw-panel {
  text-align:center;
  padding:30px 26px
}
.draw-panel>h2,.participant-draw>h2 {
  font-size:24px
}
.draw-panel>p,.participant-draw>p {
  font-size:11px;
  color:#92a094;
  margin-top:12px
}
.draw-person {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  margin:26px auto;
  font-size:12px;
  color:#889b8c
}
.draw-person select {
  padding:10px 14px;
  min-width:180px
}
.draw-cards {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin:25px 0
}
.draw-card {
  aspect-ratio:3/4;
  background:#4a7d6a;
  border:1px solid #5a8a79;
  color:#e5eddd;
  border-radius:10px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:15px;
  box-shadow:0 4px 0 #396656;
  transition:transform .18s
}
.draw-card:before {
  content:'';
  position:absolute;
  inset:6px;
  border:1px solid #93b8a456;
  border-radius:6px
}
.draw-card span {
  font-size:33px
}
.draw-card small {
  font-size:6px;
  letter-spacing:1px
}
.draw-card:not(:disabled):hover {
  transform:translateY(-6px) rotate(-2deg);
  background:#568874
}
.draw-card.taken {
  background:#f0f3ee;
  border-color:#e4eae0;
  box-shadow:none;
  color:#adbba9;
  opacity:.85
}
.draw-card.taken:before {
  border-color:#dde5d8
}
.draw-card.taken .icon {
  width:22px;
  height:22px
}
.draw-progress {
  margin:4px 24px 19px
}
.draw-progress>div {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#8b9e8e;
  margin-bottom:9px
}
.draw-progress b {
  font-size:11px;
  font-weight:500;
  color:#65866e
}
progress {
  display:block;
  width:100%;
  height:6px;
  border:0;
  border-radius:10px;
  overflow:hidden;
  background:#eef3eb
}
progress::-webkit-progress-bar {
  background:#eef3eb
}
progress::-webkit-progress-value {
  background:#84a98c;
  border-radius:10px
}
progress::-moz-progress-bar {
  background:#84a98c
}
.draw-list {
  max-height:300px;
  overflow:auto;
  padding:0 24px
}
.draw-list>div {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  font-size:12px
}
.draw-list b {
  margin-left:auto;
  color:#61846c;
  font-size:11px
}
.stack {
  display:grid;
  gap:9px;
  padding:22px
}
.hint {
  font-size:10px;
  color:#98a49a;
  line-height:1.8;
  text-align:center
}
.revealed {
  margin:26px auto;
  padding:35px 20px;
  background:#f0f5ec;
  border-radius:17px;
  max-width:400px;
  border:1px solid #dfebd9;
  animation:reveal .4s ease-out
}
.revealed>span {
  font-size:12px;
  color:#859a79
}
.revealed>strong {
  display:block;
  font-size:90px;
  font-weight:600;
  letter-spacing:-4px;
  color:#4d7754;
  margin:10px
}
.revealed strong small {
  font-size:20px;
  letter-spacing:0;
  margin-left:10px
}
.revealed p {
  font-size:11px;
  color:#93a185
}
@keyframes reveal {
  from {
    transform:rotateY(85deg);
    opacity:.2
  }
  to {
    transform:rotateY(0);
    opacity:1
  }
}
.result-heading {
  align-items:start
}
.result-heading p {
  font-size:11px;
  margin-top:9px
}
.result-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  border-radius:14px;
  background:white;
  margin:22px 0;
  padding:23px 0
}
.result-stats>div {
  padding:0 25px;
  border-right:1px solid var(--line)
}
.result-stats>div:last-child {
  border:0
}
.result-stats span {
  font-size:11px;
  color:#8ea08f
}
.result-stats strong {
  display:block;
  font-size:27px;
  margin-top:8px;
  color:#537a5b;
  font-weight:600
}
.result-stats small {
  font-size:12px;
  font-weight:400;
  color:#8ea08f;
  margin-left:5px
}
.result-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.result-room .panel-heading {
  border-bottom:1px solid #f0f3ed;
  padding:20px
}
.result-room .panel-heading p {
  font-size:10px
}
.room-members {
  padding:10px 17px
}
.room-person {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 0
}
.room-person>div {
  flex:1;
  min-width:0
}
.room-person strong {
  font-size:12px;
  font-weight:550
}
.room-person small {
  display:block;
  font-size:9px;
  color:#9ca991;
  line-height:1.5;
  margin-top:4px
}
.room-person .avatar {
  width:32px;
  height:32px;
  font-size:10px
}
.pin-btn {
  padding:3px
}
.pin-btn .icon {
  width:14px;
  height:14px
}
.locked {
  color:var(--green);
  background:#e9f2e7
}
.empty-room {
  text-align:center;
  padding:26px 0;
  color:#a4afa2;
  font-size:11px
}
.result-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:23px;
  gap:16px
}
.result-actions>.muted {
  font-size:10px
}
.danger-text {
  border:0;
  background:transparent;
  color:#b4847b
}
.notice {
  background:#f8f4e9;
  color:#a49167;
  border:1px solid #eee6d2;
  border-radius:10px;
  padding:16px 20px;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
  line-height:1.8
}
.notice .btn {
  margin-left:auto
}
.notice.compact {
  font-size:11px;
  padding:12px
}
.participant-draw {
  padding:40px;
  text-align:center;
  max-width:720px;
  margin:25px auto
}
.participant-draw .draw-cards {
  max-width:570px;
  margin:30px auto
}
.audit-list details {
  border-bottom:1px solid var(--line)
}
.audit-list summary {
  list-style:none;
  padding:21px 25px;
  display:flex;
  align-items:center;
  gap:17px;
  cursor:pointer
}
.audit-icon {
  background:#f0f5ed;
  border-radius:10px;
  padding:9px;
  color:#90a487
}
.audit-list strong {
  font-size:12px
}
.audit-list small {
  display:block;
  font-size:10px;
  color:#9ba898;
  margin-top:7px
}
.audit-list summary>.badge {
  margin-left:auto
}
.audit-list pre {
  background:#f8faf5;
  font-size:10px;
  line-height:1.6;
  max-height:300px;
  overflow:auto;
  margin:0;
  padding:20px;
  white-space:pre-wrap;
  word-break:break-word
}
dialog {
  border:1px solid var(--line);
  border-radius:18px;
  padding:0;
  width:min(620px,calc(100vw - 28px));
  max-height:90vh;
  color:var(--ink);
  box-shadow:0 24px 100px #20342630
}
dialog::backdrop {
  background:#20342666;
  backdrop-filter:blur(3px)
}
.modal-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:23px 27px;
  border-bottom:1px solid var(--line)
}
.modal-heading h2 {
  font-size:19px
}
.close-btn {
  font-size:28px;
  line-height:1
}
.modal-content {
  padding:25px 27px;
  max-height:65vh;
  overflow:auto
}
.modal-footer {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:19px 27px;
  border-top:1px solid var(--line)
}

.candidate-list {
  display:grid;
  gap:8px;
  margin-top:16px
}
.candidate-option {
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  text-align:left
}
.candidate-option:hover {
  border-color:#a5cbbb;
  background:var(--pale)
}
.candidate-option span:nth-child(2) {
  display:grid;
  gap:3px;
  flex:1
}
.candidate-option small {
  color:var(--muted)
}
.candidate-option > .icon {
  color:var(--green);
  width:17px;
  height:17px
}
.field {
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-bottom:19px;
  font-size:12px;
  color:#768b77
}
.field:last-child {
  margin-bottom:0
}
input,select,textarea {
  border:1px solid #dfe7dc;
  border-radius:7px;
  background:#fff;
  color:#3d5542;
  padding:11px 12px;
  min-width:0;
  max-width:100%
}
input::placeholder {
  color:#adb8a7
}
textarea {
  resize:vertical
}
.field>span {
  font-size:12px;
  font-weight:550
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px
}
.form-error {
  color:#b56d5b;
  font-size:12px;
  padding:0 27px;
  line-height:1.8
}
.form-error:not(:empty) {
  margin-bottom:17px
}
.participant-editor {
  margin-top:20px
}
.participant-row {
  border-bottom:1px solid var(--line);
  padding:16px 0;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}
.check-label {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:165px;
  font-size:12px
}
.check-label input {
  accent-color:var(--green);
  width:16px;
  height:16px
}
.check-label small {
  font-size:10px;
  color:#9ba994
}
.participant-dates {
  display:flex;
  gap:8px
}
.participant-dates label {
  font-size:9px;
  color:#9baa93;
  display:flex;
  flex-direction:column;
  gap:5px
}
.participant-dates input {
  font-size:10px;
  padding:7px;
  width:124px
}
.participant-row>.btn {
  margin-left:auto
}
.invite-notice {
  display:block;
  margin-top:20px
}
.invite-notice strong,.invite-notice small {
  display:block;
  font-size:11px
}
.invite-notice input {
  display:block;
  width:100%;
  font-size:11px;
  margin:10px 0
}
.login-wrap {
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:white
}
.login-card {
  align-self:center;
  max-width:520px;
  padding:50px;
  margin:auto
}
.login-card>.brand {
  margin-bottom:60px
}
.login-card h1 {
  font-size:29px;
  line-height:1.65
}
.login-card em {
  font-style:normal;
  color:#6d9877
}
.login-card>p {
  font-size:12px;
  color:#92a48f;
  margin:20px 0 34px
}
.login-card form {
  margin-top:35px
}
.login-card .hint {
  text-align:left;
  font-size:10px;
  margin-top:23px
}
.login-card .form-error {
  padding:0;
  margin-top:13px
}
.login-art {
  position:relative;
  background:#e8eee1;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center
}
.login-art .landscape {
  position:absolute;
  width:130%;
  bottom:0;
  min-height:60%
}
.login-art>span {
  position:relative;
  align-self:flex-start;
  margin-top:25%;
  font-size:clamp(28px,4vw,62px);
  font-weight:650;
  letter-spacing:-2px;
  line-height:1.2;
  color:#51745a
}
.loading {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  color:var(--green)
}
#toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translate(-50%,20px);
  background:#345646;
  color:white;
  box-shadow:0 5px 20px #25382822;
  padding:15px 24px;
  border-radius:10px;
  font-size:12px;
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  max-width:calc(100vw - 32px);
  line-height:1.6
}
#toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
#toast.error {
  background:#a56c59
}
@media(min-width:1600px) {
  main {
    padding-top:45px
  }
  .room-card {
    padding:19px
  }
  .room-grid {
    gap:17px
  }
  .room-card-bottom {
    margin-top:24px
  }
  .split-view {
    grid-template-columns:minmax(0,1fr) 330px
  }
}
@media(max-width:1250px) {
  .sidebar {
    width:210px;
    padding-left:17px;
    padding-right:17px
  }
  .workspace {
    margin-left:210px
  }
  main {
    padding:30px 28px
  }
  .topbar {
    padding:0 28px
  }
  .split-view {
    grid-template-columns:minmax(0,1fr) 280px;
    gap:18px
  }
  .room-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:0 18px 20px
  }
  .panel-heading {
    padding:20px 18px
  }
  .room-summary {
    margin-left:18px;
    margin-right:18px;
    gap:10px
  }
  .room-summary .link {
    font-size:9px
  }
  .overview>div {
    padding:0 19px;
    gap:10px
  }
  .gender-summary {
    display:none
  }
  .stay-tab {
    min-width:215px;
    padding:15px
  }
  .result-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .trip-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .member-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .draw-cards {
    grid-template-columns:repeat(4,1fr)
  }
  .result-heading {
    flex-wrap:wrap
  }
}
@media(max-width:980px) {
  .sidebar {
    width:180px;
    padding:28px 13px 17px
  }
  .workspace {
    margin-left:180px
  }
  .brand {
    font-size:20px;
    gap:8px
  }
  .brand>.icon {
    width:36px;
    height:38px
  }
  .brand small {
    font-size:8px
  }
  .profile small {
    display:none
  }
  .profile .avatar {
    width:28px;
    height:28px
  }
  .profile {
    gap:6px
  }
  .profile strong {
    font-size:10px
  }
  .sidebar-note {
    padding:18px 12px
  }
  .split-view {
    grid-template-columns:1fr
  }
  .side-panels {
    grid-template-columns:1fr 1fr
  }
  .room-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .overview {
    grid-template-columns:1fr 1fr
  }
  .overview>div:last-child {
    display:none
  }
  .overview>div:nth-child(2) {
    border:0
  }
  .top-tag {
    display:none
  }
  .page-heading h1 {
    font-size:25px
  }
  .draw-view .side-panels {
    grid-template-columns:1fr
  }
  .draw-cards {
    grid-template-columns:repeat(5,1fr)
  }
  .welcome-banner {
    padding:30px;
    height:230px
  }
  .welcome-banner h2 {
    font-size:23px
  }
  .welcome-banner .landscape {
    opacity:.55
  }
  .result-stats>div {
    padding:0 15px
  }
  .result-stats span {
    font-size:10px
  }
  .result-actions {
    align-items:flex-start;
    flex-direction:column
  }
  .stay-tab .badge {
    display:none
  }
}
@media(max-width:700px) {
  .layout {
    display:block
  }
  .sidebar {
    position:static;
    width:100%;
    padding:15px 19px;
    border-right:0;
    border-bottom:1px solid var(--line);
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:12px
  }
  .sidebar .brand {
    font-size:18px;
    white-space:nowrap
  }
  .brand small {
    display:none
  }
  .sidebar .brand>.icon {
    width:32px;
    height:34px;
    padding:7px;
    border-radius:9px
  }
  .nav-caption,.sidebar-note,.profile {
    display:none
  }
  .sidebar nav {
    display:flex;
    margin-left:auto;
    gap:4px
  }
  .nav-btn {
    padding:10px 8px;
    font-size:11px;
    gap:5px
  }
  .nav-btn>.icon {
    width:16px;
    height:16px
  }
  .nav-btn:last-child {
    font-size:0;
    gap:0
  }
  .nav-btn:last-child>.icon {
    width:18px;
    height:18px
  }
  .workspace {
    margin-left:0
  }
  .topbar {
    height:47px;
    padding:0 20px
  }
  .breadcrumb {
    font-size:10px;
    gap:10px
  }
  main {
    padding:24px 18px 35px
  }
  .page-heading {
    margin-bottom:24px;
    align-items:flex-start;
    gap:12px
  }
  .page-heading>div,
  .section-heading>*,
  .panel-heading>*,
  .result-heading>* {
    min-width:0
  }
  .page-heading h1 {
    font-size:23px
  }
  .page-heading>.btn {
    font-size:10px;
    padding:9px;
    gap:5px;
    margin-top:18px
  }
  .page-heading>.btn .icon {
    width:12px;
    height:12px
  }
  .eyebrow {
    font-size:8px;
    margin-bottom:9px;
    letter-spacing:1.5px
  }
  .page-heading p {
    font-size:10px;
    margin-top:10px
  }
  .trip-description {
    font-size:10px
  }
  .overview {
    padding:19px 0;
    margin-bottom:27px
  }
  .overview>div {
    padding:0 15px;
    gap:10px
  }
  .overview>div>.icon {
    width:32px;
    height:32px;
    padding:8px
  }
  .overview>div>span:not(.soft-check) {
    font-size:10px
  }
  .overview strong {
    font-size:22px;
    margin-top:5px
  }
  .overview strong small {
    font-size:10px
  }
  .section-heading {
    gap:10px
  }
  .section-heading h2 {
    font-size:15px
  }
  .section-heading .actions {
    gap:0
  }
  .section-heading .text-btn {
    font-size:10px;
    padding:6px
  }
  .section-heading .text-btn .icon {
    width:13px;
    height:13px
  }
  .stay-tabs {
    gap:10px;
    margin-bottom:17px
  }
  .stay-tab {
    min-width:235px;
    flex:none;
    padding:16px
  }
  .workflow {
    gap:10px;
    padding-bottom:19px
  }
  .workflow-step {
    font-size:10px;
    gap:6px
  }
  .step-number {
    width:22px;
    height:22px
  }
  .step-line {
    flex:1;
    min-width:8px;
    max-width:25px
  }
  .workflow-step small {
    display:none
  }
  .room-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:0 16px 18px;
    gap:11px
  }
  .panel-heading {
    padding:20px 16px
  }
  .panel-heading h2 {
    font-size:14px
  }
  .panel-heading p {
    font-size:10px
  }
  .room-summary {
    margin:0 16px 17px;
    font-size:9px;
    gap:10px
  }
  .room-card {
    padding:15px
  }
  .side-panels {
    grid-template-columns:1fr
  }
  .readiness p {
    max-width:280px;
    margin-left:auto;
    margin-right:auto
  }
  .panel-bottom {
    padding:15px 16px;
    font-size:9px
  }
  .settings-panel .setting-row {
    padding:11px 21px
  }
  .settings-panel .panel-heading {
    padding-top:23px
  }
  .result-grid,.trip-grid,.member-grid {
    grid-template-columns:1fr
  }
  .result-stats {
    grid-template-columns:1fr 1fr;
    gap:20px 0
  }
  .result-stats>div:nth-child(2) {
    border:0
  }
  .result-heading h2 {
    font-size:16px
  }
  .result-heading .badge {
    font-size:9px;
    margin-top:8px
  }
  .result-heading p {
    font-size:10px
  }
  .result-heading .btn {
    font-size:11px;
    padding:10px 13px
  }
  .room-person small {
    font-size:10px
  }
  .room-person strong {
    font-size:13px
  }
  .room-person .avatar {
    width:36px;
    height:36px
  }
  .room-members {
    padding:10px 20px
  }
  .notice {
    font-size:11px;
    flex-wrap:wrap
  }
  .notice .btn {
    margin-left:0
  }
  .welcome-banner {
    height:230px;
    padding:28px 24px
  }
  .welcome-banner .landscape {
    width:100%;
    opacity:.45;
    left:15%
  }
  .welcome-banner h2 {
    font-size:24px;
    max-width:200px;
    line-height:1.45;
    margin-top:12px
  }
  .welcome-banner p {
    font-size:11px;
    margin-top:12px
  }
  .welcome-banner .eyebrow {
    font-size:8px
  }
  .trip-art {
    height:175px
  }
  .trip-card-body h2 {
    font-size:20px
  }
  .draw-panel {
    padding:28px 18px
  }
  .draw-panel>h2 {
    font-size:22px
  }
  .draw-cards {
    grid-template-columns:repeat(4,1fr);
    gap:11px
  }
  /* Touch browsers can keep :hover on the last-tapped card. Keep the card
     stable on mobile so that focus reads as a selected state, not a layout
     error. */
  .draw-card:not(:disabled):hover,
  .draw-card:not(:disabled):focus {
    transform:none;
    background:#568874
  }
  .draw-card:not(:disabled):focus-visible {
    outline:3px solid #a5cbbb;
    outline-offset:3px;
    box-shadow:0 4px 0 #396656, 0 0 0 5px #eaf3ee
  }
  .draw-card span {
    font-size:26px
  }
  .draw-card small {
    font-size:5px;
    letter-spacing:.8px
  }
  .draw-person {
    gap:10px;
    font-size:11px
  }
  .draw-person select {
    min-width:160px
  }
  .participant-draw {
    padding:30px 17px
  }
  .participant-draw>h2 {
    font-size:23px
  }
  .result-actions {
    gap:13px
  }
  .result-actions .actions {
    width:100%;
    justify-content:space-between
  }
  .result-actions .btn {
    font-size:11px
  }
  .empty {
    padding:40px 20px
  }
  .empty h2 {
    font-size:18px
  }
  .empty .actions {
    flex-direction:column
  }
  .member-grid {
    padding:0 17px 20px
  }
  .panel-heading>.muted {
    font-size:9px;
    max-width:150px;
    line-height:1.6
  }
  .modal-heading {
    padding:20px
  }
  .modal-content {
    padding:21px 20px;
    max-height:63vh
  }
  .modal-footer {
    padding:17px 20px
  }
  .form-row {
    gap:12px
  }
  .field>span {
    font-size:11px
  }
  input,select,textarea {
    font-size:16px;
    padding:10px
  }
  .participant-dates input {
    font-size:11px;
    width:126px
  }
  .check-label {
    min-width:155px
  }
  .participant-row {
    gap:12px
  }
  .participant-dates {
    order:3;
    width:100%
  }
  .participant-row>.btn {
    order:2
  }
  .participant-dates label {
    flex:1
  }
  .participant-dates input {
    width:100%
  }
  .login-wrap {
    grid-template-columns:1fr;
    background:#f6f8f1
  }
  .login-card {
    padding:35px 27px;
    max-width:440px;
    width:100%
  }
  .login-card>.brand {
    margin-bottom:45px
  }
  .login-card h1 {
    font-size:26px
  }
  .login-art {
    display:none
  }
  .login-card>.hint {
    font-size:10px
  }
  .login-card form {
    margin-top:28px
  }
  footer {
    padding:17px 20px;
    font-size:9px
  }
  footer span {
    font-size:8px
  }
  #toast {
    width:max-content;
    max-width:calc(100vw - 30px);
    font-size:11px;
    padding:13px 17px
  }
  .audit-list summary {
    padding:18px 16px;
    gap:10px
  }
  .audit-list small {
    font-size:9px
  }
  .audit-list strong {
    font-size:11px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
.mobile-logout {
  display:none
}
.login-tabs {
  display:flex;
  gap:5px;
  padding:5px;
  border-radius:10px;
  background:#edf2eb;
}
.login-tabs button {
  flex:1;
  border:0;
  border-radius:7px;
  padding:12px 9px;
  background:transparent;
  color:#718572;
  font-size:12px;
}
.login-tabs button[aria-selected="true"] {
  background:#fff;
  color:var(--green);
  font-weight:650;
  box-shadow:0 2px 6px #354a3510;
}
.login-card .login-tabs + form {
  margin-top:23px;
}
.first-login {
  margin-top:25px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:12px;
}
.first-login p {
  margin:8px 0 14px;
  color:#718572;
  font-size:11px;
}
.first-login small {
  display:block;
  margin-top:13px;
  font-size:10px;
  color:#81947d;
  line-height:1.7;
}
.account-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px;
  border:1px solid #dbe8d8;
  border-radius:12px;
  background:#edf5e9;
  margin-bottom:26px;
}
.account-banner > div {
  display:flex;
  align-items:center;
  gap:13px;
  color:#517651;
}
.account-banner strong {
  font-size:13px;
}
.account-banner small {
  display:block;
  margin-top:7px;
  font-size:11px;
  line-height:1.7;
  color:#698969;
}
.account-link {
  margin-left:auto;
}
.account-intro {
  margin-bottom:22px;
  font-size:12px;
  color:#728873;
}
.account-id {
  padding:14px;
  background:#f2f6ef;
  border-radius:8px;
  margin-bottom:20px;
  color:#7b8f79;
  font-size:12px;
}
.account-id strong {
  margin-left:12px;
  color:var(--green);
  overflow-wrap:anywhere;
}
.account-admin-info {
  background:#f2f6ef;
  border-radius:9px;
  padding:15px;
  margin-bottom:22px;
  font-size:12px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.account-admin-info small {
  color:#7b8f79;
  font-size:11px;
}
.account-admin-info strong {
  overflow-wrap:anywhere;
}
.friend-card > div {
  min-width:0;
}
.account-username {
  overflow-wrap:anywhere;
}
@media(max-width:700px) {
  .account-banner {
    flex-direction:column;
    align-items:stretch;
    padding:18px;
  }
  .account-banner .btn {
    align-self:flex-end;
  }
  .account-link {
    white-space:nowrap;
    font-size:10px;
    padding:7px 5px;
  }
  .account-link .icon {
    width:14px;
    height:14px;
  }
  .breadcrumb {
    min-width:0;
  }
  .breadcrumb strong {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}
.first-rooms {
  grid-column:1 / -1;
  min-height:200px;
}
.first-rooms small {
  font-size:11px;
  color:var(--muted);
}
.bulk-intro {
  margin-bottom:24px;
  font-size:12px;
  color:#718576;
}
.bulk-preview {
  padding:18px;
  border:1px solid #dfe9df;
  border-radius:12px;
  background:#f5f9f3;
}
.bulk-preview-heading {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
}
.bulk-room-names {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:16px 0 12px;
}
.bulk-room-names .badge {
  padding:7px 10px;
  font-size:11px;
}
.bulk-preview p {
  font-size:11px;
  color:#6f8372;
}
.bulk-preview p.bulk-conflict {
  margin-top:10px;
  color:#a05d50;
}
@media(max-width:700px) {
  .mobile-logout {
    display:block
  }
}

/* Mobile readability baseline: keep informational text comfortably readable
   without changing the desktop type scale. */
@media(max-width:700px) {
  body {
    font-size:16px
  }
  p {
    line-height:1.65
  }
  .breadcrumb {
    font-size:12px
  }
  .nav-btn {
    font-size:13px
  }
  .page-heading p,
  .trip-description,
  .panel-heading p,
  .result-heading p,
  .account-banner small,
  .welcome-banner p,
  .login-card>.hint,
  footer span {
    font-size:12px
  }
  .eyebrow {
    font-size:10px
  }
  .overview>div>span:not(.soft-check),
  .room-summary,
  .section-heading .text-btn,
  .field>span,
  .draw-person,
  .panel-bottom,
  .first-login p,
  .bulk-intro,
  .bulk-preview p,
  .account-intro,
  .account-id,
  .account-admin-info,
  .name-login-card p {
    font-size:12px
  }
  .section-heading h2,
  .panel-heading h2 {
    font-size:17px
  }
  .room-summary .link,
  .panel-heading>.muted,
  .result-heading .badge,
  .notice,
  .result-actions .btn,
  .account-link,
  .bulk-preview-heading {
    font-size:12px
  }
  .room-card p,
  .room-card-bottom small,
  .room-person small,
  .friend-card small,
  .audit-list small,
  .first-rooms small,
  .invite-notice strong,
  .invite-notice small,
  .participant-dates label,
  .check-label small {
    font-size:11px
  }
  .room-card h3,
  .room-person strong {
    font-size:14px
  }
  .room-card-bottom strong {
    font-size:23px
  }
  .workflow-step {
    font-size:12px
  }
  .result-heading h2 {
    font-size:18px
  }
  .result-heading .btn,
  .btn {
    font-size:13px
  }
  .text-btn,
  .small-btn {
    font-size:12px
  }
  .stay-tab {
    font-size:13px
  }
  .trip-card-body h2 {
    font-size:21px
  }
  .draw-panel>h2,
  .participant-draw>h2 {
    font-size:24px
  }
  .draw-card small {
    font-size:8px
  }
  .hint,
  .muted,
  .readiness>small,
  .result-stats span,
  .result-stats small,
  .audit-list strong,
  .toast {
    font-size:11px
  }
  .modal-content,
  .modal-footer {
    font-size:14px
  }
  footer {
    font-size:11px
  }
}

.btn.kakao {
  background:#FEE500;
  color:#191919;
  border-color:#FEE500;
  font-weight:700;
}
.btn.kakao:hover {
  background:#fada0a;
}
.kakao-badge {
  background:#FEE500;
  color:#191919;
  font-weight:700;
  border-radius:6px;
  padding:3px 8px;
  font-size:11px;
}
.name-login-card {
  text-align:center;
  padding:10px 0;
}
.name-login-card h3 {
  font-size:17px;
  color:#223326;
  margin-bottom:6px;
}
.name-login-card p {
  color:#6f8372;
  font-size:13px;
  margin-bottom:14px;
}